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/ResetPasswordContainer.tsx
View file

@ -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';
type Props = Readonly<RouteComponentProps<{ token: string }> & {}>;
import Input from '@/components/elements/Input';
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'}>
<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'}/>
:
'Reset Password'
}
</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>