login and password

hack4impact-upenn · Feb 4, 2024 · 2c81177 · 2c81177
1 parent 62d65ea
commit 2c81177
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 9 deletions.
diff --git a/client/src/Authentication/EmailResetPasswordPage.tsx b/client/src/Authentication/EmailResetPasswordPage.tsx
@@ -8,6 +8,8 @@ import { emailRegex, InputErrorMessage } from '../util/inputvalidation';
 import PrimaryButton from '../components/buttons/PrimaryButton';
 import ScreenGrid from '../components/ScreenGrid';
 import FormCol from '../components/form/FormCol';
+import westPark from '../assets/westPark.png';
+
 
 /**
  * A page allowing users to input their email so a reset password link can be
@@ -80,12 +82,18 @@ function EmailResetPasswordPage() {
     }
   };
 
-  const title = "Let's get you back";
+  const title = "Change Password";
   return (
     <ScreenGrid>
       <FormGrid>
         <FormCol>
           <Grid item container justifyContent="center">
+          <Grid item container justifyContent="center">
+            <img width="70%" src={westPark} alt="West Park Logo" />
+          </Grid>
+          <Typography variant="h5" textAlign="center">
+              Donor Management System
+            </Typography>
             <Typography variant="h2">{title}</Typography>
           </Grid>
           <Grid item width="1">

diff --git a/client/src/Authentication/LoginPage.tsx b/client/src/Authentication/LoginPage.tsx
@@ -11,6 +11,7 @@ import { loginUser } from './api';
 import AlertDialog from '../components/AlertDialog';
 import PrimaryButton from '../components/buttons/PrimaryButton';
 import ScreenGrid from '../components/ScreenGrid';
+import westPark from '../assets/westPark.png';
 
 /**
  * A page allowing users to input their email and password to login. The default
@@ -133,8 +134,14 @@ function LoginPage() {
       <FormGrid>
         <FormCol>
           <Grid item container justifyContent="center">
+          <Grid item container justifyContent="center">
+            <img width="70%" src={westPark} alt="West Park Logo" />
+          </Grid>
+          <Typography variant="h5" textAlign="center">
+              Donor Management System
+            </Typography>
             <Typography variant="h2" textAlign="center">
-              Welcome to Boilerplate
+              Login
             </Typography>
           </Grid>
           <Grid item width="1">
@@ -172,16 +179,11 @@ function LoginPage() {
             </PrimaryButton>
           </Grid>
           <FormRow>
-            <Grid item>
+            <Grid item container justifyContent="center">
               <Link component={RouterLink} to="/email-reset">
                 Forgot password?
               </Link>
             </Grid>
-            <Grid item>
-              <Link component={RouterLink} to="/register">
-                Sign up
-              </Link>
-            </Grid>
           </FormRow>
         </FormCol>
       </FormGrid>

diff --git a/client/src/Authentication/ResetPasswordPage.tsx b/client/src/Authentication/ResetPasswordPage.tsx
@@ -8,6 +8,7 @@ import AlertDialog from '../components/AlertDialog';
 import PrimaryButton from '../components/buttons/PrimaryButton';
 import ScreenGrid from '../components/ScreenGrid';
 import FormCol from '../components/form/FormCol';
+import westPark from '../assets/westPark.png';
 
 /**
  * A page that allows users to reset their password by inputting a new password
@@ -114,6 +115,12 @@ function ResetPasswordPage() {
       <FormGrid>
         <FormCol>
           <Grid item container justifyContent="center">
+          <Grid item container justifyContent="center">
+            <img width="70%" src={westPark} alt="West Park Logo" />
+          </Grid>
+          <Typography variant="h5" textAlign="center">
+              Donor Management System
+            </Typography>
             <Typography variant="h2">Excited to have you back!</Typography>
           </Grid>
           <Grid item width="1">

diff --git a/client/src/assets/colors.ts b/client/src/assets/colors.ts
@@ -16,6 +16,7 @@ const COLORS = {
   neutral: '#8c8c8c', // Gray
   lightGray: '#ebeff2', // Gray-subsection
   actionBlue: '#155da1', // Action button
+  green: '#6BAD6A', // Green
 
   // Other colors:
 };

diff --git a/client/src/assets/theme.ts b/client/src/assets/theme.ts
@@ -4,6 +4,7 @@
 import { createTheme } from '@mui/material/styles';
 import COLORS from './colors';
 import 'typeface-hk-grotesk';
+import { color, fontFamily, fontSize, fontStyle } from '@mui/system';
 
 // https://github.com/hack4impact/chapter-website-template/blob/main/public/style.css
 const theme = createTheme({
@@ -39,6 +40,7 @@ const theme = createTheme({
       'Droid Sans',
       'Helvetica Neue',
       'sans-serif',
+      'Fredoka One',
     ].join(','),
   },
   components: {
@@ -52,8 +54,11 @@ const theme = createTheme({
           fontWeight: 'bold !important',
         },
         h2: {
-          fontSize: '38px !important',
+          fontSize: '50px !important',
+          fontFamily: 'Fredoka One',
+          fontWeight: 'bold !important',
           marginBottom: '32px !important',
+          marginTop: '40px !important',
         },
         h3: {
           fontWeight: 'bold !important',
@@ -62,6 +67,12 @@ const theme = createTheme({
         h4: {
           fontWeight: 'bold !important',
         },
+        h5: {
+          fontFamily: 'Hind Guntur',
+          fontWeight: '400 !important',
+          fontSize: '25px',
+          color: COLORS.green
+        },
       },
     },
   },

diff --git a/client/src/assets/westPark.png b/client/src/assets/westPark.png