Changed bg implementation

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

@@ -13,15 +13,23 @@ const ResponsiveAuthContainer = ({
       padding={{
         base: "2.25rem",
         md: "2.5rem",
-      }}
+      }} 
       background="var(--gray-100, #EDF2F7)"
       borderRadius="0.375rem"
+      justifyContent="center"
     >
       <Box
         display="inline-flex"
         flexDirection="column"
         gap={{ base: "1.12rem", md: "1rem" }}
         width={{ md: "16rem" }}
+        sx={{
+          "@media (orientation: portrait)": {
+            width: { 
+              md: "16rem",
+            },
+          },
+          }} 
         justifyContent="center"
       >
         {children}

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

@@ -25,6 +25,7 @@ const ResponsiveModalWindow = ({
         gap={{ base: "1rem", md: "2.8125rem" }}
         maxWidth={{ base: "21.375rem", md: "none" }}
         padding={{ base: "1.38rem 2.38rem", md: "3.6875rem 10.5rem" }}
+        borderRadius="0.375rem"
       >
         {children}
       </Flex>

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

@@ -1,3 +1,5 @@
+// NOT CURRENTLY BEING USED IN PROD
+// USED IN CASE YOU NEED TO ROTATE A BACKGROUND IMAGE
 import React from "react";
 import { Box, Flex } from "@chakra-ui/react";
 
@@ -16,19 +18,25 @@ const ResponsivePawprintBackground = (): React.ReactElement => {
         position="absolute"
         top="50%"
         left="50%"
-        width={{ base: "200vw", md: "100%" }}
-        height={{ base: "200vh", md: "100%" }}
-        transform={{
-          base: "translate(-50%, -50%) rotate(-15deg)",
-          md: "translate(-50%, -50%)",
-        }}
         sx={{
-          backgroundImage: "url('/images/paw_prints_bg.svg')",
-          backgroundSize: { base: "contain", md: "130%" },
+          backgroundImage: "url('/images/pawprint_background.png')",
           backgroundRepeat: "no-repeat",
           backgroundColor: "var(--blue-700, #2C5282)",
           backgroundPosition: "center",
           zIndex: -1,
+
+          "@media (orientation: portrait)": {
+            transform: "translate(-50%, -50%) rotate(-15deg)",
+            backgroundSize: "contain",
+            width: "200vw",
+            height: "200vh",
+          },
+          "@media (orientation: landscape)": {
+            transform: "translate(-50%, -50%)",
+            backgroundSize: "130%",
+            width: "100%",
+            height: "100%",
+          },
         }}
       />
     </Flex>

frontend/src/components/pages/CreatePasswordPage.tsx

@@ -8,17 +8,22 @@ import {
   Box,
   Text,
   FormLabel,
+  FormControl,
+  FormErrorMessage,
 } 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";
+import background from "../assets/background.png";
+import backgroundMobile from "../assets/background_mobile.png";
 
 const CreatePasswordPage = (): React.ReactElement => {
   const [showModal, setShowModal] = React.useState(false);
   const [password, setPassword] = React.useState("");
   const [confirmPassword, setConfirmPassword] = React.useState("");
+  const [confirmPasswordError, setConfirmPasswordError] = React.useState("");
+  const [passwordError, setPasswordError] = React.useState("");
 
   const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setPassword(event.target.value);
@@ -28,20 +33,51 @@ const CreatePasswordPage = (): React.ReactElement => {
   ) => {
     setConfirmPassword(event.target.value);
   };
+
+  const validatePasswords = () => {
+    setPasswordError("");
+    setConfirmPasswordError("");
+    let hasErrors: boolean = false;
+    if (password.length < 8) {
+      hasErrors = true;
+      setPasswordError("Password must be at least 8 characters long.");
+    }
+    if (confirmPassword && password !== confirmPassword) {
+      hasErrors = true;
+      setConfirmPasswordError("Passwords do not match.");
+    }
+    if (confirmPassword.length < 8) {
+      hasErrors = true;
+      setConfirmPasswordError("Password must be at least 8 characters long.");
+    }
+    return hasErrors;
+  };
+
   const handleCreateAccount = () => {
+    if (validatePasswords()) {
+      return;
+    }
     setShowModal(true);
   };
   return (
-    <Flex maxWidth="100vw" height="100vh" position="relative"
-    sx={{
-      '@media (orientation: landscape)': {
-        height: 'auto',       // Adjust height in landscape
-        minHeight: '100vh',   // Ensure it is at least viewport height
-        overflowY: 'auto',    // Enable scrolling in landscape
-      }
-    }}>
+    <Flex
+      maxWidth="100vw"
+      height="100vh"
+      position="relative"
+      backgroundRepeat = "no-repeat"
+      backgroundPosition="center"
+      backgroundSize="cover"
+      backgroundImage={`url(${backgroundMobile})`}
+      sx={{
+        "@media (orientation: landscape)": {
+          height: "auto",
+          minHeight: "100vh",
+          overflowY: "auto",
+          backgroundImage: `url(${background})`,
+        },
+      }}
+    >
       <Center flex="1">
-        <ResponsivePawprintBackground />
         <Flex
           gap="2.2rem"
           direction="column"
@@ -86,10 +122,15 @@ const CreatePasswordPage = (): React.ReactElement => {
                   >
                     Create Password:
                   </FormLabel>
-                  <ResponsivePasswordInput
-                    value={password}
-                    onChange={handlePasswordChange}
-                  />
+                  <FormControl isInvalid={!!passwordError}>
+                    <ResponsivePasswordInput
+                      value={password}
+                      onChange={handlePasswordChange}
+                    />
+                    <FormErrorMessage fontSize="12px">
+                      {passwordError}
+                    </FormErrorMessage>
+                  </FormControl>
                 </Box>
                 <Box fontSize="12px">
                   <FormLabel
@@ -99,18 +140,22 @@ const CreatePasswordPage = (): React.ReactElement => {
                   >
                     Confirm Password:
                   </FormLabel>
-                  <ResponsivePasswordInput
-                    value={confirmPassword}
-                    onChange={handleConfirmPasswordChange}
-                  />
+                  <FormControl isInvalid={!!confirmPasswordError}>
+                    <ResponsivePasswordInput
+                      value={confirmPassword}
+                      onChange={handleConfirmPasswordChange}
+                    />
+                    <FormErrorMessage fontSize="12px">
+                      {confirmPasswordError}
+                    </FormErrorMessage>
+                  </FormControl>
                 </Box>
               </Stack>
               <Button
+                type="submit"
                 fontSize="14px"
                 onClick={handleCreateAccount}
-                colorScheme="blue"
-                pl={{ base: "0.94rem", md: "1.875rem" }}
-                pr={{ base: "0.94rem", md: "1.875rem" }}
+                color="white"
                 h="2.4rem"
                 width="100%"
                 bg="var(--blue-700, #2C5282)"