Visual improvements (#232)

* bedazzling changes * run ze linter * remove first and last name from sign up page * nav bar automatic dropdown * run ze linter again
uwblueprint · Feb 5, 2024 · 556de08 · 556de08
1 parent c65109b
commit 556de08
Show file tree

Hide file tree

Showing 20 changed files with 70 additions and 139 deletions.
diff --git a/backend/app/resources/create_user_dto.py b/backend/app/resources/create_user_dto.py
@@ -1,17 +1,11 @@
 class CreateUserDTO:
     def __init__(self, **kwargs):
-        self.first_name = kwargs.get("first_name")
-        self.last_name = kwargs.get("last_name")
         self.email = kwargs.get("email")
         self.role = kwargs.get("role")
         self.password = kwargs.get("password")
 
     def validate(self):
         error_list = []
-        if type(self.first_name) is not str:
-            error_list.append("The first_name supplied is not a string.")
-        if type(self.last_name) is not str:
-            error_list.append("The last_name supplied is not a string.")
         if type(self.email) is not str:
             error_list.append("The email supplied is not a string.")
         if type(self.role) is not str:

diff --git a/backend/app/resources/register_user_dto.py b/backend/app/resources/register_user_dto.py
@@ -1,16 +1,10 @@
 class RegisterUserDTO:
     def __init__(self, **kwargs):
-        self.first_name = kwargs.get("first_name")
-        self.last_name = kwargs.get("last_name")
         self.email = kwargs.get("email")
         self.password = kwargs.get("password")
 
     def validate(self):
         error_list = []
-        if type(self.first_name) is not str:
-            error_list.append("The first_name supplied is not a string.")
-        if type(self.last_name) is not str:
-            error_list.append("The last_name supplied is not a string.")
         if type(self.email) is not str:
             error_list.append("The email supplied is not a string.")
         if type(self.password) is not str:

diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -7,9 +7,8 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Resident management system for Supportive Housing of Waterloo"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>SHOW Resident Management</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/public/logo192.png b/frontend/public/logo192.png
diff --git a/frontend/public/logo512.png b/frontend/public/logo512.png
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/frontend/src/APIClients/AuthAPIClient.ts b/frontend/src/APIClients/AuthAPIClient.ts
@@ -96,15 +96,13 @@ const logout = async (userId: number | undefined): Promise<boolean> => {
 };
 
 const register = async (
-  firstName: string,
-  lastName: string,
   email: string,
   password: string,
 ): Promise<AuthTokenResponse | AuthErrorResponse> => {
   try {
     const { data } = await baseAPIClient.post(
       "/auth/register",
-      { firstName, lastName, email, password },
+      { email, password },
       { withCredentials: true },
     );
     return data;

diff --git a/frontend/src/components/auth/TwoFa.tsx b/frontend/src/components/auth/TwoFa.tsx
@@ -8,13 +8,15 @@ import {
   Spinner,
   Text,
   VStack,
+  Image,
 } from "@chakra-ui/react";
 import authAPIClient from "../../APIClients/AuthAPIClient";
 import AUTHENTICATED_USER_KEY from "../../constants/AuthConstants";
 import { HOME_PAGE } from "../../constants/Routes";
 import AuthContext from "../../contexts/AuthContext";
 import CreateToast from "../common/Toasts";
 import { isErrorResponse } from "../../helper/error";
+import SHOW_LOGO from "../../images/show-logo-colour.png";
 
 type TwoFaProps = {
   email: string;
@@ -93,7 +95,10 @@ const TwoFa = ({
             justifyContent="center"
             alignItems="center"
           >
-            <VStack width="75%" align="flex-start" gap="3vh">
+            <VStack width="80%" align="flex-start" gap="3vh">
+              <Flex flexDirection="column" alignItems="center" width="100%">
+                <Image src={SHOW_LOGO} h="100px" />
+              </Flex>
               <Text variant="login">One last step!</Text>
               <Text variant="loginSecondary">
                 In order to protect your account, please enter the 6 digit

diff --git a/frontend/src/components/common/NavigationBar.tsx b/frontend/src/components/common/NavigationBar.tsx
@@ -9,6 +9,7 @@ import {
   MenuButton,
   MenuItem,
   MenuList,
+  useDisclosure,
 } from "@chakra-ui/react";
 
 import {
@@ -22,10 +23,11 @@ import {
 import authAPIClient from "../../APIClients/AuthAPIClient";
 import AuthContext from "../../contexts/AuthContext";
 
-import SHOW_LOGO from "../../images/SHOW-Logo.png";
+import SHOW_LOGO from "../../images/show-logo-white.png";
 
 const NavigationBar = (): React.ReactElement => {
   const { authenticatedUser, setAuthenticatedUser } = useContext(AuthContext);
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   const history = useHistory();
   const navigateToHome = () => history.push(HOME_PAGE);
@@ -96,25 +98,30 @@ const NavigationBar = (): React.ReactElement => {
             </Button>
 
             {authenticatedUser?.role === "Admin" && (
-              <Menu>
+              <Menu isOpen={isOpen}>
                 <MenuButton
                   as={Button}
                   variant="link button-navbar"
                   onClick={handleMenuToggle}
+                  onMouseEnter={onOpen}
+                  onMouseLeave={onClose}
                 >
                   Admin Controls
                 </MenuButton>
-                {isMenuOpen && (
-                  <MenuList zIndex="3">
-                    <MenuItem onClick={navigateToEmployeeDirectory}>
-                      Employee Directory
-                    </MenuItem>
-                    <MenuItem onClick={navigateToSignInLogs}>
-                      Sign In Logs
-                    </MenuItem>
-                    <MenuItem onClick={navigateToTags}>Tags</MenuItem>
-                  </MenuList>
-                )}
+                <MenuList
+                  onMouseEnter={onOpen}
+                  onMouseLeave={onClose}
+                  zIndex="3"
+                  marginTop="-8px"
+                >
+                  <MenuItem onClick={navigateToEmployeeDirectory}>
+                    Employee Directory
+                  </MenuItem>
+                  <MenuItem onClick={navigateToSignInLogs}>
+                    Sign In Logs
+                  </MenuItem>
+                  <MenuItem onClick={navigateToTags}>Tags</MenuItem>
+                </MenuList>
               </Menu>
             )}
 

diff --git a/frontend/src/components/forms/CreateLog.tsx b/frontend/src/components/forms/CreateLog.tsx
@@ -332,9 +332,9 @@ const CreateLog = ({ getRecords, countRecords, setUserPageNum }: Props): React.R
       </Box>
 
       <Box>
-        <Modal isOpen={isCreateOpen} scrollBehavior="inside" onClose={handleCreateClose} size="xl">
+        <Modal isOpen={isCreateOpen} scrollBehavior="inside" onClose={handleCreateClose}>
           <ModalOverlay />
-          <ModalContent>
+          <ModalContent maxW="50%">
             <ModalHeader>Add Log Record</ModalHeader>
             <ModalCloseButton size="lg" />
             <ModalBody>
@@ -453,6 +453,7 @@ const CreateLog = ({ getRecords, countRecords, setUserPageNum }: Props): React.R
                       onChange={handleNotesChange}
                       placeholder="Enter log notes here..."
                       resize="vertical"
+                      rows={6}
                     />
 
                     <FormErrorMessage>Notes are required.</FormErrorMessage>

diff --git a/frontend/src/components/forms/EditLog.tsx b/frontend/src/components/forms/EditLog.tsx
@@ -259,9 +259,9 @@ const EditLog = ({
   return (
     <>
       <Box>
-        <Modal isOpen={isOpen} scrollBehavior="inside" onClose={toggleClose} size="xl">
+        <Modal isOpen={isOpen} scrollBehavior="inside" onClose={toggleClose}>
           <ModalOverlay />
-          <ModalContent>
+          <ModalContent maxW="50%">
             <ModalHeader>Edit Log Record</ModalHeader>
             <ModalCloseButton size="lg" />
             <ModalBody>
@@ -393,6 +393,7 @@ const EditLog = ({
                       onChange={handleNotesChange}
                       placeholder="Enter log notes here..."
                       resize="vertical"
+                      rows={6}
                     />
 
                     <FormErrorMessage>Notes are required.</FormErrorMessage>

diff --git a/frontend/src/components/forms/Login.tsx b/frontend/src/components/forms/Login.tsx
@@ -8,6 +8,7 @@ import {
   FormErrorMessage,
   Input,
   Spinner,
+  Image,
 } from "@chakra-ui/react";
 import { useHistory } from "react-router-dom";
 import authAPIClient from "../../APIClients/AuthAPIClient";
@@ -17,6 +18,7 @@ import AuthContext from "../../contexts/AuthContext";
 import { isAuthErrorResponse, isErrorResponse } from "../../helper/error";
 import UserAPIClient from "../../APIClients/UserAPIClient";
 import { UserStatus } from "../../types/UserTypes";
+import SHOW_LOGO from "../../images/show-logo-colour.png";
 
 type CredentialsProps = {
   email: string;
@@ -159,6 +161,11 @@ const Login = ({
             alignItems="center"
             gap="28px"
           >
+            <Box w="80%" textAlign="center">
+              <Flex flexDirection="column" alignItems="center">
+                <Image src={SHOW_LOGO} h="100px" />
+              </Flex>
+            </Box>
             <Box w="80%" textAlign="left">
               <Text variant="login">Log In</Text>
             </Box>