ChatBox: add encryption lock button

app/soapbox/features/chats/components/chat_box.js

@@ -11,7 +11,7 @@ import {
   markChatRead,
 } from 'soapbox/actions/chats';
 import { uploadMedia } from 'soapbox/actions/media';
-import IconButton from 'soapbox/components/icon_button';
+import { Stack, HStack, IconButton } from 'soapbox/components/ui';
 import UploadProgress from 'soapbox/features/compose/components/upload-progress';
 import UploadButton from 'soapbox/features/compose/components/upload_button';
 import { truncateFilename } from 'soapbox/utils/media';
@@ -169,18 +169,37 @@ class ChatBox extends ImmutablePureComponent {
     );
   }
 
+  renderEncryptionButton = () => {
+    return (
+      <IconButton
+        className='text-gray-400 hover:text-gray-600'
+        iconClassName='h-5 w-5'
+        src={require('@tabler/icons/icons/lock-open.svg')}
+        onClick={() => {}}
+        transparent
+      />
+    );
+  }
+
   renderActionButton = () => {
     const { intl } = this.props;
     const { resetFileKey } = this.state;
 
     return this.canSubmit() ? (
       <IconButton
+        className='text-gray-400 hover:text-gray-600'
+        iconClassName='h-5 w-5'
         src={require('@tabler/icons/icons/send.svg')}
         title={intl.formatMessage(messages.send)}
         onClick={this.sendMessage}
+        transparent
       />
     ) : (
-      <UploadButton onSelectFile={this.handleFiles} resetFileKey={resetFileKey} />
+      <UploadButton
+        iconClassName='h-5 w-5'
+        onSelectFile={this.handleFiles}
+        resetFileKey={resetFileKey}
+      />
     );
   }
 
@@ -195,9 +214,12 @@ class ChatBox extends ImmutablePureComponent {
         {this.renderAttachment()}
         <UploadProgress active={isUploading} progress={uploadProgress * 100} />
         <div className='chat-box__actions simple_form'>
-          <div className='chat-box__send'>
-            {this.renderActionButton()}
-          </div>
+          <Stack justifyContent='center' className='absolute right-2.5 inset-y-0'>
+            <HStack>
+              {this.renderEncryptionButton()}
+              {this.renderActionButton()}
+            </HStack>
+          </Stack>
           <textarea
             rows={1}
             placeholder={intl.formatMessage(messages.placeholder)}

app/soapbox/features/compose/components/upload_button.tsx

@@ -20,6 +20,8 @@ interface IUploadButton {
   onSelectFile: (files: FileList) => void,
   style: React.CSSProperties,
   resetFileKey: number,
+  /** Class name for the <svg> icon. */
+  iconClassName?: string,
 }
 
 const UploadButton: React.FC<IUploadButton> = ({
@@ -27,6 +29,7 @@ const UploadButton: React.FC<IUploadButton> = ({
   unavailable,
   onSelectFile,
   resetFileKey,
+  iconClassName,
 }) => {
   const intl = useIntl();
 
@@ -56,6 +59,7 @@ const UploadButton: React.FC<IUploadButton> = ({
       <IconButton
         src={src}
         className='text-gray-400 hover:text-gray-600'
+        iconClassName={iconClassName}
         title={intl.formatMessage(messages.upload)}
         disabled={disabled}
         onClick={handleClick}

app/styles/chats.scss

@@ -286,20 +286,6 @@
       overflow: hidden;
     }
   }
-
-  &__send {
-    .icon-button,
-    button {
-      @apply absolute right-2.5 w-auto h-auto border-0 p-0 m-0 text-black dark:text-white;
-      top: 50%;
-      transform: translateY(-50%);
-
-      .svg-icon,
-      svg {
-        @apply w-[18px] h-[18px];
-      }
-    }
-  }
 }
 
 @media (max-width: 630px) {