From b28e80a1fe12935f7314791f96e447dc26a7fd6d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 13 Jan 2023 10:31:48 -0600
Subject: [PATCH] ComposeForm: fix publish icon Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1319

---
 CHANGELOG.md                                  |  1 +
 .../compose/components/compose-form.tsx       | 22 ++++++-------------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b2a108d5..5a483424b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Modals: fix "View context" button in media modal.
 - Posts: let unauthenticated users to translate posts if allowed by backend.
 - Chats: fix jumpy scrollbar.
+- Composer: fix alignment of icon in submit button.
 
 ## [3.0.0] - 2022-12-25
 
diff --git a/app/soapbox/features/compose/components/compose-form.tsx b/app/soapbox/features/compose/components/compose-form.tsx
index a7af9e77d..c80dc9a07 100644
--- a/app/soapbox/features/compose/components/compose-form.tsx
+++ b/app/soapbox/features/compose/components/compose-form.tsx
@@ -15,7 +15,6 @@ import {
 } from 'soapbox/actions/compose';
 import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
 import AutosuggestTextarea from 'soapbox/components/autosuggest-textarea';
-import Icon from 'soapbox/components/icon';
 import { Button, HStack, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useCompose, useFeatures, useInstance, usePrevious } from 'soapbox/hooks';
 import { isMobile } from 'soapbox/is-mobile';
@@ -241,25 +240,18 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   const disabledButton = disabled || isUploading || isChangingUpload || length(countedText) > maxTootChars || (countedText.length !== 0 && countedText.trim().length === 0 && !anyMedia);
   const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth);
 
-  let publishText: string | JSX.Element = '';
+  let publishText: string = '';
+  let publishIcon: string | undefined;
   let textareaPlaceholder: MessageDescriptor;
 
   if (isEditing) {
     publishText = intl.formatMessage(messages.saveChanges);
   } else if (privacy === 'direct') {
-    publishText = (
-      <>
-        <Icon src={require('@tabler/icons/mail.svg')} />
-        {intl.formatMessage(messages.message)}
-      </>
-    );
+    publishText = intl.formatMessage(messages.message);
+    publishIcon = require('@tabler/icons/mail.svg');
   } else if (privacy === 'private') {
-    publishText = (
-      <>
-        <Icon src={require('@tabler/icons/lock.svg')} />
-        {intl.formatMessage(messages.publish)}
-      </>
-    );
+    publishText = intl.formatMessage(messages.publish);
+    publishIcon = require('@tabler/icons/lock.svg');
   } else {
     publishText = privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
   }
@@ -355,7 +347,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
             </HStack>
           )}
 
-          <Button type='submit' theme='primary' text={publishText} disabled={disabledButton} />
+          <Button type='submit' theme='primary' text={publishText} icon={publishIcon} disabled={disabledButton} />
         </HStack>
         {/* <HStack alignItems='center' space={4}>
         </HStack> */}