fix auth page layout and css

sfbrigade · Aug 28, 2024 · 0a8c9f3 · 0a8c9f3
1 parent ad2b79f
commit 0a8c9f3
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 52 deletions.
diff --git a/client/src/pages/auth/form.module.css b/client/src/pages/auth/form.module.css
@@ -1,6 +1,5 @@
 .header {
   text-align: center;
-  margin: 2rem 0;
 }
 
 .header > p {
@@ -19,9 +18,3 @@
   color: #2b8a3e;
   font-size: small;
 }
-
-@media (min-width: 48em) {
-  .header {
-    margin: 8.75rem 0 2rem 0;
-  }
-}
diff --git a/client/src/pages/auth/login/login.jsx b/client/src/pages/auth/login/login.jsx
@@ -5,7 +5,7 @@ import { StatusCodes } from 'http-status-codes';
 import { useAuthorization } from '../../../hooks/useAuthorization';
 import { LoginForm } from './LoginForm';
 
-import classes from './login.module.css';
+import classes from '../form.module.css';
 
 /**
  * Login page component.

diff --git a/client/src/pages/auth/login/login.module.css b/client/src/pages/auth/login/login.module.css
@@ -1,8 +1,3 @@
-.header {
-  text-align: center;
-  margin: 2rem 0;
-}
-
 .email {
   margin-bottom: 1.5rem;
 }
@@ -17,12 +12,6 @@
   padding-top: 0.5rem;
 }
 
-@media (min-width: 48em) {
-  .header {
-    margin: 8.75rem 0 2rem 0;
-  }
-}
-
 .loginBtn {
   margin-top: 1.5rem;
 }
diff --git a/client/src/pages/auth/register/register.jsx b/client/src/pages/auth/register/register.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import classes from './register.module.css';
+import classes from '../form.module.css';
 import { RegisterForm } from './RegisterForm';
 import { Flex } from '@mantine/core';
 import { useParams } from 'react-router-dom';
@@ -158,34 +158,31 @@ function Register() {
   }
 
   return (
-    <div className={classes.register}>
-      <div className={classes.banner}>Image goes here</div>
-      <div>
-        <div className={classes.header}>
-          <h2>Interest Form</h2>
-          <p>
-            description of filling out interest form to start account
-            registration process
-          </p>
-        </div>
-        <Flex direction="column" gap="md">
-          <RegisterForm
-            user={user}
-            errors={errors}
-            isLoading={isLoading}
-            showLicenseHelper={showLicenseHelper}
-            onFormChange={onFormChange}
-            onSubmit={formState === 1 ? fetchLicenseNumber : handleRegister}
-            setShowLicenseHelper={() => {
-              setShowLicenseHelper(!showLicenseHelper);
-            }}
-            formState={formState}
-            showLicenseField={
-              !inviteId || (inviteId && user.role == 'FIRST_RESPONDER')
-            }
-          />
-        </Flex>
+    <div>
+      <div className={classes.header}>
+        <h2>Interest Form</h2>
+        <p>
+          description of filling out interest form to start account registration
+          process
+        </p>
       </div>
+      <Flex direction="column" gap="md">
+        <RegisterForm
+          user={user}
+          errors={errors}
+          isLoading={isLoading}
+          showLicenseHelper={showLicenseHelper}
+          onFormChange={onFormChange}
+          onSubmit={formState === 1 ? fetchLicenseNumber : handleRegister}
+          setShowLicenseHelper={() => {
+            setShowLicenseHelper(!showLicenseHelper);
+          }}
+          formState={formState}
+          showLicenseField={
+            !inviteId || (inviteId && user.role == 'FIRST_RESPONDER')
+          }
+        />
+      </Flex>
     </div>
   );
 }

diff --git a/client/src/stories/AuthLayout/AuthLayout.jsx b/client/src/stories/AuthLayout/AuthLayout.jsx
@@ -9,7 +9,9 @@ export default function AuthLayout() {
   return (
     <div className="auth-layout">
       <div className="banner">testing</div>
-      <Outlet />
+      <div className="form">
+        <Outlet />
+      </div>
     </div>
   );
 }
diff --git a/client/src/stories/AuthLayout/authlayout.css b/client/src/stories/AuthLayout/authlayout.css
@@ -1,17 +1,21 @@
 .auth-layout {
   width: 100vw;
-  height: 100vh;
-  height: 100dvh;
+  min-height: 100vh;
+  min-height: 100dvh;
 }
 
 .banner {
   display: none;
 }
 
+.form {
+  padding: 2rem 1rem;
+}
+
 @media (min-width: 48em) {
   .auth-layout {
     display: flex;
-    height: 100vh;
+    min-height: 100vh;
 
     & > * {
       flex: 1;
@@ -21,7 +25,12 @@
   .banner {
     display: block;
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     background-color: aqua;
+    background-size: cover;
+  }
+
+  .form {
+    padding: 4rem 1rem;
   }
 }