Added UI Elements

uwblueprint · Oct 16, 2024 · 29fbfde · 29fbfde
1 parent 1ba32be
commit 29fbfde
Show file tree

Hide file tree

Showing 10 changed files with 293 additions and 65 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.3.16",
+    "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
-    "@chakra-ui/icons": "^3.2.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/poppins": "^5.0.14",

diff --git a/frontend/public/images/humane_society_logo_text.png b/frontend/public/images/humane_society_logo_text.png
diff --git a/frontend/public/images/paw_prints_bg.svg b/frontend/public/images/paw_prints_bg.svg
diff --git a/frontend/src/components/common/responsive/ResponsiveAuthContainer.tsx b/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;
diff --git a/frontend/src/components/common/responsive/ResponsiveLogo.tsx b/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;
diff --git a/frontend/src/components/common/responsive/ResponsiveModalWindow.tsx b/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;
diff --git a/frontend/src/components/common/responsive/ResponsivePasswordInput.tsx b/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;
diff --git a/frontend/src/components/common/responsive/ResponsivePawprintBackground.tsx b/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;
diff --git a/frontend/src/components/pages/CreatePasswordPage.tsx b/frontend/src/components/pages/CreatePasswordPage.tsx
@@ -7,6 +7,10 @@ import {
   Heading,
   Button,
   Center,
+  Stack,
+  Flex,
+  Image,
+  Box,
 } from "@chakra-ui/react";
 import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons"; 
 
@@ -19,66 +23,81 @@ const CreatePasswordPage = (): React.ReactElement => {
     setShowConfirmPassword(!showConfirmPassword);
 
   return (
-    <Center style = {{width: "100%", height: "100vh", backgroundSize: "cover", backgroundImage: "url('/images/paw_prints_bg.png')"}} >
-      <div style={{ textAlign: "center", width: "25%", margin: "0px auto"}} > 
-        <Heading>Welcome!</Heading> 
-        <Input placeholder="Basic usage" />
-        <InputGroup size="md">
-          <Input
-            pr="2rem"
-            type={showCreatePassword ? "text" : "password"}
-            placeholder="Enter password"
-          />
-          <InputRightElement width="2rem">
-            {showCreatePassword ? (
-              <IconButton 
-                isRound
-                bg="transparent"
-                onClick={handleCreatePasswordClick}
-                aria-label="view"
-                icon={<ViewIcon />}
-              />
-            ) : (
-              <IconButton 
-                isRound
-                bg="transparent"
-                onClick={handleCreatePasswordClick}
-                aria-label="hide"
-                icon={<ViewOffIcon />}
-              />
-            )}
-          </InputRightElement>
-        </InputGroup>
-        <InputGroup size="md">
-          <Input
-            pr="2rem"
-            type={showConfirmPassword ? "text" : "password"}
-            placeholder="Enter password"
-          />
-          <InputRightElement width="2rem">
-            {showConfirmPassword ? (
-              <IconButton
-                isRound
-                bg = "transparent"
-                onClick={handleConfirmPasswordClick}
-                aria-label="view"
-                icon={<ViewIcon />}
-              />
-            ) : (
-              <IconButton
-                isRound
-                bg = "transparent"
-                onClick={handleConfirmPasswordClick}
-                aria-label="hide"
-                icon={<ViewOffIcon />}
-              />
-            )}
-          </InputRightElement>
-        </InputGroup>
-        <Button colorScheme='blue'>Create Account</Button>
-      </div>
-    </Center>
+    <Box width="100vw" height="100vh" position="relative">
+      <Center width="100%" height="100%" style = {{backgroundSize: "cover", backgroundImage: "url('/images/paw_prints_bg.png')"}} >
+        <Flex direction="column" justify="center" align="center" gap="8.125rem">
+          <Flex direction="column" justify="center" align="center" gap="2.1875rem">
+            <Center w="27.29081rem" h="13.9375rem" bg="#2C5282" borderRadius="2.6875rem">
+              <Image src = "/images/humane_society_logo_text.png" alt = "Humane Society Logo" width="23.20138rem" height="12.01794rem" objectFit="cover" />
+            </Center>
+            <Heading color= "#4A5568" fontFamily="Poppins">Welcome!</Heading>
+            <Stack spacing="1.625rem" width="100%">
+              <Input placeholder="[email protected]" bg="#FFFFFF"/>
+              <InputGroup size="md">
+                <Input
+                  pr="2rem"
+                  type={showCreatePassword ? "text" : "password"}
+                  placeholder="Enter password"
+                  bg="#FFFFFF"
+                />
+                <InputRightElement width="2rem">
+                  {showCreatePassword ? (
+                    <IconButton
+                      variant="unstyled"
+                      isRound
+                      bg="transparent"
+                      onClick={handleCreatePasswordClick}
+                      aria-label="view"
+                      icon={<ViewIcon />}
+                    />
+                  ) : (
+                    <IconButton
+                      variant="unstyled"
+                      isRound
+                      bg="transparent"
+                      onClick={handleCreatePasswordClick}
+                      aria-label="hide"
+                      icon={<ViewOffIcon />}
+                    />
+                  )}
+                </InputRightElement>
+              </InputGroup>
+              <InputGroup size="md">
+                <Input
+                  pr="2rem"
+                  type={showConfirmPassword ? "text" : "password"}
+                  placeholder="Confirm password"
+                  bg="#FFFFFF"
+                />
+                <InputRightElement width="2rem">
+                  {showConfirmPassword ? (
+                    <IconButton
+                      variant="unstyled"
+                      isRound
+                      bg="transparent"
+                      onClick={handleConfirmPasswordClick}
+                      aria-label="view"
+                      icon={<ViewIcon />}
+                    />
+                  ) : (
+                    <IconButton
+                      variant="unstyled"
+                      isRound
+                      bg="transparent"
+                      onClick={handleConfirmPasswordClick}
+                      aria-label="hide"
+                      icon={<ViewOffIcon />}
+                    />
+                  )}
+                </InputRightElement>
+              </InputGroup>
+            </Stack>
+          </Flex>
+          <Button colorScheme='blue' w="27.25rem" h="3.0625rem" bg="var(--blue-700, #2C5282)">Create Account</Button>
+        </Flex>
+      </Center> 
+    </Box>
   );
 };
 
-export default CreatePasswordPage;
+export default CreatePasswordPage;