Merge branch 'ui-improvements' into 'develop'

Ui improvements

See merge request soapbox-pub/soapbox-fe!1394

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,
               })}

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;

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';

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';
@@ -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>

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>