Composer: Small style fixes (#6245)

src/assets/font-icons/schedule.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M11 1.333c.684 0 1.247.515 1.324 1.178l.009.155v5.833a1.333 1.333 0 0 1-2.657.155l-.009-.155.001-2.696a12 12 0 0 0-5.667 10.196c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12a1.333 1.333 0 0 1 0-2.666c8.1 0 14.667 6.566 14.667 14.667s-6.566 14.667-14.667 14.667c-8.1 0-14.667-6.566-14.667-14.667 0-4.873 2.399-9.305 6.229-12H5.168a1.333 1.333 0 0 1-1.324-1.178l-.009-.155c0-.684.515-1.247 1.178-1.324l.155-.009h5.833zm5 5c.684 0 1.247.515 1.324 1.178l.009.155v7.78l4.609 4.611c.481.481.518 1.237.111 1.76l-.111.126a1.333 1.333 0 0 1-1.76.111l-.126-.111-5-5a1.334 1.334 0 0 1-.379-.768L14.665 16V7.667c0-.736.597-1.333 1.333-1.333z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M11 1.333c.684 0 1.247.515 1.324 1.178l.009.155v5.833a1.333 1.333 0 0 1-2.657.155l-.009-.155.001-2.696a12 12 0 0 0-5.667 10.196c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12a1.333 1.333 0 0 1 0-2.666c8.1 0 14.667 6.566 14.667 14.667s-6.566 14.667-14.667 14.667S1.334 24.101 1.334 16c0-4.873 2.399-9.305 6.229-12H5.168a1.333 1.333 0 0 1-1.324-1.178l-.009-.155c0-.684.515-1.247 1.178-1.324l.155-.009h5.833zm5 5c.684 0 1.247.515 1.324 1.178l.009.155v7.78l4.609 4.611c.481.481.518 1.237.111 1.76l-.111.126a1.333 1.333 0 0 1-1.76.111l-.126-.111-5-5a1.33 1.33 0 0 1-.379-.768L14.665 16V7.667c0-.736.597-1.333 1.333-1.333z"/></svg>

src/assets/font-icons/scheduled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M10.886 1c.7 0 1.276.526 1.355 1.205l.009.159V8.33a1.364 1.364 0 0 1-2.718.159l-.01-.16.001-2.757A12.27 12.27 0 0 0 3.727 16c0 6.778 5.495 12.273 12.273 12.273S28.273 22.778 28.273 16A1.364 1.364 0 1 1 31 16c0 8.284-6.716 15-15 15S1 24.284 1 16c0-4.984 2.453-9.516 6.37-12.272H4.92c-.699 0-1.275-.527-1.354-1.205l-.01-.16c0-.699.527-1.275 1.205-1.354L4.921 1ZM16 6.114c.7 0 1.276.526 1.354 1.204l.01.16v7.956l4.714 4.715c.491.492.53 1.265.113 1.8l-.113.129a1.364 1.364 0 0 1-1.8.113l-.129-.113-5.113-5.114a1.36 1.36 0 0 1-.388-.785L14.636 16V7.477c0-.753.61-1.363 1.364-1.363" style="stroke-width:1.36364"/></svg>

src/components/common/Composer.scss

@@ -264,11 +264,6 @@
       animation-duration: 0ms !important;
     }
 
-    @media (max-width: 600px) {
-      width: 2.875rem;
-      height: 2.875rem;
-    }
-
     @media (hover: hover) {
       &:not(:active):not(:focus):not(:hover) {
         .icon-send,
@@ -460,13 +455,14 @@
 
 .message-input-wrapper {
   --action-button-size: var(--base-height, 3rem);
-  --action-button-compact-fix: -1rem;
+  --action-button-compact-fix: -0.75rem;
 
   display: flex;
 
   .input-scroller {
     --_scroller-right-gap: calc((var(--action-button-size) + var(--action-button-compact-fix) - 0.125rem));
 
+    scrollbar-gutter: stable;
     margin-right: calc(-1 * var(--_scroller-right-gap));
     padding-right: var(--_scroller-right-gap);
   }
@@ -561,21 +557,14 @@
 
       position: absolute;
       top: 0.75rem;
-      right: 0.875rem;
+      right: 0.75rem;
 
       box-sizing: content-box;
       width: 0.5rem;
       height: 0.5rem;
-      border: 0.1875rem solid var(--color-background);
       border-radius: 50%;
 
       background: var(--color-green-darker);
-      box-shadow: -0.375rem -0.25rem 0 -0.1875rem var(--color-background);
-
-      @media (max-width: 600px) {
-        top: 0.5rem;
-        right: 0.5rem;
-      }
     }
   }
 
@@ -613,10 +602,6 @@
       animation: recording-blink-like-macos 1.5s infinite;
     }
   }
