From 0bd43a3f2c9e290a54cc3285b27e53e281a2c8bc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 5 May 2022 17:51:07 -0500
Subject: [PATCH] SoapboxConfig: improve style of file uploader

---
 app/soapbox/features/soapbox_config/index.tsx | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index f9b04f78e..fc1b79793 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -9,10 +9,7 @@ import { Column, Form, FormActions, FormGroup, Input, Textarea, Button } from 's
 import HStack from 'soapbox/components/ui/hstack/hstack';
 import Stack from 'soapbox/components/ui/stack/stack';
 import Streamfield from 'soapbox/components/ui/streamfield/streamfield';
-import {
-  FileChooserLogo,
-  Checkbox,
-} from 'soapbox/features/forms';
+import { Checkbox } from 'soapbox/features/forms';
 import ThemeToggle from 'soapbox/features/ui/components/theme-toggle';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
@@ -210,12 +207,17 @@ const SoapboxConfig: React.FC = () => {
             </Stack>
 
             <Stack className='w-1/2'>
-              <FileChooserLogo
-                label={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
-                name='logo'
-                hint={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
-                onChange={handleFileChange(['logo'])}
-              />
+              <FormGroup
+                labelText={<FormattedMessage id='soapbox_config.fields.logo_label' defaultMessage='Logo' />}
+                hintText={<FormattedMessage id='soapbox_config.hints.logo' defaultMessage='SVG. At most 2 MB. Will be displayed to 50px height, maintaining aspect ratio' />}
+              >
+                <input
+                  type='file'
+                  onChange={handleFileChange(['logo'])}
+                  className='text-sm'
+                  accept='image/svg,image/png'
+                />
+              </FormGroup>
             </Stack>
           </HStack>
 
@@ -330,6 +332,7 @@ const SoapboxConfig: React.FC = () => {
             </FormGroup>
           </Accordion>
         </fieldset>
+
         <FormActions>
           <Button type='submit'>
             <FormattedMessage id='soapbox_config.save' defaultMessage='Save' />