SoapboxConfig: use new FileInput

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 (

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
+            <FileInput
-              type='file'
               onChange={handleFileChange(['logo'])}
-              className='text-sm'
               accept='image/svg,image/png'
             />
           </FormGroup>