Fix minor UI issues

_locales/en/messages.json

@@ -1163,7 +1163,7 @@
     "description": "Label for the time a message was received"
   },
   "sendMessage": {
-    "message": "Send a message",
+    "message": "Message",
     "description": "Placeholder text in the message entry field"
   },
   "groupMembers": {

images/icons/v2/chevron-down-20.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 15.5 2 7.521l1.059-1.062L10 13.382l6.941-6.923L18 7.521 10 15.5Z" fill="#3B3B3B"/></svg>

images/icons/v2/phone-outline-24.svg

@@ -1 +1 @@
-<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.21 22a8.084 8.084 0 0 1-2.66-.51 20.791 20.791 0 0 1-7.3-4.73 21 21 0 0 1-4.74-7.3c-.78-2.22-.67-4 .35-5.45a5 5 0 0 1 2-1.67 2.72 2.72 0 0 1 3.51.81l2.11 3a2.69 2.69 0 0 1-.35 3.49c-.37.34-.62.58-.93.85-.09.08-.15.22-.08.31A20.015 20.015 0 0 0 11 13c.69.69 1.428 1.328 2.21 1.91a.24.24 0 0 0 .3-.08c.28-.32.51-.57.85-.93a2.68 2.68 0 0 1 3.49-.35l3 2.11a2.679 2.679 0 0 1 .85 3.43 5.22 5.22 0 0 1-1.71 2 4.69 4.69 0 0 1-2.78.91ZM4.09 4.87c-.46.64-1 1.77-.16 4.08a19.28 19.28 0 0 0 4.38 6.74A19.493 19.493 0 0 0 15 20.07c2.31.81 3.44.3 4.09-.16a3.55 3.55 0 0 0 1.2-1.42A1.21 1.21 0 0 0 20 16.9l-3-2.12a1.18 1.18 0 0 0-1.53.15c-.33.36-.56.6-.82.9a1.72 1.72 0 0 1-2.33.29 21.914 21.914 0 0 1-2.37-2.05 22.204 22.204 0 0 1-2-2.37 1.71 1.71 0 0 1 .3-2.32l.89-.82A1.19 1.19 0 0 0 9.21 7L7.1 4a1.19 1.19 0 0 0-1.51-.38 3.72 3.72 0 0 0-1.5 1.25Z" fill="#000"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M17.21 22a8.08 8.08 0 0 1-2.66-.51 20.79 20.79 0 0 1-7.3-4.73 21 21 0 0 1-4.74-7.3c-.78-2.22-.67-4 .35-5.45a5 5 0 0 1 2-1.67 2.72 2.72 0 0 1 3.51.81l2.11 3a2.69 2.69 0 0 1-.35 3.49c-.37.34-.62.58-.93.85-.09.08-.15.22-.08.31A20 20 0 0 0 11 13a20 20 0 0 0 2.21 1.91.24.24 0 0 0 .3-.08c.28-.32.51-.57.85-.93a2.68 2.68 0 0 1 3.49-.35l3 2.11a2.68 2.68 0 0 1 .85 3.43 5.22 5.22 0 0 1-1.71 2 4.69 4.69 0 0 1-2.78.91ZM4.09 4.87c-.46.64-1 1.77-.16 4.08a19.28 19.28 0 0 0 4.38 6.74A19.49 19.49 0 0 0 15 20.07c2.31.81 3.44.3 4.09-.16a3.55 3.55 0 0 0 1.2-1.42A1.21 1.21 0 0 0 20 16.9l-3-2.12a1.18 1.18 0 0 0-1.53.15c-.33.36-.56.6-.82.9a1.72 1.72 0 0 1-2.33.29 21.9 21.9 0 0 1-2.37-2.05 22.2 22.2 0 0 1-2-2.37 1.71 1.71 0 0 1 .3-2.32l.89-.82A1.19 1.19 0 0 0 9.21 7L7.1 4a1.19 1.19 0 0 0-1.51-.38 3.72 3.72 0 0 0-1.5 1.25Z"/></svg>

stylesheets/_modules.scss

@@ -3950,7 +3950,7 @@ button.module-image__border-overlay:focus {
         &__button {
           &::before {
             @include color-svg(
-              '../images/icons/v2/arrow-down-24.svg',
+              '../images/icons/v2/chevron-down-24.svg',
               $color-white
             );
 
@@ -6181,15 +6181,14 @@ button.module-image__border-overlay:focus {
   background: none;
   width: 32px;
   height: 32px;
-  border-radius: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
-  opacity: 0.5;
 
-  &:focus,
+  @include keyboard-mode {
-  &:hover {
+    &:focus {
-    opacity: 1;
+      outline: 1px solid $color-ultramarine;
+    }
   }
 
   outline: none;
@@ -6209,7 +6208,7 @@ button.module-image__border-overlay:focus {
     }
     @include dark-theme {
       @include color-svg(
-        '../images/icons/v2/sticker-solid-24.svg',
+        '../images/icons/v2/sticker-outline-24.svg',
         $color-gray-15
       );
     }
@@ -6686,15 +6685,14 @@ button.module-image__border-overlay:focus {
   background: none;
   width: 32px;
   height: 32px;
-  border-radius: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
-  opacity: 0.5;
 
-  &:focus,
+  @include keyboard-mode {
-  &:hover {
+    &:focus {
-    opacity: 1;
+      outline: 1px solid $color-ultramarine;
+    }
   }
 
   outline: none;
@@ -6714,7 +6712,7 @@ button.module-image__border-overlay:focus {
     }
     @include dark-theme {
       @include color-svg(
-        '../images/icons/v2/emoji-smiley-solid-24.svg',
+        '../images/icons/v2/emoji-smiley-outline-24.svg',
         $color-gray-15
       );
     }
@@ -6796,6 +6794,7 @@ button.module-image__border-overlay:focus {
       padding: 0;
       text-align: start;
       white-space: break-spaces;
+      line-height: inherit;
 
       &--loaded {
         caret-color: auto;
@@ -6830,7 +6829,6 @@ button.module-image__border-overlay:focus {
   }
 
   &__input {
-    border: none;
     border-radius: 18px;
     overflow: hidden;
     word-break: break-word;
@@ -6838,28 +6836,34 @@ button.module-image__border-overlay:focus {
     // Override Quill styles
     .ql-container {
       @include font-body-1;
+      line-height: 21px;
+      font-size: 15px;
     }
 
     .ql-blank::before {
-      color: $color-gray-45;
+      @include light-theme() {
+        color: $color-gray-45;
+      }
+
+      @include dark-theme() {
+        color: $color-gray-25;
+      }
     }
 
     @include light-theme() {
       // Same as background color
-      border: 1px solid $color-white;
       background-color: $color-gray-05;
       color: $color-gray-90;
     }
 
     @include dark-theme() {
       // Same as background color
-      border: 1px solid $color-gray-95;
       background-color: $color-gray-75;
       color: $color-gray-05;
     }
 
     &__scroller {
-      padding: 7px 12px;
+      padding: 5px 11px 6px 11px;
       min-height: 32px;
       max-height: 80px;
       overflow: auto;
@@ -6885,11 +6889,11 @@ button.module-image__border-overlay:focus {
 
     &:focus-within {
       @include light-theme() {
-        border: 1px solid $color-ultramarine;
+        outline: 1px solid $color-ultramarine;
       }
 
       @include dark-theme() {
-        border: 1px solid $color-ultramarine;
+        outline: 1px solid $color-ultramarine;
       }
     }
   }
@@ -7000,57 +7004,6 @@ button.module-image__border-overlay:focus {
   }
 }
 
-// Module: Scroll Down Button
-
-.module-scroll-down {
-  z-index: $z-index-scroll-down-button;
-  position: absolute;
-  right: 20px;
-  bottom: 10px;
-}
-
-.module-scroll-down__button {
-  height: 44px;
-  width: 44px;
-  border-radius: 22px;
-  text-align: center;
-  border: none;
-  outline: none;
-
-  @include light-theme {
-    background-color: $color-gray-25;
-    &:hover {
-      background-color: $color-gray-45;
-    }
-
-    box-shadow: 0px 3px 5px 0px $color-black-alpha-20;
-  }
-  @include dark-theme {
-    background-color: $color-gray-45;
-    &:hover {
-      background-color: $color-gray-25;
-    }
-
-    box-shadow: 0px 3px 5px 0px $color-white-alpha-20;
-  }
-}
-
-.module-scroll-down__button--new-messages {
-  background-color: $color-ultramarine;
-
-  &:hover {
-    background-color: $color-ultramarine-dark;
-  }
-}
-
-.module-scroll-down__icon {
-  @include color-svg('../images/icons/v2/arrow-down-24.svg', $color-white);
-  height: 36px;
-  width: 36px;
-  margin-left: -3px;
-  margin-top: -1px;
-}
-
 // Module: Avatar Popup
 
 .module-avatar-popup {

stylesheets/_variables.scss

@@ -43,6 +43,7 @@ $color-black-alpha-08: rgba($color-black, 0.08);
 $color-black-alpha-12: rgba($color-black, 0.12);
 $color-black-alpha-16: rgba($color-black, 0.16);
 $color-black-alpha-20: rgba($color-black, 0.2);
+$color-black-alpha-24: rgba($color-black, 0.24);
 $color-black-alpha-30: rgba($color-black, 0.3);
 $color-black-alpha-40: rgba($color-black, 0.4);
 $color-black-alpha-50: rgba($color-black, 0.5);

stylesheets/components/AudioCapture.scss

@@ -8,21 +8,23 @@
   justify-content: center;
   align-items: center;
   background: none;
-  padding: 0 5px;
 
   &__microphone {
     height: 32px;
     width: 32px;
     text-align: center;
-    opacity: 0.5;
     background: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     padding: 0;
     border: none;
 
-    &:focus,
+    @include keyboard-mode {
-    &:hover {
+      &:focus {
-      opacity: 1;
+        outline: 1px solid $color-ultramarine;
+      }
     }
 
     outline: none;
@@ -41,7 +43,7 @@
       }
       @include dark-theme {
         @include color-svg(
-          '../images/icons/v2/mic-solid-24.svg',
+          '../images/icons/v2/mic-outline-24.svg',
           $color-gray-15
         );
       }

stylesheets/components/CompositionArea.scss

@@ -16,6 +16,8 @@
   &__row {
     display: flex;
     flex-direction: row;
+    align-items: center;
+
     &--center {
       justify-content: center;
     }
@@ -31,28 +33,22 @@
   }
 
   &__button-cell {
-    margin-top: 2px;
+    margin: 0 6px;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 40px;
     height: 100%;
     flex-shrink: 0;
-    &--mic-active {
+
-      width: 150px;
+    &:first-child {
+      margin-left: 12px;
     }
-    &--large-right {
+
-      margin-left: auto;
+    &:last-child {
-      margin-right: 4px;
-    }
-    &--large-right-mic-active {
-      margin-left: auto;
       margin-right: 12px;
     }
   }
   &__send-button {
-    width: 32px;
-    height: 32px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -69,6 +65,11 @@
   }
   &__input {
     flex-grow: 1;
+    margin: 0 6px;
+
+    &--large {
+      margin: 0;
+    }
   }
   $comp-area: &;
   &__toggle-large {
@@ -76,7 +77,7 @@
     height: 24px;
     position: absolute;
     left: calc(50% - 24px);
-    top: -18px;
+    top: -19px;
     border-radius: 12px 12px 0 0;
     pointer-events: none;
 
@@ -188,13 +189,16 @@
     width: 32px;
     height: 32px;
     padding: 0;
-    opacity: 0.5;
     border: none;
     background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-    &:focus,
+    @include keyboard-mode {
-    &:hover {
+      &:focus {
-      opacity: 1;
+        outline: 1px solid $color-ultramarine;
+      }
     }
 
     outline: none;

stylesheets/components/ConversationHeader.scss

@@ -185,7 +185,8 @@
 
     -webkit-app-region: no-drag;
     @include button-reset;
-    align-items: stretch;
+    align-items: center;
+    justify-content: center;
     border-radius: 4px;
     border: 2px solid transparent;
     display: flex;
@@ -240,56 +241,49 @@
       }
     }
 
-    @mixin normal-button($light-icon, $dark-icon) {
+    @mixin normal-button($icon, $size) {
       &::before {
         content: '';
         display: block;
-        flex-grow: 1;
+        width: $size;
+        height: $size;
+
         @include light-theme {
-          @include color-svg($light-icon, $color-gray-75);
+          @include color-svg($icon, $color-gray-75);
           &:hover,
           &:active,
           &:focus {
-            @include color-svg($light-icon, $color-gray-90);
+            @include color-svg($icon, $color-gray-90);
           }
         }
         @include dark-theme {
-          @include color-svg($dark-icon, $color-gray-15);
+          @include color-svg($icon, $color-gray-15);
           &:hover,
           &:active,
           &:focus {
-            @include color-svg($dark-icon, $color-gray-02);
+            @include color-svg($icon, $color-gray-02);
           }
         }
       }
     }
 
     &--video {
-      @include normal-button(
+      @include normal-button('../images/icons/v2/video-outline-24.svg', 24px);
-        '../images/icons/v2/video-outline-24.svg',
-        '../images/icons/v2/video-solid-24.svg'
-      );
     }
 
     &--audio {
       @include normal-button(
         '../images/icons/v2/phone-right-outline-24.svg',
-        '../images/icons/v2/phone-right-solid-24.svg'
+        24px
       );
     }
 
     &--search {
-      @include normal-button(
+      @include normal-button('../images/icons/v2/search-24.svg', 24px);
-        '../images/icons/v2/search-24.svg',
-        '../images/icons/v2/search-24.svg'
-      );
     }
 
     &--more {
-      @include normal-button(
+      @include normal-button('../images/icons/v2/chevron-down-20.svg', 20px);
-        '../images/icons/v2/chevron-down-24.svg',
-        '../images/icons/v2/chevron-down-24.svg'
-      );
     }
 
     &--join-call {

stylesheets/components/ScrollDownButton.scss

@@ -0,0 +1,68 @@
+// Copyright 2018-2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.ScrollDownButton {
+  z-index: $z-index-scroll-down-button;
+  position: absolute;
+  right: 16px;
+  bottom: 12px;
+
+  &__button {
+    position: relative;
+
+    height: 36px;
+    width: 36px;
+
+    display: flex;
+    border-radius: 18px;
+    border: none;
+    outline: none;
+    align-items: center;
+    justify-content: center;
+
+    box-shadow: 0px 0px 2px $color-black-alpha-20,
+      0px 2px 6px $color-black-alpha-12;
+
+    @include light-theme {
+      background-color: $color-white;
+    }
+    @include dark-theme {
+      background-color: $color-gray-75;
+    }
+
+    &__icon {
+      @include light-theme {
+        @include color-svg(
+          '../images/icons/v2/chevron-down-20.svg',
+          $color-gray-75
+        );
+      }
+
+      @include dark-theme {
+        @include color-svg(
+          '../images/icons/v2/chevron-down-20.svg',
+          $color-gray-15
+        );
+      }
+
+      height: 20px;
+      width: 20px;
+    }
+
+    &__badge {
+      position: absolute;
+      top: -8px;
+      height: 16px;
+      min-width: 16px;
+      border-radius: 8px;
+      padding: 1px 4px;
+      background-color: $color-ultramarine;
+      color: $color-white;
+
+      font-size: 10px;
+      line-height: 14px;
+
+      box-shadow: 0px 1px 4px $color-black-alpha-24;
+    }
+  }
+}

stylesheets/manifest.scss

@@ -96,6 +96,7 @@
 @import './components/ReactionPickerPicker.scss';
 @import './components/SafetyNumberChangeDialog.scss';
 @import './components/SafetyNumberViewer.scss';
+@import './components/ScrollDownButton.scss';
 @import './components/SearchInput.scss';
 @import './components/SearchResultsLoadingFakeHeader.scss';
 @import './components/SearchResultsLoadingFakeRow.scss';

ts/components/CompositionArea.tsx

@@ -380,22 +380,24 @@ export const CompositionArea = ({
   );
 
   const micButtonFragment = shouldShowMicrophone ? (
-    <AudioCapture
+    <div className="CompositionArea__button-cell">
-      cancelRecording={cancelRecording}
+      <AudioCapture
-      completeRecording={completeRecording}
+        cancelRecording={cancelRecording}
-      conversationId={conversationId}
+        completeRecording={completeRecording}
-      draftAttachments={draftAttachments}
+        conversationId={conversationId}
-      errorDialogAudioRecorderType={errorDialogAudioRecorderType}
+        draftAttachments={draftAttachments}
-      errorRecording={errorRecording}
+        errorDialogAudioRecorderType={errorDialogAudioRecorderType}
-      i18n={i18n}
+        errorRecording={errorRecording}
-      recordingState={recordingState}
+        i18n={i18n}
-      onSendAudioRecording={(
+        recordingState={recordingState}
-        voiceNoteAttachment: InMemoryAttachmentDraftType
+        onSendAudioRecording={(
-      ) => {
+          voiceNoteAttachment: InMemoryAttachmentDraftType
-        onSendMessage({ voiceNoteAttachment });
+        ) => {
-      }}
+          onSendMessage({ voiceNoteAttachment });
-      startRecording={startRecording}
+        }}
-    />
+        startRecording={startRecording}
+      />
+    </div>
   ) : null;
 
   const isRecording = recordingState === RecordingState.Recording;
@@ -412,19 +414,17 @@ export const CompositionArea = ({
     );
 
   const sendButtonFragment = (
-    <div
+    <>
-      className={classNames(
+      <div className="CompositionArea__placeholder" />
-        'CompositionArea__button-cell',
+      <div className="CompositionArea__button-cell">
-        large ? 'CompositionArea__button-cell--large-right' : null
+        <button
-      )}
+          type="button"
-    >
+          className="CompositionArea__send-button"
-      <button
+          onClick={handleForceSend}
-        type="button"
+          aria-label={i18n('sendMessageToContact')}
-        className="CompositionArea__send-button"
+        />
-        onClick={handleForceSend}
+      </div>
-        aria-label={i18n('sendMessageToContact')}
+    </>
-      />
-    </div>
   );
 
   const stickerButtonPlacement = large ? 'top-start' : 'top-end';
@@ -664,7 +664,12 @@ export const CompositionArea = ({
         )}
       >
         {!large ? leftHandSideButtonsFragment : null}
-        <div className="CompositionArea__input">
+        <div
+          className={classNames(
+            'CompositionArea__input',
+            large ? 'CompositionArea__input--padded' : null
+          )}
+        >
           <CompositionInput
             clearQuotedMessage={clearQuotedMessage}
             disabled={disabled}

ts/components/conversation/ScrollDownButton.stories.tsx

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
+import type { Meta, Story } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
 
 import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
@@ -14,26 +14,31 @@ const i18n = setupI18n('en', enMessages);
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   i18n,
-  withNewMessages: boolean(
-    'withNewMessages',
-    overrideProps.withNewMessages || false
-  ),
   scrollDown: action('scrollDown'),
   conversationId: 'fake-conversation-id',
+  ...overrideProps,
 });
 
 export default {
   title: 'Components/Conversation/ScrollDownButton',
-};
+  component: ScrollDownButton,
-
+  argTypes: {
-export const NoNewMessages = (): JSX.Element => {
+    unreadCount: {
-  const props = createProps();
+      control: { type: 'radio' },
-
+      options: {
-  return <ScrollDownButton {...props} />;
+        None: undefined,
-};
+        Some: 5,
-
+        Plenty: 85,
-export const NewMessages = (): JSX.Element => {
+        'Please Stop': 1000,
-  const props = createProps({ withNewMessages: true });
+      },
-
+    },
-  return <ScrollDownButton {...props} />;
+  },
+} as Meta;
+
+const Template: Story<Props> = args => <ScrollDownButton {...args} />;
+
+export const Default = Template.bind({});
+Default.args = createProps({});
+Default.story = {
+  name: 'Default',
 };

ts/components/conversation/ScrollDownButton.tsx

@@ -2,12 +2,11 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
-import classNames from 'classnames';
 
 import type { LocalizerType } from '../../types/Util';
 
 export type Props = {
-  withNewMessages: boolean;
+  unreadCount?: number;
   conversationId: string;
 
   scrollDown: (conversationId: string) => void;
@@ -17,26 +16,35 @@ export type Props = {
 
 export const ScrollDownButton = ({
   conversationId,
-  withNewMessages,
+  unreadCount,
   i18n,
   scrollDown,
 }: Props): JSX.Element => {
-  const altText = withNewMessages ? i18n('messagesBelow') : i18n('scrollDown');
+  const altText = unreadCount ? i18n('messagesBelow') : i18n('scrollDown');
+
+  let badgeText: string | undefined;
+  if (unreadCount) {
+    if (unreadCount < 100) {
+      badgeText = unreadCount.toString();
+    } else {
+      badgeText = '99+';
+    }
+  }
 
   return (
-    <div className="module-scroll-down">
+    <div className="ScrollDownButton">
       <button
         type="button"
-        className={classNames(
+        className="ScrollDownButton__button"
-          'module-scroll-down__button',
-          withNewMessages ? 'module-scroll-down__button--new-messages' : null
-        )}
         onClick={() => {
           scrollDown(conversationId);
         }}
         title={altText}
       >
-        <div className="module-scroll-down__icon" />
+        {badgeText ? (
+          <div className="ScrollDownButton__button__badge">{badgeText}</div>
+        ) : null}
+        <div className="ScrollDownButton__button__icon" />
       </button>
     </div>
   );

ts/components/conversation/Timeline.tsx

@@ -1185,7 +1185,7 @@ export class Timeline extends React.Component<
               {shouldShowScrollDownButton ? (
                 <ScrollDownButton
                   conversationId={id}
-                  withNewMessages={areUnreadBelowCurrentPosition}
+                  unreadCount={areUnreadBelowCurrentPosition ? unreadCount : 0}
                   scrollDown={this.onClickScrollDownButton}
                   i18n={i18n}
                 />