feat: interact with user settings/profile (#9)

components/design/FormState/FormState.test.tsx

@@ -1,24 +1,24 @@
 import { render } from '@testing-library/react'
 
-import { FormState } from './'
+import { FormState } from '.'
 
 describe('<FormState />', () => {
-  it('should return nothing if the state is idle', async () => {
+  it('should return nothing if the state is idle', () => {
     const { container } = render(<FormState state='idle' />)
     expect(container.innerHTML.length).toEqual(0)
   })
 
-  it('should return nothing if the message is null', async () => {
+  it('should return nothing if the message is null', () => {
     const { container } = render(<FormState state='error' />)
     expect(container.innerHTML.length).toEqual(0)
   })
 
-  it('should render the <Loader /> if state is loading', async () => {
+  it('should render the <Loader /> if state is loading', () => {
     const { getByTestId } = render(<FormState state='loading' />)
     expect(getByTestId('loader')).toBeInTheDocument()
   })
 
-  it('should render the success message if state is success', async () => {
+  it('should render the success message if state is success', () => {
     const message = 'Success Message'
     const { getByText } = render(
       <FormState state='success' message={message} />
@@ -26,7 +26,7 @@ describe('<FormState />', () => {
     expect(getByText(message)).toBeInTheDocument()
   })
 
-  it('should render the error message if state is error', async () => {
+  it('should render the error message if state is error', () => {
     const message = 'Error Message'
     const { getByText } = render(<FormState state='error' message={message} />)
     expect(getByText(message)).toBeInTheDocument()

components/design/FormState/FormState.tsx

@@ -30,14 +30,14 @@ export const FormState: React.FC<FormStateProps> = (props) => {
     <>
       <div
         className={classNames(
-          'mt-6 relative flex flex-row items-center font-medium text-center max-w-xl',
+          'relative mt-6 flex max-w-xl flex-row items-center text-center font-medium',
           {
             'text-red-800 dark:text-red-400': state === 'error',
             'text-green-800 dark:text-green-400': state === 'success'
           }
         )}
       >
-        <div className='thumbnail bg-cover absolute top-0 inline-block font-headline'></div>
+        <div className='thumbnail absolute top-0 inline-block bg-cover font-headline'></div>
         <span id={id} className={classNames({ 'pl-6': state === 'error' })}>
           <b>{t(`errors:${state}`)}:</b> {message}
         </span>