diff --git a/website/components/auth-gate/auth-gate.module.css b/website/components/auth-gate/auth-gate.module.css index dbda7381e1..2664a39449 100644 --- a/website/components/auth-gate/auth-gate.module.css +++ b/website/components/auth-gate/auth-gate.module.css @@ -7,7 +7,18 @@ } .loadingIconSpin { - transform: translateY(-100px); + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + animation: spin 0.5s linear infinite; +} + +@keyframes spin { + 100% { + transform: rotate(360deg); + } } .loginLockup { diff --git a/website/components/auth-indicator/auth-indicator.module.css b/website/components/auth-indicator/auth-indicator.module.css index 24b7207979..453adc3f8a 100644 --- a/website/components/auth-indicator/auth-indicator.module.css +++ b/website/components/auth-indicator/auth-indicator.module.css @@ -3,7 +3,7 @@ bottom: 0; width: 100vw; z-index: 3; - padding: 1rem; + padding: 1rem 2rem; text-align: center; background: var(--black); color: var(--white); @@ -16,10 +16,9 @@ } } -.loadingIconSpin { - transform: translateY(-100px); -} - .loggedInText { - margin: 0 1rem; + margin: 1rem 1rem; + @media (--medium-up) { + margin: 0 1rem; + } } diff --git a/website/components/auth-indicator/index.jsx b/website/components/auth-indicator/index.jsx index 2f6cf52a3c..856016fbfe 100644 --- a/website/components/auth-indicator/index.jsx +++ b/website/components/auth-indicator/index.jsx @@ -1,13 +1,10 @@ import { signOut, useSession } from 'next-auth/client' -import LoadingIcon from './loading.svg?include' -import InlineSvg from '@hashicorp/react-inline-svg' import styles from './auth-indicator.module.css' import Button from '@hashicorp/react-button' export default function AuthIndicator() { const [session, loading] = useSession() - if (loading) - return + if (loading) return `Loading...` return (
{session && ( diff --git a/website/pages/api/auth/[...nextauth].js b/website/pages/api/auth/[...nextauth].js index 33b88283a0..f1a5a7fe68 100644 --- a/website/pages/api/auth/[...nextauth].js +++ b/website/pages/api/auth/[...nextauth].js @@ -5,7 +5,7 @@ export default (req, res) => req, res )({ - environments: { production: ['Okta'], preview: ['Okta', 'Auth0'] }, + environments: { production: ['Okta', 'Auth0'], preview: ['Okta', 'Auth0'] }, pages: { error: '/signin-error', // Error code passed in query string as ?error= },