From 4c5e8eb525abb4e80ad48cf4f47f638aee5c89bf Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 6 Dec 2022 16:33:53 -0600
Subject: [PATCH] Chats: improve upload button styles

---
 app/soapbox/features/chats/components/chat-composer.tsx   | 7 ++++++-
 app/soapbox/features/compose/components/upload-button.tsx | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx
index f54aeab93..3e32267b3 100644
--- a/app/soapbox/features/chats/components/chat-composer.tsx
+++ b/app/soapbox/features/chats/components/chat-composer.tsx
@@ -152,7 +152,12 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
     <div className='mt-auto px-4 shadow-3xl'>
       <HStack alignItems='stretch' justifyContent='between' space={4}>
         <Stack justifyContent='end' alignItems='center' className='w-10 mb-1.5'>
-          <UploadButton onSelectFile={onSelectFile} resetFileKey={resetFileKey} />
+          <UploadButton
+            onSelectFile={onSelectFile}
+            resetFileKey={resetFileKey}
+            iconClassName='w-5 h-5'
+            className='text-primary-500'
+          />
         </Stack>
 
         <Stack grow>
diff --git a/app/soapbox/features/compose/components/upload-button.tsx b/app/soapbox/features/compose/components/upload-button.tsx
index 8623ee2ae..7d6f31c65 100644
--- a/app/soapbox/features/compose/components/upload-button.tsx
+++ b/app/soapbox/features/compose/components/upload-button.tsx
@@ -20,6 +20,8 @@ export interface IUploadButton {
   onSelectFile: (files: FileList, intl: IntlShape) => void,
   style?: React.CSSProperties,
   resetFileKey: number | null,
+  className?: string,
+  iconClassName?: string,
 }
 
 const UploadButton: React.FC<IUploadButton> = ({
@@ -27,6 +29,8 @@ const UploadButton: React.FC<IUploadButton> = ({
   unavailable = false,
   onSelectFile,
   resetFileKey,
+  className = 'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500',
+  iconClassName,
 }) => {
   const intl = useIntl();
   const { configuration } = useInstance();
@@ -56,7 +60,8 @@ const UploadButton: React.FC<IUploadButton> = ({
     <div>
       <IconButton
         src={src}
-        className='text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
+        className={className}
+        iconClassName={iconClassName}
         title={intl.formatMessage(messages.upload)}
         disabled={disabled}
         onClick={handleClick}