Added UI changes

frontend/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.3.16",
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",

frontend/src/App.tsx

@@ -14,6 +14,7 @@ import SimpleEntityDisplayPage from "./components/pages/SimpleEntityDisplayPage"
 import NotFound from "./components/pages/NotFound";
 import UpdatePage from "./components/pages/UpdatePage";
 import SimpleEntityUpdatePage from "./components/pages/SimpleEntityUpdatePage";
+import CreatePasswordPage from "./components/pages/CreatePasswordPage";
 import * as Routes from "./constants/Routes";
 import * as AuthConstants from "./constants/AuthConstants";
 import AUTHENTICATED_USER_KEY from "./constants/AuthConstants";
@@ -61,6 +62,11 @@ const App = (): React.ReactElement => {
             <Switch>
               <Route exact path={Routes.LOGIN_PAGE} component={Login} />
               <Route exact path={Routes.SIGNUP_PAGE} component={Signup} />
+              <Route
+                exact
+                path={Routes.CREATE_PASSWORD_PAGE}
+                component={CreatePasswordPage}
+              />
               <PrivateRoute
                 exact
                 path={Routes.HOME_PAGE}

frontend/src/components/common/responsive/ResponsiveAuthContainer.tsx

@@ -0,0 +1,33 @@
+import { Box, Flex } from "@chakra-ui/react";
+import React from "react";
+
+interface ResponsiveAuthContainerProps {
+  children: React.ReactNode;
+}
+
+const ResponsiveAuthContainer = ({
+  children,
+}: ResponsiveAuthContainerProps): React.ReactElement => {
+  return (
+    <Flex
+      padding={{
+        base: "2.25rem",
+        md: "2.5rem",
+      }}
+      background="var(--gray-100, #EDF2F7)"
+      borderRadius="0.375rem"
+    >
+      <Box
+        display="inline-flex"
+        flexDirection="column"
+        gap={{ base: "1.12rem", md: "1rem" }}
+        width={{ md: "16rem" }}
+        justifyContent="center"
+      >
+        {children}
+      </Box>
+    </Flex>
+  );
+};
+
+export default ResponsiveAuthContainer;

frontend/src/components/common/responsive/ResponsiveLogo.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Center, Image } from "@chakra-ui/react";
+
+const ResponsiveLogo = (): React.ReactElement => {
+  return (
+    <Center
+      height={{ base: "8rem", md: "10.85rem" }}
+      aspectRatio="27.3/14"
+      bg="#2C5282"
+      borderRadius="2.6875rem"
+      border="1px solid var(--gray-200, #E2E8F0)"
+    >
+      <Image
+        src="/images/humane_society_logo_text.png"
+        alt="Humane Societsy Logo"
+        height={{ base: "6.5rem", md: "9rem" }}
+        aspectRatio="27.3/14"
+        objectFit="cover"
+      />
+    </Center>
+  );
+};
+
+export default ResponsiveLogo;

frontend/src/components/common/responsive/ResponsiveModalWindow.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Center, Flex } from "@chakra-ui/react";
+
+interface ResponsiveModalWindowProps {
+  children: React.ReactNode; // Define children prop type
+}
+
+const ResponsiveModalWindow = ({
+  children,
+}: ResponsiveModalWindowProps): React.ReactElement => {
+  return (
+    <Center
+      top="0"
+      left="0"
+      position="absolute"
+      height="100%"
+      width="100%"
+      bg="rgba(26, 32, 44, 0.60)"
+    >
+      <Flex
+        bg="var(--gray-50, #F7FAFC)"
+        align-items="center"
+        width={{ base: "90%", sm: "21.375rem", md: "33.625rem" }}
+        direction="column"
+        gap={{ base: "1rem", md: "2.8125rem" }}
+        padding={{ base: "1.38rem 3.38rem", md: "3.6875rem 10.5rem" }}
+      >
+        {children}
+      </Flex>
+    </Center>
+  );
+};
+
+export default ResponsiveModalWindow;

frontend/src/components/common/responsive/ResponsivePasswordInput.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import {
+  IconButton,
+  Input,
+  InputGroup,
+  InputRightElement,
+} from "@chakra-ui/react";
+import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
+
+interface ResponsivePasswordInputProps {
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const ResponsivePasswordInput = ({
+  value,
+  onChange,
+}: ResponsivePasswordInputProps): React.ReactElement => {
+  const [showPassword, setShowPassword] = React.useState(false);
+  const handlePasswordClick = () => setShowPassword(!showPassword);
+
+  return (
+    <InputGroup size="md">
+      <Input
+        fontSize="14px"
+        height="2.4rem"
+        pr="2rem"
+        type={showPassword ? "text" : "password"}
+        bg="#FFFFFF"
+        value={value}
+        onChange={onChange}
+      />
+      <InputRightElement width="2rem">
+        {showPassword ? (
+          <IconButton
+            variant="unstyled"
+            isRound
+            bg="transparent"
+            onClick={handlePasswordClick}
+            aria-label="view"
+            icon={<ViewIcon />}
+          />
+        ) : (
+          <IconButton
+            variant="unstyled"
+            isRound
+            bg="transparent"
+            onClick={handlePasswordClick}
+            aria-label="hide"
+            icon={<ViewOffIcon />}
+          />
+        )}
+      </InputRightElement>
+    </InputGroup>
+  );
+};
+
+export default ResponsivePasswordInput;

frontend/src/components/common/responsive/ResponsivePawprintBackground.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Box } from "@chakra-ui/react";
+
+const ResponsivePawprintBackground = (): React.ReactElement => {
+  return (
+    <Box
+      position="absolute"
+      top="50%"
+      left="50%"
+      width={{ base: "200vw", md: "100vw" }}
+      height={{ base: "200vh", md: "100vh" }}
+      transform={{ base: "translate(-50%, -50%) rotate(-15deg)", md: "translate(-50%, -50%)" }}
+      sx={{
+        backgroundImage: "url('/images/paw_prints_bg.svg')",
+        backgroundSize: { base: "contain", md: "130%" },
+        backgroundRepeat: "no-repeat",
+        backgroundColor: "var(--blue-700, #2C5282)",
+        backgroundPosition: "center",
+        transformOrigin: "center",
+        zIndex: -1,
+      }}
+    />
+  );
+};
+
+export default ResponsivePawprintBackground;

