From 7b9db5299ae3b17b7d7d56a11dc4aec9ea448d93 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 16 May 2022 11:21:17 -0400
Subject: [PATCH 1/5] Lint

---
 app/soapbox/components/autosuggest_textarea.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js
index ac3a35e2d..74f6dae66 100644
--- a/app/soapbox/components/autosuggest_textarea.js
+++ b/app/soapbox/components/autosuggest_textarea.js
@@ -14,7 +14,7 @@ import AutosuggestEmoji from './autosuggest_emoji';
 const textAtCursorMatchesToken = (str, caretPosition) => {
   let word;
 
-  const left  = str.slice(0, caretPosition).search(/\S+$/);
+  const left = str.slice(0, caretPosition).search(/\S+$/);
   const right = str.slice(caretPosition).search(/\s/);
 
   if (right < 0) {
@@ -69,7 +69,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
   };
 
   onChange = (e) => {
-    const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart);
+    const [tokenStart, token] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart);
 
     if (token !== null && this.state.lastToken !== token) {
       this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
@@ -123,7 +123,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
         break;
       case 'Enter':
       case 'Tab':
-      // Select suggestion
+        // Select suggestion
         if (this.state.lastToken !== null && suggestions.size > 0 && !suggestionsHidden) {
           e.preventDefault();
           e.stopPropagation();
@@ -200,13 +200,13 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
 
     if (typeof suggestion === 'object') {
       inner = <AutosuggestEmoji emoji={suggestion} />;
-      key   = suggestion.id;
+      key = suggestion.id;
     } else if (suggestion[0] === '#') {
       inner = suggestion;
-      key   = suggestion;
+      key = suggestion;
     } else {
       inner = <AutosuggestAccount id={suggestion} />;
-      key   = suggestion;
+      key = suggestion;
     }
 
     return (

From a2c72ab457e788075184aac9f8c497dc46d0b12a Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 16 May 2022 11:21:35 -0400
Subject: [PATCH 2/5] Center compose textarea

---
 app/soapbox/components/autosuggest_textarea.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js
index 74f6dae66..9a7ff45dc 100644
--- a/app/soapbox/components/autosuggest_textarea.js
+++ b/app/soapbox/components/autosuggest_textarea.js
@@ -257,7 +257,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
 
             <Textarea
               ref={this.setTextarea}
-              className={classNames('transition-[min-height] motion-reduce:transition-none dark:bg-slate-800 px-0 border-0 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
+              className={classNames('transition-[min-height] motion-reduce:transition-none dark:bg-slate-800 px-0 mt-1 border-0 text-gray-800 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
                 'min-h-[40px]': condensed,
                 'min-h-[100px]': !condensed,
               })}

From 0583fbe0f95ffad37bce846ac206d1e4fd7611b6 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 16 May 2022 11:21:40 -0400
Subject: [PATCH 3/5] Remove unneeded classes

---
 app/soapbox/pages/home_page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/pages/home_page.tsx b/app/soapbox/pages/home_page.tsx
index 643de6419..c1e0b433e 100644
--- a/app/soapbox/pages/home_page.tsx
+++ b/app/soapbox/pages/home_page.tsx
@@ -36,7 +36,7 @@ const HomePage: React.FC = ({ children }) => {
 
   return (
     <>
-      <Layout.Main className='pt-4 sm:pt-0 divide-y divide-gray-200 dark:divide-slate-700 divide-solid space-y-4 divide-none'>
+      <Layout.Main className='pt-4 sm:pt-0 dark:divide-slate-700 space-y-4'>
         {me && (
           <Card variant='rounded' ref={composeBlock}>
             <CardBody>

From 857c63f2f57850d73f27b7cc85cd33c3797e4b1d Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 16 May 2022 11:40:32 -0400
Subject: [PATCH 4/5] Add FileInput component

---
 .../components/ui/file-input/file-input.tsx      | 16 ++++++++++++++++
 app/soapbox/components/ui/index.ts               |  1 +
 2 files changed, 17 insertions(+)
 create mode 100644 app/soapbox/components/ui/file-input/file-input.tsx

diff --git a/app/soapbox/components/ui/file-input/file-input.tsx b/app/soapbox/components/ui/file-input/file-input.tsx
new file mode 100644
index 000000000..48209ee7f
--- /dev/null
+++ b/app/soapbox/components/ui/file-input/file-input.tsx
@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+
+interface IFileInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'required' | 'disabled' | 'name'> { }
+
+const FileInput = forwardRef<HTMLInputElement, IFileInput>((props, ref) => {
+  return (
+    <input
+      {...props}
+      ref={ref}
+      type='file'
+      className='block w-full text-sm text-gray-800 dark:text-slate-200 file:cursor-pointer file:mr-2 file:py-1.5 file:px-3 file:rounded-full file:text-xs file:leading-4 file:font-medium file:border-gray-200 file:border file:border-solid file:bg-white file:text-gray-700 hover:file:bg-gray-100 dark:file:border-slate-700 dark:file:bg-slate-800 dark:file:text-slate-200'
+    />
+  );
+});
+
+export default FileInput;
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index 43ff70dd1..24324ee02 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -6,6 +6,7 @@ export { default as Column } from './column/column';
 export { default as Counter } from './counter/counter';
 export { default as Emoji } from './emoji/emoji';
 export { default as EmojiSelector } from './emoji-selector/emoji-selector';
+export { default as FileInput } from './file-input/file-input';
 export { default as Form } from './form/form';
 export { default as FormActions } from './form-actions/form-actions';
 export { default as FormGroup } from './form-group/form-group';

From cdf8fad847ba92866fb28a92abcae5c1e18403f8 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Mon, 16 May 2022 11:40:44 -0400
Subject: [PATCH 5/5] Use new FileInput component in profile settings

---
 app/soapbox/features/edit_profile/index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index 5853d2796..d7f60b572 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -9,7 +9,7 @@ import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soap
 import { normalizeAccount } from 'soapbox/normalizers';
 import resizeImage from 'soapbox/utils/resize_image';
 
-import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack, Toggle } from '../../components/ui';
+import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack, Toggle, FileInput } from '../../components/ui';
 import Streamfield, { StreamfieldComponent } from '../../components/ui/streamfield/streamfield';
 
 import ProfilePreview from './components/profile-preview';
@@ -179,8 +179,8 @@ const EditProfile: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const account   = useOwnAccount();
-  const features  = useFeatures();
+  const account = useOwnAccount();
+  const features = useFeatures();
   const maxFields = useAppSelector(state => state.instance.pleroma.getIn(['metadata', 'fields_limits', 'max_fields'], 4) as number);
 
   const [isLoading, setLoading] = useState(false);
@@ -378,14 +378,14 @@ const EditProfile: React.FC = () => {
               labelText={<FormattedMessage id='edit_profile.fields.header_label' defaultMessage='Choose Background Picture' />}
               hintText={<FormattedMessage id='edit_profile.hints.header' defaultMessage='PNG, GIF or JPG. Will be downscaled to {size}' values={{ size: '1920x1080px' }} />}
             >
-              <input type='file' onChange={handleFileChange('header', 1920 * 1080)} className='text-sm' />
+              <FileInput onChange={handleFileChange('header', 1920 * 1080)} />
             </FormGroup>
 
             <FormGroup
               labelText={<FormattedMessage id='edit_profile.fields.avatar_label' defaultMessage='Choose Profile Picture' />}
               hintText={<FormattedMessage id='edit_profile.hints.avatar' defaultMessage='PNG, GIF or JPG. Will be downscaled to {size}' values={{ size: '400x400px' }} />}
             >
-              <input type='file' onChange={handleFileChange('avatar', 400 * 400)} className='text-sm' />
+              <FileInput onChange={handleFileChange('avatar', 400 * 400)} />
             </FormGroup>
           </div>
         </div>