StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Correctly center the spinner in buttons

Browse source
This commit is contained in:
Dane Everitt 2020-07-04 14:34:43 -07:00
parent 8c20158e58
commit 1c97dd4e24
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
4 changed files with 40 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

38
resources/scripts/components/auth/LoginCheckpointContainer.tsx
View file

@ -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
title={'Device Checkpoint'}
className={'w-full flex'}
>
<div className={'mt-6'}>
<LoginFormContainer title={'Device Checkpoint'} css={tw`w-full flex`}>
<div css={tw`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'}>
<button
<div css={tw`mt-6`}>
<Button
size={'xlarge'}
type={'submit'}
className={'btn btn-primary btn-jumbo'}
disabled={isSubmitting}
isLoading={isSubmitting}
>
{isSubmitting ?
<Spinner size={'small'} className={'mx-auto'}/>
:
'Continue'
}
</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>