frontend/src/components/pages/CreatePasswordPage.tsx

@@ -0,0 +1,146 @@
+import React from "react";
+import {
+  Input,
+  Button,
+  Center,
+  Stack,
+  Flex,
+  Box,
+  Text,
+  FormLabel,
+} from "@chakra-ui/react";
+import ResponsiveLogo from "../common/responsive/ResponsiveLogo";
+import ResponsivePawprintBackground from "../common/responsive/ResponsivePawprintBackground";
+import ResponsivePasswordInput from "../common/responsive/ResponsivePasswordInput";
+import ResponsiveModalWindow from "../common/responsive/ResponsiveModalWindow";
+import ResponsiveAuthContainer from "../common/responsive/ResponsiveAuthContainer";
+
+const CreatePasswordPage = (): React.ReactElement => {
+  const [showModal, setShowModal] = React.useState(false);
+  const [password, setPassword] = React.useState("");
+  const [confirmPassword, setConfirmPassword] = React.useState("");
+
+  const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPassword(event.target.value);
+  };
+  const handleConfirmPasswordChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setConfirmPassword(event.target.value);
+  };
+  const handleCreateAccount = () => {
+    setShowModal(true);
+  };
+  return (
+    <Box width="100vw" height="100vh" position="relative" overflow="hidden">
+      <Center width="100%" height="100%">
+        <ResponsivePawprintBackground />
+        <Flex
+          gap="2.2rem"
+          direction="column"
+          justify="center"
+          alignItems="center"
+        >
+          <ResponsiveLogo />
+          <ResponsiveAuthContainer>
+            <Text
+              color="#4A5568"
+              textStyle={{ base: "h2Mobile", md: "h2" }}
+              mb="0"
+              textAlign="center"
+            >
+              Welcome Back!
+            </Text>
+            <Stack spacing="2.25rem">
+              <Stack spacing={{ base: "1rem", md: "1.5rem" }} width="100%">
+                <Box>
+                  <FormLabel
+                    fontSize="14px"
+                    textColor="var(--gray-600, #4A5568)"
+                    lineHeight="8px"
+                  >
+                    Email Address:
+                  </FormLabel>
+                  <Input
+                    textColor="var(--gray-400, #A0AEC0)"
+                    fontSize="14px"
+                    height="2.4rem"
+                    placeholder="[email protected]"
+                    isDisabled
+                    bg="var(--gray-200, #E2E8F0)"
+                  />
+                </Box>
+                <Box fontSize="12px">
+                  <FormLabel
+                    textColor="var(--gray-600, #4A5568)"
+                    fontSize="14px"
+                    lineHeight="8px"
+                  >
+                    Create Password:
+                  </FormLabel>
+                  <ResponsivePasswordInput
+                    value={password}
+                    onChange={handlePasswordChange}
+                  />
+                </Box>
+                <Box fontSize="12px">
+                  <FormLabel
+                    textColor="var(--gray-600, #4A5568)"
+                    fontSize="14px"
+                    lineHeight="8px"
+                  >
+                    Confirm Password:
+                  </FormLabel>
+                  <ResponsivePasswordInput
+                    value={confirmPassword}
+                    onChange={handleConfirmPasswordChange}
+                  />
+                </Box>
+              </Stack>
+              <Button
+                fontSize="14px"
+                onClick={handleCreateAccount}
+                colorScheme="blue"
+                pl={{ base: "0.94rem", md: "1.875rem" }}
+                pr={{ base: "0.94rem", md: "1.875rem" }}
+                h="2.4rem"
+                width="100%"
+                bg="var(--blue-700, #2C5282)"
+              >
+                Create Account
+              </Button>
+            </Stack>
+          </ResponsiveAuthContainer>
+        </Flex>
+      </Center>
+      {showModal && (
+        <ResponsiveModalWindow>
+          <Text
+            color="#2C5282"
+            textAlign="center"
+            textStyle={{ base: "h2", md: "h1" }}
+          >
+            Success!
+          </Text>
+          <Text
+            textStyle={{ base: "bodyMobile", md: "body" }}
+            textAlign="center"
+          >
+            Welcome to the Oakville & Milton Humane Society
+          </Text>
+          <Button
+            color="var(--gray-100, #EDF2F7)"
+            bg="var(--blue-700, #2C5282)"
+            height="3rem"
+            padding="0rem 1.875rem"
+            textStyle="button"
+          >
+            Get Started
+          </Button>
+        </ResponsiveModalWindow>
+      )}
+    </Box>
+  );
+};
+
+export default CreatePasswordPage;

frontend/src/constants/Routes.ts

@@ -29,3 +29,5 @@ export const DEV_UTILITY_PAGE = "/dev-utility"; // TODO: This is only here for d
 export const USER_MANAGEMENT_PAGE = "/admin/users";
 
 export const ADMIN_PAGE = "/admin";
+
+export const CREATE_PASSWORD_PAGE = "/create-password";