Fix minor UI issues

ts/components/CompositionArea.tsx

@@ -380,22 +380,24 @@ export const CompositionArea = ({
   );
 
   const micButtonFragment = shouldShowMicrophone ? (
-    <AudioCapture
-      cancelRecording={cancelRecording}
-      completeRecording={completeRecording}
-      conversationId={conversationId}
-      draftAttachments={draftAttachments}
-      errorDialogAudioRecorderType={errorDialogAudioRecorderType}
-      errorRecording={errorRecording}
-      i18n={i18n}
-      recordingState={recordingState}
-      onSendAudioRecording={(
-        voiceNoteAttachment: InMemoryAttachmentDraftType
-      ) => {
-        onSendMessage({ voiceNoteAttachment });
-      }}
-      startRecording={startRecording}
-    />
+    <div className="CompositionArea__button-cell">
+      <AudioCapture
+        cancelRecording={cancelRecording}
+        completeRecording={completeRecording}
+        conversationId={conversationId}
+        draftAttachments={draftAttachments}
+        errorDialogAudioRecorderType={errorDialogAudioRecorderType}
+        errorRecording={errorRecording}
+        i18n={i18n}
+        recordingState={recordingState}
+        onSendAudioRecording={(
+          voiceNoteAttachment: InMemoryAttachmentDraftType
+        ) => {
+          onSendMessage({ voiceNoteAttachment });
+        }}
+        startRecording={startRecording}
+      />
+    </div>
   ) : null;
 
   const isRecording = recordingState === RecordingState.Recording;
@@ -412,19 +414,17 @@ export const CompositionArea = ({
     );
 
   const sendButtonFragment = (
-    <div
-      className={classNames(
-        'CompositionArea__button-cell',
-        large ? 'CompositionArea__button-cell--large-right' : null
-      )}
-    >
-      <button
-        type="button"
-        className="CompositionArea__send-button"
-        onClick={handleForceSend}
-        aria-label={i18n('sendMessageToContact')}
-      />
-    </div>
+    <>
+      <div className="CompositionArea__placeholder" />
+      <div className="CompositionArea__button-cell">
+        <button
+          type="button"
+          className="CompositionArea__send-button"
+          onClick={handleForceSend}
+          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',
-};
-
-export const NoNewMessages = (): JSX.Element => {
-  const props = createProps();
-
-  return <ScrollDownButton {...props} />;
-};
-
-export const NewMessages = (): JSX.Element => {
-  const props = createProps({ withNewMessages: true });
-
-  return <ScrollDownButton {...props} />;
+  component: ScrollDownButton,
+  argTypes: {
+    unreadCount: {
+      control: { type: 'radio' },
+      options: {
+        None: undefined,
+        Some: 5,
+        Plenty: 85,
+        'Please Stop': 1000,
+      },
+    },
+  },
+} 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(
-          'module-scroll-down__button',
-          withNewMessages ? 'module-scroll-down__button--new-messages' : null
-        )}
+        className="ScrollDownButton__button"
         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}
                 />