-
-  @media (max-width: 600px) {
-    --action-button-compact-fix: -0.6875rem;
-  }
 }
 
 .symbol-menu-trigger {
@@ -683,7 +668,6 @@
   }
 
   @media (max-width: 600px) {
-    min-height: 2.875rem;
     max-height: 16rem;
   }
 }
@@ -841,19 +825,11 @@
 
     line-height: 1.3125;
     white-space: pre-wrap;
-
-    @media (max-width: 600px) {
-      padding: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2) 0;
-    }
   }
 
   .forced-placeholder,
   .placeholder-text {
     top: calc((var(--base-height, 3rem) - var(--composer-text-size, 1rem) * 1.3125) / 2);
-
-    @media (max-width: 600px) {
-      top: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2);
-    }
   }
 
   &:not(:only-child) {
@@ -933,10 +909,6 @@
   &.is-need-premium {
     pointer-events: auto;
   }
-
-  @media (max-width: 600px) {
-    top: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2);
-  }
 }
 
 .composer-tooltip {

src/components/common/Composer.tsx

@@ -2201,7 +2201,7 @@ const Composer: FC<OwnProps & StateProps> = ({
                         onClick={handleAllScheduledClick}
                         ariaLabel={lang('AriaComposerOpenScheduled')}
                       >
-                        <Icon name="schedule" />
+                        <Icon name="scheduled" />
                       </Button>
                     )}
                     {shouldShowGiftButton && (

src/styles/icons.scss

@@ -243,89 +243,90 @@ $icons-map: (
   "save-story": "\f1ce",
   "saved-messages": "\f1cf",
   "schedule": "\f1d0",
-  "sd-photo": "\f1d1",
+  "scheduled": "\f1d1",
-  "search": "\f1d2",
+  "sd-photo": "\f1d2",
-  "select": "\f1d3",
+  "search": "\f1d3",
-  "sell-outline": "\f1d4",
+  "select": "\f1d4",
-  "sell": "\f1d5",
+  "sell-outline": "\f1d5",
-  "send-outline": "\f1d6",
+  "sell": "\f1d6",
-  "send": "\f1d7",
+  "send-outline": "\f1d7",
-  "settings-filled": "\f1d8",
+  "send": "\f1d8",
-  "settings": "\f1d9",
+  "settings-filled": "\f1d9",
-  "share-filled": "\f1da",
+  "settings": "\f1da",
-  "share-screen-outlined": "\f1db",
+  "share-filled": "\f1db",
-  "share-screen-stop": "\f1dc",
+  "share-screen-outlined": "\f1dc",
-  "share-screen": "\f1dd",
+  "share-screen-stop": "\f1dd",
-  "show-message": "\f1de",
+  "share-screen": "\f1de",
-  "sidebar": "\f1df",
+  "show-message": "\f1df",
-  "skip-next": "\f1e0",
+  "sidebar": "\f1e0",
-  "skip-previous": "\f1e1",
+  "skip-next": "\f1e1",
-  "smallscreen": "\f1e2",
+  "skip-previous": "\f1e2",
-  "smile": "\f1e3",
+  "smallscreen": "\f1e3",
-  "sort-by-date": "\f1e4",
+  "smile": "\f1e4",
-  "sort-by-number": "\f1e5",
+  "sort-by-date": "\f1e5",
-  "sort-by-price": "\f1e6",
+  "sort-by-number": "\f1e6",
-  "sort": "\f1e7",
+  "sort-by-price": "\f1e7",
-  "speaker-muted-story": "\f1e8",
+  "sort": "\f1e8",
-  "speaker-outline": "\f1e9",
+  "speaker-muted-story": "\f1e9",
-  "speaker-story": "\f1ea",
+  "speaker-outline": "\f1ea",
-  "speaker": "\f1eb",
+  "speaker-story": "\f1eb",
-  "spoiler-disable": "\f1ec",
+  "speaker": "\f1ec",
-  "spoiler": "\f1ed",
+  "spoiler-disable": "\f1ed",
-  "sport": "\f1ee",
+  "spoiler": "\f1ee",
-  "star": "\f1ef",
+  "sport": "\f1ef",
-  "stars-lock": "\f1f0",
+  "star": "\f1f0",
-  "stats": "\f1f1",
+  "stars-lock": "\f1f1",
-  "stealth-future": "\f1f2",
+  "stats": "\f1f2",
-  "stealth-past": "\f1f3",
+  "stealth-future": "\f1f3",
-  "stickers": "\f1f4",
+  "stealth-past": "\f1f4",
-  "stop-raising-hand": "\f1f5",
+  "stickers": "\f1f5",
-  "stop": "\f1f6",
+  "stop-raising-hand": "\f1f6",
-  "story-caption": "\f1f7",
+  "stop": "\f1f7",
-  "story-expired": "\f1f8",
+  "story-caption": "\f1f8",
-  "story-priority": "\f1f9",
+  "story-expired": "\f1f9",
-  "story-reply": "\f1fa",
+  "story-priority": "\f1fa",
-  "strikethrough": "\f1fb",
+  "story-reply": "\f1fb",
-  "tag-add": "\f1fc",
+  "strikethrough": "\f1fc",
-  "tag-crossed": "\f1fd",
+  "tag-add": "\f1fd",
-  "tag-filter": "\f1fe",
+  "tag-crossed": "\f1fe",
-  "tag-name": "\f1ff",
+  "tag-filter": "\f1ff",
-  "tag": "\f200",
+  "tag-name": "\f200",
-  "timer": "\f201",
+  "tag": "\f201",
-  "toncoin": "\f202",
+  "timer": "\f202",
-  "trade": "\f203",
+  "toncoin": "\f203",
-  "transcribe": "\f204",
+  "trade": "\f204",
-  "truck": "\f205",
+  "transcribe": "\f205",
-  "unarchive": "\f206",
+  "truck": "\f206",
-  "underlined": "\f207",
+  "unarchive": "\f207",
-  "understood": "\f208",
+  "underlined": "\f208",
-  "unique-profile": "\f209",
+  "understood": "\f209",
-  "unlist-outline": "\f20a",
+  "unique-profile": "\f20a",
-  "unlist": "\f20b",
+  "unlist-outline": "\f20b",
-  "unlock-badge": "\f20c",
+  "unlist": "\f20c",
-  "unlock": "\f20d",
+  "unlock-badge": "\f20d",
-  "unmute": "\f20e",
+  "unlock": "\f20e",
-  "unpin": "\f20f",
+  "unmute": "\f20f",
-  "unread": "\f210",
+  "unpin": "\f210",
-  "up": "\f211",
+  "unread": "\f211",
-  "user-filled": "\f212",
+  "up": "\f212",
-  "user-online": "\f213",
+  "user-filled": "\f213",
-  "user-stars": "\f214",
+  "user-online": "\f214",
-  "user": "\f215",
+  "user-stars": "\f215",
-  "video-outlined": "\f216",
+  "user": "\f216",
-  "video-stop": "\f217",
+  "video-outlined": "\f217",
-  "video": "\f218",
+  "video-stop": "\f218",
-  "view-once": "\f219",
+  "video": "\f219",
-  "voice-chat": "\f21a",
+  "view-once": "\f21a",
-  "volume-1": "\f21b",
+  "voice-chat": "\f21b",
-  "volume-2": "\f21c",
+  "volume-1": "\f21c",
-  "volume-3": "\f21d",
+  "volume-2": "\f21d",
-  "warning": "\f21e",
+  "volume-3": "\f21e",
-  "web": "\f21f",
+  "warning": "\f21f",
-  "webapp": "\f220",
+  "web": "\f220",
-  "word-wrap": "\f221",
+  "webapp": "\f221",
-  "zoom-in": "\f222",
+  "word-wrap": "\f222",
-  "zoom-out": "\f223",
+  "zoom-in": "\f223",
+  "zoom-out": "\f224",
 );
 
 .icon-active-sessions::before {
@@ -952,6 +953,9 @@ $icons-map: (
 .icon-schedule::before {
   content: map.get($icons-map, "schedule");
 }
+.icon-scheduled::before {
+  content: map.get($icons-map, "scheduled");
+}
 .icon-sd-photo::before {
   content: map.get($icons-map, "sd-photo");
 }

src/types/icons/font.ts

@@ -207,6 +207,7 @@ export type FontIconName =
   | 'save-story'
   | 'saved-messages'
   | 'schedule'
+  | 'scheduled'
   | 'sd-photo'
   | 'search'
   | 'select'