From 673b4a38b9179530d32e6102c627b812173f6cc8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 16 May 2022 18:33:44 -0500
Subject: [PATCH] SoapboxConfig: use new FileInput

---
 app/soapbox/components/ui/file-input/file-input.tsx | 2 +-
 app/soapbox/features/soapbox_config/index.tsx       | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/ui/file-input/file-input.tsx b/app/soapbox/components/ui/file-input/file-input.tsx
index 48209ee7f..1f37f9279 100644
--- a/app/soapbox/components/ui/file-input/file-input.tsx
+++ b/app/soapbox/components/ui/file-input/file-input.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-interface IFileInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'required' | 'disabled' | 'name'> { }
+interface IFileInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'required' | 'disabled' | 'name' | 'accept'> { }
 
 const FileInput = forwardRef<HTMLInputElement, IFileInput>((props, ref) => {
   return (
diff --git a/app/soapbox/features/soapbox_config/index.tsx b/app/soapbox/features/soapbox_config/index.tsx
index bd9977ea2..24ad615a3 100644
--- a/app/soapbox/features/soapbox_config/index.tsx
+++ b/app/soapbox/features/soapbox_config/index.tsx
@@ -14,6 +14,7 @@ import {
   FormActions,
   FormGroup,
   Input,
+  FileInput,
   Textarea,
   Button,
   Toggle,
@@ -199,10 +200,8 @@ const SoapboxConfig: React.FC = () => {
             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'
+            <FileInput
               onChange={handleFileChange(['logo'])}
-              className='text-sm'
               accept='image/svg,image/png'
             />
           </FormGroup>