Correctly center the spinner in buttons

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -5,12 +5,12 @@ import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import { ActionCreator } from 'easy-peasy';
 import { StaticContext } from 'react-router';
-import Spinner from '@/components/elements/Spinner';
 import { useFormikContext, withFormik } from 'formik';
-import { object, string } from 'yup';
 import useFlash from '@/plugins/useFlash';
 import { FlashStore } from '@/state/flashes';
 import Field from '@/components/elements/Field';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface Values {
     code: string;
@@ -29,13 +29,10 @@ const LoginCheckpointContainer = () => {
     const [ isMissingDevice, setIsMissingDevice ] = useState(false);
 
     return (
-        <LoginFormContainer
+        <LoginFormContainer title={'Device Checkpoint'} css={tw`w-full flex`}>
-            title={'Device Checkpoint'}
+            <div css={tw`mt-6`}>
-            className={'w-full flex'}
-        >
-            <div className={'mt-6'}>
                 <Field
-                    light={true}
+                    light
                     name={isMissingDevice ? 'recoveryCode' : 'code'}
                     title={isMissingDevice ? 'Recovery Code' : 'Authentication Code'}
                     description={
@@ -44,38 +41,35 @@ const LoginCheckpointContainer = () => {
                             : 'Enter the two-factor token generated by your device.'
                     }
                     type={isMissingDevice ? 'text' : 'number'}
-                    autoFocus={true}
+                    autoFocus
                 />
             </div>
-            <div className={'mt-6'}>
+            <div css={tw`mt-6`}>
-                <button
+                <Button
+                    size={'xlarge'}
                     type={'submit'}
-                    className={'btn btn-primary btn-jumbo'}
                     disabled={isSubmitting}
+                    isLoading={isSubmitting}
                 >
-                    {isSubmitting ?
+                    Continue
-                        <Spinner size={'small'} className={'mx-auto'}/>
+                </Button>
-                        :
-                        'Continue'
-                    }
-                </button>
             </div>
-            <div className={'mt-6 text-center'}>
+            <div css={tw`mt-6 text-center`}>
                 <span
                     onClick={() => {
                         setFieldValue('code', '');
                         setFieldValue('recoveryCode', '');
                         setIsMissingDevice(s => !s);
                     }}
-                    className={'cursor-pointer text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
+                    css={tw`cursor-pointer text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700`}
                 >
                     {!isMissingDevice ? 'I\'ve Lost My Device' : 'I Have My Device'}
                 </span>
             </div>
-            <div className={'mt-6 text-center'}>
+            <div css={tw`mt-6 text-center`}>
                 <Link
                     to={'/auth/login'}
-                    className={'text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700'}
+                    css={tw`text-xs text-neutral-500 tracking-wide uppercase no-underline hover:text-neutral-700`}
                 >
                     Return to Login
                 </Link>

resources/scripts/components/auth/LoginContainer.tsx

@@ -36,11 +36,7 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl
     return (
         <React.Fragment>
             {ref.current && ref.current.render()}
-            <LoginFormContainer
+            <LoginFormContainer title={'Login to Continue'} css={tw`w-full flex`} onSubmit={submit}>
-                title={'Login to Continue'}
-                css={tw`w-full flex`}
-                onSubmit={submit}
-            >
                 <Field
                     type={'text'}
                     label={'Username or Email'}

resources/scripts/components/auth/ResetPasswordContainer.tsx

@@ -11,15 +11,16 @@ import Spinner from '@/components/elements/Spinner';
 import { Formik, FormikHelpers } from 'formik';
 import { object, ref, string } from 'yup';
 import Field from '@/components/elements/Field';
-
+import Input from '@/components/elements/Input';
-type Props = Readonly<RouteComponentProps<{ token: string }> & {}>;
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
 
 interface Values {
     password: string;
     passwordConfirmation: string;
 }
 
-export default ({ match, history, location }: Props) => {
+export default ({ match, location }: RouteComponentProps<{ token: string }>) => {
     const [ email, setEmail ] = useState('');
 
     const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
@@ -62,46 +63,43 @@ export default ({ match, history, location }: Props) => {
             {({ isSubmitting }) => (
                 <LoginFormContainer
                     title={'Reset Password'}
-                    className={'w-full flex'}
+                    css={tw`w-full flex`}
                 >
                     <div>
                         <label>Email</label>
-                        <input className={'input'} value={email} disabled={true}/>
+                        <Input value={email} light disabled/>
                     </div>
-                    <div className={'mt-6'}>
+                    <div css={tw`mt-6`}>
                         <Field
-                            light={true}
+                            light
                             label={'New Password'}
                             name={'password'}
                             type={'password'}
                             description={'Passwords must be at least 8 characters in length.'}
                         />
                     </div>
-                    <div className={'mt-6'}>
+                    <div css={tw`mt-6`}>
                         <Field
-                            light={true}
+                            light
                             label={'Confirm New Password'}
                             name={'passwordConfirmation'}
                             type={'password'}
                         />
                     </div>
-                    <div className={'mt-6'}>
+                    <div css={tw`mt-6`}>
-                        <button
+                        <Button
+                            size={'xlarge'}
                             type={'submit'}
-                            className={'btn btn-primary btn-jumbo'}
                             disabled={isSubmitting}
+                            isLoading={isSubmitting}
                         >
-                            {isSubmitting ?
+                            Reset Password
-                                <Spinner size={'small'} className={'mx-auto'}/>
+                        </Button>
-                                :
-                                'Reset Password'
-                            }
-                        </button>
                     </div>
-                    <div className={'mt-6 text-center'}>
+                    <div css={tw`mt-6 text-center`}>
                         <Link
                             to={'/auth/login'}
-                            className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
+                            css={tw`text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600`}
                         >
                             Return to Login
                         </Link>

resources/scripts/components/elements/Button.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components/macro';
 import tw from 'twin.macro';
+import Spinner from '@/components/elements/Spinner';
 
 interface Props {
     isLoading?: boolean;
@@ -10,9 +11,9 @@ interface Props {
 }
 
 const StyledButton = styled.button<Omit<Props, 'isLoading'>>`
-    ${tw`rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
+    ${tw`relative inline-block rounded p-2 uppercase tracking-wide text-sm transition-all duration-150`};
     
-        ${props => props.isSecondary && css<Props>`
+    ${props => props.isSecondary && css<Props>`
         ${tw`border border-neutral-600 bg-transparent text-neutral-200`};
         
         &:hover:not(:disabled) {
@@ -79,8 +80,8 @@ type ComponentProps = Omit<JSX.IntrinsicElements['button'], 'ref' | keyof Props>
 const Button: React.FC<ComponentProps> = ({ children, isLoading, ...props }) => (
     <StyledButton {...props}>
         {isLoading &&
-        <div css={tw`w-full flex absolute justify-center`} style={{ marginLeft: '-0.75rem' }}>
+        <div css={tw`flex absolute justify-center items-center w-full h-full left-0 top-0`}>
-            <div className={'spinner-circle spinner-white spinner-sm'}/>
+            <Spinner size={'small'}/>
         </div>
         }
         <span css={isLoading ? tw`text-transparent` : undefined}>