fix: styling on accept invite page (#3214)

infrahq · Sep 15, 2022 · 3e2102d · 3e2102d
1 parent 5a0017b
commit 3e2102d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 21 deletions.
diff --git a/ui/components/password-reset-form.js b/ui/components/password-reset-form.js
@@ -71,7 +71,7 @@ export default function PasswordResetForm() {
         Set Password
       </button>
       {error && (
-        <p className='absolute -bottom-3.5 mx-auto w-full text-center text-2xs text-red-500'>
+        <p className='absolute top-full mx-auto w-full text-center text-2xs text-red-500'>
           {error}
         </p>
       )}

diff --git a/ui/pages/accept-invite/index.js b/ui/pages/accept-invite/index.js
@@ -7,27 +7,23 @@ export default function AcceptInvite() {
   const router = useRouter()
   const { token } = router.query
 
+  if (!router.isReady) {
+    return null
+  }
+
+  if (!token) {
+    router.replace('/')
+    return null
+  }
+
   return (
-    <>
-      {token ? (
-        <>
-          <h2 className='my-3 max-w-[260px] text-center text-xs text-gray-300'>
-            Welcome to Infra. Please set your password
-          </h2>
-          <div className='relative mt-4 w-full'>
-            <div
-              className='absolute inset-0 flex items-center'
-              aria-hidden='true'
-            >
-              <div className='w-full border-t border-gray-800' />
-            </div>
-          </div>
-          <PasswordResetForm />
-        </>
-      ) : (
-        <h1 className='text-base font-bold leading-snug'>Token missing</h1>
-      )}
-    </>
+    <div className='flex min-h-[320px] w-full flex-col items-center px-10 py-8'>
+      <h1 className='text-base font-bold leading-snug'>Welcome to Infra</h1>
+      <h2 className='my-1.5 mb-4 max-w-md text-center text-xs text-gray-500'>
+        Please set your password to continue
+      </h2>
+      <PasswordResetForm />
+    </div>
   )
 }