Media editor polish

stylesheets/components/MediaEditor.scss

@@ -18,8 +18,8 @@
   &__container {
     display: flex;
     flex: 1;
-    padding-block: 48px;
+    padding-block: 64px;
-    padding-inline: 60px;
+    padding-inline: 64px;
     padding-bottom: 0;
     overflow: hidden;
   }
@@ -127,7 +127,7 @@
 
     &--input {
       margin-inline: 24px;
-      min-width: 410px;
+      min-width: 400px;
     }
 
     &--buttons {
@@ -163,19 +163,38 @@
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    height: 20px;
+    height: 28px;
     justify-content: center;
     margin-bottom: 24px;
     max-width: 596px;
   }
 
   &__tools-row-2 {
+    align-items: center;
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
-    height: 36px;
     justify-content: center;
     max-width: 596px;
+    min-height: 36px;
+  }
+
+  &__toolbar__crop {
+    align-items: center;
+    color: $color-white;
+    display: flex;
+    height: 36px;
+    justify-content: center;
+    padding-block: 14px;
+    padding-inline: 12px;
+    margin-inline: 16px;
+
+    &__button {
+      @include button-reset;
+      display: flex;
+      margin-block: 0;
+      margin-inline: 20px;
+    }
   }
 
   &__toolbar {
@@ -189,10 +208,11 @@
     padding-block: 14px;
     padding-inline: 12px;
     margin-inline: 16px;
+    min-width: 418px;
 
     &__tool,
     &__tool__button {
-      margin-inline-end: 14px;
+      margin-inline-start: 14px;
     }
 
     &__button {
@@ -324,7 +344,7 @@
   &__history-buttons {
     inset-inline-start: 24px;
     position: absolute;
-    top: 24px;
+    top: 40px;
   }
 
   &__close {
@@ -334,7 +354,7 @@
     height: 20px;
     position: absolute;
     inset-inline-end: 24px;
-    top: 24px;
+    top: 40px;
     width: 20px;
 
     &::before {
@@ -342,15 +362,8 @@
       display: block;
       width: 100%;
       height: 100%;
-
-      @include light-theme {
-        @include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
-      }
-
-      @include dark-theme {
       @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
     }
-    }
 
     &:hover,
     &:focus {

ts/components/MediaEditor.tsx

@@ -953,10 +953,10 @@ export function MediaEditor({
           >
             {i18n('icu:MediaEditor__crop--reset')}
           </Button>
-          <div className="MediaEditor__toolbar">
+          <div className="MediaEditor__toolbar__crop">
             <button
               aria-label={i18n('icu:MediaEditor__crop--rotate')}
-              className="MediaEditor__toolbar__tool MediaEditor__toolbar__button MediaEditor__toolbar__button--rotate"
+              className="MediaEditor__toolbar__crop__button MediaEditor__toolbar__button--rotate"
               onClick={() => {
                 if (!fabricCanvas) {
                   return;
@@ -992,7 +992,7 @@ export function MediaEditor({
             />
             <button
               aria-label={i18n('icu:MediaEditor__crop--flip')}
-              className="MediaEditor__toolbar__tool MediaEditor__toolbar__button MediaEditor__toolbar__button--flip"
+              className="MediaEditor__toolbar__crop__button MediaEditor__toolbar__button--flip"
               onClick={() => {
                 if (!fabricCanvas) {
                   return;
@@ -1012,7 +1012,7 @@ export function MediaEditor({
             <button
               aria-label={i18n('icu:MediaEditor__crop--lock')}
               className={classNames(
-                'MediaEditor__toolbar__button',
+                'MediaEditor__toolbar__crop__button',
                 `MediaEditor__toolbar__button--crop-${
                   cropAspectRatioLock ? '' : 'un'
                 }locked`
@@ -1283,7 +1283,7 @@ export function MediaEditor({
               />
             </div>
             <div className="MediaEditor__tools-row-2">
-              <div className="MediaEditor__tools--input">
+              <div className="MediaEditor__tools--input dark-theme">
                 <CompositionInput
                   draftText={draftText}
                   draftBodyRanges={draftBodyRanges}

ts/components/StoryCreator.tsx

@@ -220,7 +220,7 @@ export function StoryCreator({
               ourConversationId={ourConversationId}
               i18n={i18n}
               me={me}
-              onClose={() => setDraftAttachment(undefined)}
+              onClose={() => setIsReadyToSend(false)}
               onDeleteList={onDeleteList}
               onDistributionListCreated={onDistributionListCreated}
               onHideMyStoriesFrom={onHideMyStoriesFrom}

ts/util/theme.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { missingCaseError } from './missingCaseError';
+import { ThemeType } from '../types/Util';
 
 export enum Theme {
   Light,
@@ -18,3 +19,14 @@ export function themeClassName(theme: Theme): string {
       throw missingCaseError(theme);
   }
 }
+
+export function themeClassName2(theme: ThemeType): string {
+  switch (theme) {
+    case ThemeType.light:
+      return 'light-theme';
+    case ThemeType.dark:
+      return 'dark-theme';
+    default:
+      throw missingCaseError(theme);
+  }
+}