Backend

frontend/src/App.tsx

@@ -5,6 +5,7 @@ import LoginPage from "./pages/LoginPage";
 import RegisterPage from "./pages/RegisterPage";
 import ToiletDetails from "./pages/ToiletDetailsPage";
 import ProfilePage from "./pages/ProfilePage";
+import SettingsPage from "./pages/SettingsPage";
 
 const App = () => {
 return (
@@ -16,6 +17,7 @@ return (
     <Route path="/register" element={<RegisterPage />} />
     <Route path="/toiletdeets/:id" element={<ToiletDetails />} />
     <Route path="/profile" element={<ProfilePage />} />
+    <Route path="/settings" element={<SettingsPage />} />
   </Routes>
   </BrowserRouter>
 )

frontend/src/pages/ExplorePage.tsx

@@ -145,8 +145,8 @@ export const ToiletCard = styled.div`
 
 export const ToiletCardImage = styled.img`
   object-position: center;
-  width: 300px;
-  height: 300px;
+  width: 250px;
+  height: 250px;
   overflow: hidden;
   position: relative;
   border-radius: 5%;
@@ -413,6 +413,7 @@ const ExplorePage = () => {
         console.log(error);
       });
   }, []);
+
   const newFilteredToilets = toilets
     .filter((toilet) => {
       if (searchInput === '') {
@@ -434,7 +435,7 @@ const ExplorePage = () => {
       } else if (favourite === 'Favourite' && toilet.favourited === 'true') {
         return toilet;
       }
-    });
+  });
 
   let remainder = 0;
   if (newFilteredToilets.length > 0) {
@@ -536,7 +537,7 @@ const ExplorePage = () => {
                 ) : (
                   <>
                     <Link to="/profile">Profile</Link>
-                    <div onClick={() => handleItemClick('Settings')}>Settings</div>
+                    <Link to="/settings">Settings</Link>
                     <div onClick={handleLogout}>
                       Logout
                     </div>

frontend/src/pages/LandingPage.tsx

@@ -63,6 +63,11 @@ const BtnLogin = styled.div`
   z-index: 1000;
 `
 
+const ImageBox = styled.img`
+  width: 600px;
+  height: auto;
+`
+
 const BtnText = styled.div`
   font-size: 2em;
 `
@@ -98,7 +103,7 @@ const LandingPage = () => {
       </TopHeader>
       <Center>
         <Lines>
-          <img src={logo}/>
+          <ImageBox src={logo}/>
           <h2>Finding your Perfect Shit</h2>
         </Lines>
         <ToiletBtn>

frontend/src/pages/LoginPage.tsx

@@ -93,6 +93,11 @@ const FindBtn = styled.button`
   }
 `;
 
+const ImageBox = styled.img`
+  width: 600px;
+  height: auto;
+`
+
 const Spacing = styled.div`
   height: 100px;
   width: 100%;
@@ -153,12 +158,11 @@ const LoginPage = () => {
       <BackBtn onClick={() => window.history.back()}><ArrowBackIcon></ArrowBackIcon></BackBtn>
       <Center>
         <Lines onSubmit={handleSubmit}>
-          <img src={logo} onClick={() => navigate("/explore")}/>
+          <ImageBox src={logo} onClick={() => navigate("/explore")}/>
           <Input type="text" name="email" placeholder="Email" onChange={handleChange}></Input>
-          <Input type="text" name="password" placeholder="Password" onChange={handleChange}></Input>
-          {error && <div style={{ color: 'red' }}>{error}</div>}
-          <FindBtn type="submit">Login</FindBtn>
+          <Input type="password" name="password" placeholder="Password" onChange={handleChange}></Input>
           {errorMessage !== '' &&<ErrorMessage>{errorMessage}</ErrorMessage>}
+          <FindBtn type="submit">Login</FindBtn>
           <Spacing></Spacing>
           <Register>
             Don't have an account? <RegisterBtn to="/register">Register</RegisterBtn>

frontend/src/pages/RegisterPage.tsx

@@ -91,6 +91,11 @@ const FindBtn = styled.button`
   }
 `;
 
+const ImageBox = styled.img`
+  width: 600px;
+  height: auto;
+`
+
 const ErrorMessage = styled.div`
   color: red;
 `
@@ -148,12 +153,12 @@ const RegisterPage = () => {
       <BackBtn onClick={() => navigate("/")}><HomeIcon></HomeIcon></BackBtn>
       <Center>
         <Lines onSubmit={handleSubmit}>
-          <img src={logo} />
+          <ImageBox src={logo} onClick={() => window.history.back()}/>
           <Input type="text" name="email" placeholder="Email" onChange={handleChange}></Input>
-          <Input type="text" name="password" placeholder="Password" onChange={handleChange}></Input>
+          <Input type="password" name="password" placeholder="Password" onChange={handleChange}></Input>
           <Input type="text" name="name" placeholder="Name" onChange={handleChange}></Input>
-          <FindBtn type="submit">Register</FindBtn>
           {errorMessage !== '' &&<ErrorMessage>{errorMessage}</ErrorMessage>}
+          <FindBtn type="submit">Register</FindBtn>
           <Spacing></Spacing>
           <Register>
             Already got an account? <RegisterBtn href="/login">Login</RegisterBtn>

frontend/src/pages/SettingsPage.tsx

@@ -0,0 +1,88 @@
+import styled from 'styled-components';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+
+const Center = styled.div`
+  position: absolute;
+  display: flex;
+  gap: 5%;
+  top: 50%;
+  left: 50%;
+  width: 65vw;
+  height: 65vh;
+  transform: translate(-50%, -50%);
+  border-radius: 40px;
+  background-color: white;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+  padding: 40px;
+`;
+
+const StyledBackground = styled.div`
+  background-image: url('/src/assets/whiteness.gif');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: -100;
+`;
+
+
+const BackBtn = styled.button`
+  background-color: #a18276;
+  color: white;
+  border: none;
+  border-radius: 15px;
+  padding: 10px 60px 10px 60px;
+  box-shadow: 0px 4px 13px grey;
+  cursor: pointer;
+  text-decoration: none;
+  margin: 20px;
+  width: 9vw;
+  height: 6vh;
+  text-align: center;
+  font-size: 15px;
+
+  &:hover {
+    background-color: #C19D8F;
+    transition: background-color 0.3s
+  }
+`
+
+const SettingsOptions = styled.div`
+    width: 30%;
+    height: 90%;  
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+`
+
+const IndividualSettingOption = styled.div`
+    color: gray;
+    font-size: 30px;
+`
+
+const ImageBox = styled.img`
+    width: 300px;
+    height: auto;
+`
+
+const SettingsPage = () => {
+    return (
+        <>
+            <StyledBackground/>
+            <BackBtn onClick={() => window.history.back()}><ArrowBackIcon></ArrowBackIcon></BackBtn>
+            <Center>
+                <SettingsOptions>
+                    <IndividualSettingOption>Languages</IndividualSettingOption>
+                    <IndividualSettingOption>Display Settings</IndividualSettingOption>
+                </SettingsOptions>
+                <ImageBox src={'/src/assets/robbery1.jpg'}></ImageBox>
+                <ImageBox src={'/src/assets/robbery2.jpg'}></ImageBox>
+            </Center>
+        </>
+    )
+}
+
+export default SettingsPage;

frontend/src/pages/ToiletDetailsPage.tsx

@@ -457,6 +457,13 @@ const FillerBox2 = styled.div`
     padding-top: 1vh;
 `
 
+const LoadingImage = styled.img`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+`
+
 const ToiletDetails = () => {
     type Arrangement = 'Most Liked' | 'Most Recent'
 
@@ -695,6 +702,8 @@ const ToiletDetails = () => {
         const stringEnjoyment = JSON.stringify(EnjoymentValue);
         const stringUsefulness = JSON.stringify(UsefulnessValue);
         const stringManageability = JSON.stringify(ManageabilityValue);
+
+        console.log(stringEnjoyment + stringUsefulness + stringManageability);
         try {
             const response = await axios.post(`http://localhost:6969/auth/toilets/review/${id}`, {
                 reviewTitle,
@@ -726,19 +735,15 @@ const ToiletDetails = () => {
             console.log('Error fetching data', error);
         }
     };
-
-    useEffect(() => {
-        fetchToilets();
-    }, []);
-
+
     useEffect(() => {
         fetchToilets();
     }, [reloadCount]);
 
     const toiletDetail = toilets.find(toilet => toilet.toiletId === id);
 
     if (!toiletDetail) {
-        return <div>Sorry, toilet not found!</div>;
+        return <LoadingImage src={'/src/assets/loading.gif'}/>;
     }
 
     const reviews: Review[] = toiletDetail.reviews;