Story Viewer: Use separate Like button in Composer (#3824)

src/components/common/Composer.scss

@@ -108,6 +108,23 @@
       transition: box-shadow 0.1s;
     }
 
+    &.story-reaction-button {
+      --custom-emoji-size: 1.5rem;
+      --custom-emoji-border-radius: 0.25rem;
+
+      &:hover {
+        background-color: var(--color-background) !important;
+      }
+
+      .icon-heart {
+        transition: color 0.2s ease-out;
+      }
+
+      .story-reaction-heart {
+        color: var(--color-heart) !important;
+      }
+    }
+
     &.send {
       .icon-send {
         animation: grow-icon 0.4s ease-out;
@@ -283,21 +300,22 @@
   flex-grow: 1;
   max-width: calc(100% - 4rem);
   background: var(--color-background);
-  border-radius: var(--border-radius-default-small);
   position: relative;
   z-index: 1;
+  box-shadow: 0 1px 2px var(--color-default-shadow);
+  border-radius: var(--border-radius-messages);
+  border-bottom-right-radius: 0;
 
-  &.full-featured {
+  &.with-story-tweaks {
-    box-shadow: 0 1px 2px var(--color-default-shadow);
+    border-radius: var(--border-radius-default-small);
-    border-radius: var(--border-radius-messages);
     border-bottom-right-radius: 0;
+    box-shadow: none;
   }
 
   .svg-appendix {
     position: absolute;
     bottom: -0.1875rem;
-    /* stylelint-disable-next-line plugin/whole-pixel */
+    right: -0.5rem;
-    right: -0.551rem; // This value is correct. Safari fix
     width: 0.5625rem;
     height: 1.25rem;
     transition: opacity 200ms;
@@ -427,14 +445,6 @@
         right: 0.5rem;
       }
     }
-
-    &.story-reaction-button {
-      --custom-emoji-size: 1.5rem;
-    }
-
-    .story-reaction-heart {
-      color: var(--color-heart);
-    }
   }
 
   > .input-group {

src/components/common/Composer.tsx

@@ -94,6 +94,7 @@ import { buildCustomEmojiHtml } from '../middle/composer/helpers/customEmoji';
 import buildAttachment, { prepareAttachmentsToSend } from '../middle/composer/helpers/buildAttachment';
 import applyIosAutoCapitalizationFix from '../middle/composer/helpers/applyIosAutoCapitalizationFix';
 import renderText from './helpers/renderText';
+import { REM } from './helpers/mediaDimensions';
 
 import useLastCallback from '../../hooks/useLastCallback';
 import useSignal from '../../hooks/useSignal';
@@ -259,6 +260,7 @@ const MESSAGE_MAX_LENGTH = 4096;
 const SENDING_ANIMATION_DURATION = 350;
 const MOUNT_ANIMATION_DURATION = 430;
 
+const REACTION_SIZE = 1.5 * REM;
 const HEART_REACTION: ApiReaction = {
   emoticon: '❤',
 };
@@ -1532,32 +1534,32 @@ const Composer: FC<OwnProps & StateProps> = ({
         onClick={handleBotCommandSelect}
         onClose={closeBotCommandTooltip}
       />
-      <div className={buildClassName('composer-wrapper', isInMessageList && 'full-featured')}>
+      <div className={buildClassName('composer-wrapper', isInStoryViewer && 'with-story-tweaks')}>
+        <svg className="svg-appendix" width="9" height="20">
+          <defs>
+            <filter
+              x="-50%"
+              y="-14.7%"
+              width="200%"
+              height="141.2%"
+              filterUnits="objectBoundingBox"
+              id="composerAppendix"
+            >
+              <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
+              <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+              <feColorMatrix
+                values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0"
+                in="shadowBlurOuter1"
+              />
+            </filter>
+          </defs>
+          <g fill="none" fill-rule="evenodd">
+            <path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#000" filter="url(#composerAppendix)" />
+            <path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#FFF" className="corner" />
+          </g>
+        </svg>
         {isInMessageList && (
           <>
-            <svg className="svg-appendix" width="9" height="20">
-              <defs>
-                <filter
-                  x="-50%"
-                  y="-14.7%"
-                  width="200%"
-                  height="141.2%"
-                  filterUnits="objectBoundingBox"
-                  id="composerAppendix"
-                >
-                  <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1" />
-                  <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
-                  <feColorMatrix
-                    values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0"
-                    in="shadowBlurOuter1"
-                  />
-                </filter>
-              </defs>
-              <g fill="none" fill-rule="evenodd">
-                <path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#000" filter="url(#composerAppendix)" />
-                <path d="M6 17H0V0c.193 2.84.876 5.767 2.05 8.782.904 2.325 2.446 4.485 4.625 6.48A1 1 0 016 17z" fill="#FFF" className="corner" />
-              </g>
-            </svg>
             <InlineBotTooltip
               isOpen={isInlineBotTooltipOpen}
               botId={inlineBotId}
@@ -1684,33 +1686,6 @@ const Composer: FC<OwnProps & StateProps> = ({
             onFocus={markInputHasFocus}
             onBlur={unmarkInputHasFocus}
           />
-          {isInStoryViewer && !activeVoiceRecording && (
-            <Button
-              round
-              className="story-reaction-button"
-              color="translucent"
-              onClick={handleLikeStory}
-              onContextMenu={handleStoryPickerContextMenu}
-              onMouseDown={handleBeforeStoryPickerContextMenu}
-              ariaLabel={lang('AccDescrLike')}
-              ref={storyReactionRef}
-            >
-              {sentStoryReaction && !isSentStoryReactionHeart && (
-                <ReactionStaticEmoji
-                  reaction={sentStoryReaction}
-                  availableReactions={availableReactions}
-                />
-              )}
-              <i
-                className={buildClassName(
-                  'icon',
-                  !sentStoryReaction && 'icon-heart-outline',
-                  isSentStoryReactionHeart && 'icon-heart story-reaction-heart',
-                )}
-                aria-hidden
-              />
-            </Button>
-          )}
           {isInMessageList && (
             <>
               {isInlineBotLoading && Boolean(inlineBotId) && (
@@ -1820,6 +1795,35 @@ const Composer: FC<OwnProps & StateProps> = ({
           <i className="icon icon-delete" />
         </Button>
       )}
+      {isInStoryViewer && !activeVoiceRecording && (
+        <Button
+          round
+          className="story-reaction-button"
+          color="secondary"
+          onClick={handleLikeStory}
+          onContextMenu={handleStoryPickerContextMenu}
+          onMouseDown={handleBeforeStoryPickerContextMenu}
+          ariaLabel={lang('AccDescrLike')}
+          ref={storyReactionRef}
+        >
+          {sentStoryReaction && !isSentStoryReactionHeart ? (
+            <ReactionStaticEmoji
+              reaction={sentStoryReaction}
+              availableReactions={availableReactions}
+              size={REACTION_SIZE}
+            />
+          ) : (
+            <i
+              className={buildClassName(
+                'icon',
+                'icon-heart',
+                isSentStoryReactionHeart && 'story-reaction-heart',
+              )}
+              aria-hidden
+            />
+          )}
+        </Button>
+      )}
       <Button
         ref={mainButtonRef}
         round