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