From 446d5be62b1d61a0351cfd0d0af1a6c6075a3269 Mon Sep 17 00:00:00 2001 From: Dane Everitt Date: Sun, 22 Dec 2019 14:53:27 -0800 Subject: [PATCH] Show proper spinners --- .../auth/LoginCheckpointContainer.tsx | 3 +- .../components/auth/LoginContainer.tsx | 3 +- .../auth/ResetPasswordContainer.tsx | 3 +- .../scripts/components/elements/Spinner.tsx | 30 ++++++---- resources/styles/components/forms.css | 6 +- resources/styles/components/spinners.css | 59 ------------------- 6 files changed, 31 insertions(+), 73 deletions(-) diff --git a/resources/scripts/components/auth/LoginCheckpointContainer.tsx b/resources/scripts/components/auth/LoginCheckpointContainer.tsx index 54ac3ee48..7c474a3fe 100644 --- a/resources/scripts/components/auth/LoginCheckpointContainer.tsx +++ b/resources/scripts/components/auth/LoginCheckpointContainer.tsx @@ -7,6 +7,7 @@ import { Actions, useStoreActions } from 'easy-peasy'; import { StaticContext } from 'react-router'; import FlashMessageRender from '@/components/FlashMessageRender'; import { ApplicationStore } from '@/state'; +import Spinner from '@/components/elements/Spinner'; export default ({ history, location: { state } }: RouteComponentProps<{}, StaticContext, { token?: string }>) => { const [ code, setCode ] = useState(''); @@ -71,7 +72,7 @@ export default ({ history, location: { state } }: RouteComponentProps<{}, Static disabled={isLoading || code.length !== 6} > {isLoading ? -   + : 'Continue' } diff --git a/resources/scripts/components/auth/LoginContainer.tsx b/resources/scripts/components/auth/LoginContainer.tsx index ed543d6d5..1af30c2ba 100644 --- a/resources/scripts/components/auth/LoginContainer.tsx +++ b/resources/scripts/components/auth/LoginContainer.tsx @@ -11,6 +11,7 @@ import Field from '@/components/elements/Field'; import { httpErrorToHuman } from '@/api/http'; import { FlashMessage } from '@/state/flashes'; import ReCAPTCHA from 'react-google-recaptcha'; +import Spinner from '@/components/elements/Spinner'; type OwnProps = RouteComponentProps & { clearFlashes: ActionCreator; @@ -63,7 +64,7 @@ const LoginContainer = ({ isSubmitting, setFieldValue, values, submitForm, handl className={'btn btn-primary btn-jumbo'} > {isSubmitting ? -   + : 'Login' } diff --git a/resources/scripts/components/auth/ResetPasswordContainer.tsx b/resources/scripts/components/auth/ResetPasswordContainer.tsx index 6954ebd2a..ec3b3ff6f 100644 --- a/resources/scripts/components/auth/ResetPasswordContainer.tsx +++ b/resources/scripts/components/auth/ResetPasswordContainer.tsx @@ -8,6 +8,7 @@ import LoginFormContainer from '@/components/auth/LoginFormContainer'; import FlashMessageRender from '@/components/FlashMessageRender'; import { Actions, useStoreActions } from 'easy-peasy'; import { ApplicationStore } from '@/state'; +import Spinner from '@/components/elements/Spinner'; type Props = Readonly & {}>; @@ -89,7 +90,7 @@ export default (props: Props) => { disabled={isLoading || !canSubmit()} > {isLoading ? -   + : 'Reset Password' } diff --git a/resources/scripts/components/elements/Spinner.tsx b/resources/scripts/components/elements/Spinner.tsx index 83ee202be..0376516e5 100644 --- a/resources/scripts/components/elements/Spinner.tsx +++ b/resources/scripts/components/elements/Spinner.tsx @@ -3,17 +3,27 @@ import classNames from 'classnames'; export type SpinnerSize = 'large' | 'normal' | 'tiny'; -export default ({ size, centered }: { size?: SpinnerSize; centered?: boolean }) => ( +interface Props { + size?: SpinnerSize; + centered?: boolean; + className?: string; +} + +export default ({ size, centered, className }: Props) => ( centered ? -
-
+
+
: -
+
); diff --git a/resources/styles/components/forms.css b/resources/styles/components/forms.css index b83d0132b..3504f5e43 100644 --- a/resources/styles/components/forms.css +++ b/resources/styles/components/forms.css @@ -1,5 +1,9 @@ textarea, select, input, button { - outline: none; + @apply .outline-none; +} + +button:focus, button:focus-visible { + @apply .outline-none; } input[type=number]::-webkit-outer-spin-button, diff --git a/resources/styles/components/spinners.css b/resources/styles/components/spinners.css index 771db060a..864445b31 100644 --- a/resources/styles/components/spinners.css +++ b/resources/styles/components/spinners.css @@ -1,62 +1,3 @@ -.spinner { - @apply .h-4 .relative .bg-transparent; - pointer-events: none; - - &.spinner-xl { - @apply .h-16; - } - - &:after { - @apply .border-2 .border-neutral-400 .absolute .block .h-4 .w-4 .rounded-full; - animation: spinners--spin 500ms infinite linear; - border-top-color: transparent !important; - border-right-color: transparent !important; - content: ''; - left: calc(50% - (1em / 2)); - } - - &.spinner-relative:after { - @apply .relative; - } - - &.spinner-xl:after { - @apply .h-16 .w-16; - left: calc(50% - (4rem / 2)); - } - - /** - * Speeds - */ - &.spin-slow:after { - animation: spinners--spin 1200ms infinite linear; - } - - /** - * Spinner Colors - */ - &.blue:after, &.text-blue:after { - @apply .border-primary-500; - } - - &.white:after, &.text-white:after { - @apply .border-white; - } - - &.spinner-thick:after { - @apply .border-4; - } -} - -@keyframes spinners--spin { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - .spinner-circle { @apply .w-8 .h-8; border: 3px solid hsla(211, 12%, 43%, 0.2);