From 866474e3ecc265ea04d921d5b04d0c9e7ff62e20 Mon Sep 17 00:00:00 2001
From: Anumoy Nandy <anumoynandyanunan2021@gmail.com>
Date: Thu, 4 Jan 2024 02:52:23 +0530
Subject: [PATCH 1/2] Integrated MUI & friendspage wip

---
 frontend/src/components/FriendsPage.jsx | 181 ++++-
 frontend/src/components/Map.jsx         |  26 +-
 frontend/src/styles/FriendsPage.css     |  36 +-
 frontend/src/styles/UserBanner.css      |   3 +-
 package-lock.json                       | 967 ++++++++++++++++++++++--
 package.json                            |  13 +-
 6 files changed, 1138 insertions(+), 88 deletions(-)

diff --git a/frontend/src/components/FriendsPage.jsx b/frontend/src/components/FriendsPage.jsx
index a46e98b..33f0fe5 100644
--- a/frontend/src/components/FriendsPage.jsx
+++ b/frontend/src/components/FriendsPage.jsx
@@ -1,5 +1,16 @@
 import React, { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
+import Box from '@mui/material/Box'
+import TextField from '@mui/material/TextField'
+import MenuItem from '@mui/material/MenuItem'
+import FormGroup from '@mui/material/FormGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Checkbox from '@mui/material/Checkbox'
+import Stack from '@mui/material/Stack'
+import Button from '@mui/material/Button'
+import GroupAddRoundedIcon from '@mui/icons-material/GroupAddRounded'
+import PeopleAltRoundedIcon from '@mui/icons-material/PeopleAltRounded'
+import TravelExploreRoundedIcon from '@mui/icons-material/TravelExploreRounded'
 import UserCard from './UserCard'
 import UserBanner from './UserBanner'
 import '../styles/FriendsPage.css'
@@ -17,6 +28,40 @@ function FriendsPage() {
 	const [users, setUsers] = useState([])
 	const [changePic, setChangePic] = useState(false)
 
+	const colleges = [
+		{
+			value: 'Jadavpur University',
+			label: 'Jadavpur University',
+		},
+		{
+			value: 'Calcutta University',
+			label: 'Calcutta University',
+		},
+		{
+			value: 'Presidency University',
+			label: 'Presidency University',
+		},
+		{
+			value: 'Kalyani University',
+			label: 'Kalyani University',
+		},
+	]
+
+	const genders = [
+		{
+			value: 'Male',
+			label: 'Male',
+		},
+		{
+			value: 'Female',
+			label: 'Female',
+		},
+		{
+			value: 'Non Binary',
+			label: 'Non Binary',
+		},
+	]
+
 	useEffect(() => {
 		fetch(
 			`${BASE_API_URI}/api/user/${
@@ -66,26 +111,121 @@ function FriendsPage() {
 		if (localStorage.getItem('user')) {
 			return (
 				<>
-					<div className='button-container'>
-						<button
-							type='button'
-							className='large-button'
-							onClick={() => {
-								navigate('/client')
-							}}
-						>
-							Go To Map
-						</button>
-					</div>
-					<div className='user-banner'>
-						<UserBanner
-							key={curruser.username}
-							username={curruser.username}
-							name={curruser.name}
-							dpLink={curruser.Photo ? curruser.Photo : defaultPicLink}
-						/>
-					</div>
-					<div className='friends-modal'>
+					<div className='container'>
+						<div className='button-container'>
+							<Button
+								variant='outlined'
+								onClick={() => {
+									navigate('/client')
+								}}
+								startIcon={<TravelExploreRoundedIcon />}
+							>
+								Go To Map
+							</Button>
+						</div>
+						<div className='user-banner'>
+							<UserBanner
+								key={curruser.username}
+								username={curruser.username}
+								name={curruser.name}
+								dpLink={curruser.Photo ? curruser.Photo : defaultPicLink}
+							/>
+						</div>
+						<div className='option-container'>
+							<div className='form-container'>
+								<Box
+									component='form'
+									sx={{
+										'& .MuiTextField-root': { m: 1, width: '25ch' },
+									}}
+									noValidate
+									autoComplete='off'
+								>
+									<div>
+										<TextField
+											required
+											id='outlined-number'
+											label='Required'
+											type='number'
+											InputLabelProps={{
+												shrink: true,
+											}}
+											helperText='Please select your age'
+										/>
+									</div>
+								</Box>
+
+								<Box
+									component='form'
+									sx={{
+										'& .MuiTextField-root': { m: 1, width: '25ch' },
+									}}
+									noValidate
+									autoComplete='off'
+								>
+									<div>
+										<TextField
+											id='outlined-select-gender'
+											select
+											label='Required'
+											required
+											defaultValue='Male'
+											helperText='Please select your gender'
+										>
+											{genders.map(option => (
+												<MenuItem key={option.value} value={option.value}>
+													{option.label}
+												</MenuItem>
+											))}
+										</TextField>
+									</div>
+								</Box>
+
+								<Box
+									component='form'
+									sx={{
+										'& .MuiTextField-root': { m: 1, width: '25ch' },
+									}}
+									noValidate
+									autoComplete='off'
+								>
+									<div>
+										<TextField
+											id='outlined-select-college'
+											select
+											label='Required'
+											required
+											defaultValue='Jadavpur University'
+											helperText='Please select your college'
+										>
+											{colleges.map(option => (
+												<MenuItem key={option.value} value={option.value}>
+													{option.label}
+												</MenuItem>
+											))}
+										</TextField>
+									</div>
+								</Box>
+							</div>
+							<div className='checkbox-container'>
+								<FormGroup>
+									<FormControlLabel
+										control={<Checkbox defaultChecked />}
+										label='Show my visibility'
+									/>
+								</FormGroup>
+							</div>
+							<Stack direction='row' spacing={3}>
+								<Button variant='outlined' startIcon={<PeopleAltRoundedIcon />}>
+									My Friends
+								</Button>
+								<Button variant='contained' endIcon={<GroupAddRoundedIcon />}>
+									Add Friends
+								</Button>
+							</Stack>
+						</div>
+
+						{/* <div className='friends-modal'>
 						{users.length > 0 &&
 							users.map(user => (
 								<UserCard
@@ -98,6 +238,7 @@ function FriendsPage() {
 									curruser={curruser}
 								/>
 							))}
+					</div> */}
 					</div>
 				</>
 			)
diff --git a/frontend/src/components/Map.jsx b/frontend/src/components/Map.jsx
index a425b63..d64473e 100644
--- a/frontend/src/components/Map.jsx
+++ b/frontend/src/components/Map.jsx
@@ -131,17 +131,21 @@ function Map() {
 						zoom={18.25}
 					>
 						<Marker position={{ lat: location.lat, lng: location.lng }} />
-						{/* <Marker position={{
-                            lat: 22.549152,
-                            lng: 88.378260,
-                        }} /> */}
-						{/* <Marker position={{
-                            lat: 22.559132,
-                            lng: 88.388270,
-                        }} /> */}
-						{locationArray.map(loc => {
-							;<Marker position={{ lat: loc.lat, lng: loc.lng }} />
-						})}
+						<Marker
+							position={{
+								lat: 22.54905,
+								lng: 88.37816,
+							}}
+						/>
+						<Marker
+							position={{
+								lat: 22.559132,
+								lng: 88.38827,
+							}}
+						/>
+						{/* {locationArray.map(loc => {
+							; <Marker position={{ lat: loc.lat, lng: loc.lng }} />
+						})} */}
 					</GoogleMap>
 				</div>
 				<div className='button-container'>
diff --git a/frontend/src/styles/FriendsPage.css b/frontend/src/styles/FriendsPage.css
index 01fbfdc..b395cf9 100644
--- a/frontend/src/styles/FriendsPage.css
+++ b/frontend/src/styles/FriendsPage.css
@@ -1,7 +1,10 @@
-.friends-container {
+.container {
 	background-color: #f0f2f5;
-	max-width: 100vw;
-	overflow: scroll;
+	min-height: 100vh;
+}
+
+.friends-container {
+	min-width: 100vw;
 }
 
 .friends-modal {
@@ -41,3 +44,30 @@
 	background-color: #2980b9;
 	/* Change color on hover */
 }
+
+.option-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.form-container {
+	padding: 3rem;
+	margin-top: 5rem;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+}
+
+.checkbox-container {
+	padding: 2rem;
+}
+
+.button-container-2 {
+	padding: 2rem;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+}
diff --git a/frontend/src/styles/UserBanner.css b/frontend/src/styles/UserBanner.css
index fe11620..5a3a594 100644
--- a/frontend/src/styles/UserBanner.css
+++ b/frontend/src/styles/UserBanner.css
@@ -28,7 +28,8 @@
 	display: flex;
 	flex: 0 0 70%;
 	flex-direction: column;
-	justify-content: left;
+	justify-content: center;
+	/* align-items: center; */
 }
 
 .user-full-name > h1 {
diff --git a/package-lock.json b/package-lock.json
index 788aac7..8cffcf4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,12 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@emotion/react": "^11.11.3",
+        "@emotion/styled": "^11.11.0",
+        "@fontsource/roboto": "^5.0.8",
+        "@mui/icons-material": "^5.15.3",
+        "@mui/material": "^5.15.3",
+        "@mui/styled-engine-sc": "^6.0.0-alpha.11",
         "@react-google-maps/api": "^2.19.2",
         "@react-oauth/google": "^0.12.1",
         "bcryptjs": "^2.4.3",
@@ -32,6 +38,7 @@
         "react-toastify": "^9.1.3",
         "socket.io": "^4.7.2",
         "socket.io-client": "^4.7.2",
+        "styled-components": "^6.1.6",
         "validator": "^13.11.0"
       },
       "devDependencies": {
@@ -39,8 +46,10 @@
         "crypto-browserify": "^3.12.0",
         "eslint": "^8.56.0",
         "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jsx-a11y": "^6.8.0",
+        "eslint-plugin-prettier": "^5.1.2",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "events": "^3.3.0",
@@ -55,6 +64,7 @@
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
       "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -63,7 +73,6 @@
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.4.tgz",
       "integrity": "sha512-r1IONyb6Ia+jYR2vvIDhdWdlTGhqbBoFqLTQidzZ4kepUFH15ejXvFHxCVbtl7BOXIudsIubf4E81xeA3h3IXA==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.23.4",
         "chalk": "^2.4.2"
@@ -72,11 +81,29 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "dependencies": {
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.22.20",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
       "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -85,7 +112,6 @@
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
       "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -99,7 +125,6 @@
       "version": "7.23.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz",
       "integrity": "sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -110,13 +135,178 @@
     "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
+    "node_modules/@babel/types": {
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
+      "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.3",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.3.tgz",
+      "integrity": "sha512-Cnn0kuq4DoONOMcnoVsTOR8E+AdnKFf//6kUWc4LCdnxj31pZWn7rIULd6Y7/Js1PiPHzn7SKCM9vB/jBni8eA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.3.tgz",
+      "integrity": "sha512-iD4D6QVZFDhcbH0RAG1uVu1CwVLMWUkCvAqqlewO/rxf8+87yIBAlt4+AxMiiKPLs5hFc0owNk/sLLAOROw3cA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
       "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "dev": true,
       "dependencies": {
         "eslint-visitor-keys": "^3.3.0"
       },
@@ -131,6 +321,7 @@
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
       "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
+      "dev": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
@@ -139,6 +330,7 @@
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
       "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+      "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -161,10 +353,50 @@
       "version": "8.56.0",
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
       "integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
+      "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz",
+      "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz",
+      "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
+    "node_modules/@fontsource/roboto": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.0.8.tgz",
+      "integrity": "sha512-XxPltXs5R31D6UZeLIV1td3wTXU3jzd3f2DLsXI8tytMGBkIsGcc9sIyiupRtA8y73HAhuSCeweOoBqf6DbWCA=="
+    },
     "node_modules/@googlemaps/js-api-loader": {
       "version": "1.16.2",
       "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz",
@@ -186,6 +418,7 @@
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
       "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
+      "dev": true,
       "dependencies": {
         "@humanwhocodes/object-schema": "^2.0.1",
         "debug": "^4.1.1",
@@ -199,6 +432,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
       "engines": {
         "node": ">=12.22"
       },
@@ -210,7 +444,8 @@
     "node_modules/@humanwhocodes/object-schema": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
-      "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw=="
+      "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
+      "dev": true
     },
     "node_modules/@lezer/common": {
       "version": "1.1.1",
@@ -405,10 +640,311 @@
         "win32"
       ]
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.30",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.30.tgz",
+      "integrity": "sha512-dc38W4W3K42atE9nSaOeoJ7/x9wGIfawdwC/UmMxMLlZ1iSsITQ8dQJaTATCbn98YvYPINK/EH541YA5enQIPQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6",
+        "@floating-ui/react-dom": "^2.0.4",
+        "@mui/types": "^7.2.12",
+        "@mui/utils": "^5.15.3",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.0.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/base/node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.3.tgz",
+      "integrity": "sha512-sWeihiVyxdJjpLkp8SHkTy9kt2M/o11M60G1MzwljGL2BXdM3Ktzqv5QaQHdi00y7Y1ulvtI3GOSxP2xU8mQJw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.3.tgz",
+      "integrity": "sha512-7LEs8AnO2Se/XYH+CcJndRsGAE+M8KAExiiQHf0V11poqmPVGcbbY82Ry2IUYf9+rOilCVnWI18ErghZ625BPQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.3.tgz",
+      "integrity": "sha512-DODBBMouyq1B5f3YkEWL9vO8pGCxuEGqtfpltF6peMJzz/78tJFyLQsDas9MNLC/8AdFu2BQdkK7wox5UBPTAA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6",
+        "@mui/base": "5.0.0-beta.30",
+        "@mui/core-downloads-tracker": "^5.15.3",
+        "@mui/system": "^5.15.3",
+        "@mui/types": "^7.2.12",
+        "@mui/utils": "^5.15.3",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.3.tgz",
+      "integrity": "sha512-Q79MhVMmywC1l5bMsMZq5PsIudr1MNPJnx9/EqdMP0vpz5iNvFpnLmxsD7d8/hqTWgFAljI+LH3jX8MxlZH9Gw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6",
+        "@mui/utils": "^5.15.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.3.tgz",
+      "integrity": "sha512-+d5XZCTeemOO/vBfWGEeHgTm8fjU1Psdgm+xAw+uegycO2EnoA/EfGSaG5UwZ6g3b66y48Mkxi35AggShMr88w==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine-sc": {
+      "version": "6.0.0-alpha.11",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-6.0.0-alpha.11.tgz",
+      "integrity": "sha512-lIb2olqCtltv9XtjbDr4ZkAcSh/d72edWLD/TN6+FpTGy0gOAhWdYaAx9+0l5cyb+XYP13tvAAk3tdTl5g1N6w==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6",
+        "csstype": "^3.1.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "styled-components": "^6.0.0"
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.3.tgz",
+      "integrity": "sha512-ewVU4eRgo4VfNMGpO61cKlfWmH7l9s6rA8EknRzuMX3DbSLfmtW2WJJg6qPwragvpPIir0Pp/AdWVSDhyNy5Tw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6",
+        "@mui/private-theming": "^5.15.3",
+        "@mui/styled-engine": "^5.15.3",
+        "@mui/types": "^7.2.12",
+        "@mui/utils": "^5.15.3",
+        "clsx": "^2.0.0",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system/node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.12",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.12.tgz",
+      "integrity": "sha512-3kaHiNm9khCAo0pVe0RenketDSFoZGAlVZ4zDjB/QNZV0XiCj+sh1zkX0VVhQPgYJDlBEzAag+MHJ1tU3vf0Zw==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.3.tgz",
+      "integrity": "sha512-mT3LiSt9tZWCdx1pl7q4Q5tNo6gdZbvJel286ZHGuj6LQQXjWNAh8qiF9d+LogvNUI+D7eLkTnj605d1zoazfg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.6",
+        "@types/prop-types": "^15.7.11",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -421,6 +957,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -429,6 +966,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -2259,6 +2797,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.0.tgz",
       "integrity": "sha512-Zwq5OCzuwJC2jwqmpEQt7Ds1DTi6BWSwoGkbb1n9pO3hzb35BoJELx7c0T23iDkBGkh2e7tvOtjF3tr3OaQHDQ==",
+      "dev": true,
       "engines": {
         "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
       },
@@ -2266,6 +2805,15 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@react-google-maps/api": {
       "version": "2.19.2",
       "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.19.2.tgz",
@@ -2558,6 +3106,44 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.11",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
+      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
+    },
+    "node_modules/@types/react": {
+      "version": "18.2.46",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.46.tgz",
+      "integrity": "sha512-nNCvVBcZlvX4NU1nRRNV/mFl1nNRuTuslAJglQsq+8ldXe5Xv0Wd2f7WTE3jOxhLH2BFfiZGC6GCp+kHQbgG+w==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
+    },
+    "node_modules/@types/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw=="
+    },
     "node_modules/@types/webidl-conversions": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz",
@@ -2575,7 +3161,8 @@
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+      "dev": true
     },
     "node_modules/abbrev": {
       "version": "1.1.1",
@@ -2604,6 +3191,7 @@
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
       "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2615,6 +3203,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
@@ -2623,6 +3212,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2638,6 +3228,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2668,7 +3259,8 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
     },
     "node_modules/aria-query": {
       "version": "5.3.0",
@@ -2868,6 +3460,35 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3179,6 +3800,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001565",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz",
@@ -3326,6 +3955,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
     "node_modules/cookie": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
@@ -3424,6 +4058,7 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -3455,6 +4090,14 @@
         "node": "*"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-select": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
@@ -3536,6 +4179,16 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
@@ -3602,6 +4255,11 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -3627,7 +4285,8 @@
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
-      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true
     },
     "node_modules/define-data-property": {
       "version": "1.1.1",
@@ -3728,6 +4387,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
       "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
       "dependencies": {
         "esutils": "^2.0.2"
       },
@@ -3735,6 +4395,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -3926,7 +4595,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
@@ -4072,6 +4740,7 @@
       "version": "8.56.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz",
       "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
+      "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -4175,6 +4844,7 @@
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
       "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -4323,6 +4993,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.2.tgz",
       "integrity": "sha512-dhlpWc9vOwohcWmClFcA+HjlvUpuyynYs0Rf+L/P6/0iQE6vlHW9l5bkfzN62/Stm9fbq8ku46qzde76T1xlSg==",
+      "dev": true,
       "dependencies": {
         "prettier-linter-helpers": "^1.0.0",
         "synckit": "^0.8.6"
@@ -4432,6 +5103,7 @@
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
       "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -4447,6 +5119,7 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
       "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -4458,6 +5131,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -4472,6 +5146,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -4487,6 +5162,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -4497,12 +5173,14 @@
     "node_modules/eslint/node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
     },
     "node_modules/eslint/node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -4514,6 +5192,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -4525,6 +5204,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4533,6 +5213,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -4544,6 +5225,7 @@
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
       "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
       "dependencies": {
         "acorn": "^8.9.0",
         "acorn-jsx": "^5.3.2",
@@ -4560,6 +5242,7 @@
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
       "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "dev": true,
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -4571,6 +5254,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -4582,6 +5266,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -4590,6 +5275,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4740,22 +5426,26 @@
     "node_modules/fast-diff": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw=="
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
     },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true
     },
     "node_modules/fastq": {
       "version": "1.16.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.16.0.tgz",
       "integrity": "sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==",
+      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -4764,6 +5454,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
       "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
       "dependencies": {
         "flat-cache": "^3.0.4"
       },
@@ -4812,10 +5503,16 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
       "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
       "dependencies": {
         "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
@@ -4831,6 +5528,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
       "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+      "dev": true,
       "dependencies": {
         "flatted": "^3.2.9",
         "keyv": "^4.5.3",
@@ -4843,7 +5541,8 @@
     "node_modules/flatted": {
       "version": "3.2.9",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
-      "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ=="
+      "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
+      "dev": true
     },
     "node_modules/for-each": {
       "version": "0.3.3",
@@ -4873,7 +5572,8 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -4966,6 +5666,7 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -4996,6 +5697,7 @@
       "version": "13.23.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
       "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
+      "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -5035,7 +5737,8 @@
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true
     },
     "node_modules/has-bigints": {
       "version": "1.0.2",
@@ -5148,6 +5851,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/htmlnano": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/htmlnano/-/htmlnano-2.1.0.tgz",
@@ -5264,6 +5975,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
       "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==",
+      "dev": true,
       "engines": {
         "node": ">= 4"
       }
@@ -5292,6 +6004,7 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
       "engines": {
         "node": ">=0.8.19"
       }
@@ -5300,6 +6013,7 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -5357,8 +6071,7 @@
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
-      "dev": true
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
     },
     "node_modules/is-async-function": {
       "version": "2.0.0",
@@ -5430,7 +6143,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -5553,6 +6265,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
       "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -5682,7 +6395,8 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
     },
     "node_modules/iterator.prototype": {
       "version": "1.1.2",
@@ -5706,6 +6420,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -5716,23 +6431,25 @@
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true
     },
     "node_modules/json5": {
       "version": "2.2.3",
@@ -5826,6 +6543,7 @@
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -5852,6 +6570,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
       "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
       "dependencies": {
         "prelude-ls": "^1.2.1",
         "type-check": "~0.4.0"
@@ -6070,8 +6789,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/lmdb": {
       "version": "2.8.5",
@@ -6108,6 +6826,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
       "dependencies": {
         "p-locate": "^5.0.0"
       },
@@ -6156,7 +6875,8 @@
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
     },
     "node_modules/lodash.once": {
       "version": "4.1.1",
@@ -6471,10 +7191,28 @@
         "node-gyp-build-optional-packages-test": "build-test.js"
       }
     },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true
     },
     "node_modules/negotiator": {
       "version": "0.6.3",
@@ -6717,6 +7455,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -6725,6 +7464,7 @@
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
       "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
+      "dev": true,
       "dependencies": {
         "@aashutoshrathi/word-wrap": "^1.2.3",
         "deep-is": "^0.1.3",
@@ -6753,6 +7493,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -6767,6 +7508,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
       "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
       "dependencies": {
         "p-limit": "^3.0.2"
       },
@@ -6907,7 +7649,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
       "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -6939,6 +7680,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -6947,6 +7689,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6955,6 +7698,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -6962,8 +7706,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-to-regexp": {
       "version": "0.1.7",
@@ -6974,7 +7717,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -6998,8 +7740,7 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -7012,11 +7753,37 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/posthtml": {
       "version": "0.16.6",
@@ -7059,6 +7826,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
       "engines": {
         "node": ">= 0.8.0"
       }
@@ -7081,6 +7849,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
       "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
       "dependencies": {
         "fast-diff": "^1.1.2"
       },
@@ -7101,7 +7870,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -7171,6 +7939,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7259,8 +8028,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-refresh": {
       "version": "0.9.0",
@@ -7313,6 +8081,21 @@
         "react-dom": ">=16"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -7385,7 +8168,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -7410,6 +8192,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -7419,6 +8202,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
       "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dev": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -7443,6 +8227,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7640,10 +8425,16 @@
         "sha.js": "bin.js"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -7655,6 +8446,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -7752,9 +8544,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7882,6 +8671,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -7902,6 +8692,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       },
@@ -7909,6 +8700,58 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.6.tgz",
+      "integrity": "sha512-DgTLULSC29xpabJ24bbn1+hulU6vvGFQf4RPwBOJrm8WJFnN42yXpo5voBt3jDSJBa5tBd1L6PqswJjQ0wRKdg==",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.1",
+        "@emotion/unitless": "0.8.0",
+        "@types/stylis": "4.2.0",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.2",
+        "postcss": "8.4.31",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.1",
+        "tslib": "2.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
+    "node_modules/styled-components/node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
+    "node_modules/styled-components/node_modules/stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+    },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/supercluster": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
@@ -7932,7 +8775,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -7971,6 +8813,7 @@
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz",
       "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==",
+      "dev": true,
       "dependencies": {
         "@pkgr/core": "^0.1.0",
         "tslib": "^2.6.2"
@@ -7997,7 +8840,8 @@
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true
     },
     "node_modules/timsort": {
       "version": "0.3.0",
@@ -8005,6 +8849,14 @@
       "integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==",
       "dev": true
     },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -8073,12 +8925,14 @@
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
     },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
       "dependencies": {
         "prelude-ls": "^1.2.1"
       },
@@ -8090,6 +8944,7 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -8241,6 +9096,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -8314,6 +9170,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -8403,7 +9260,8 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
     },
     "node_modules/ws": {
       "version": "8.11.0",
@@ -8438,10 +9296,19 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
diff --git a/package.json b/package.json
index eaf254a..58920bb 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,12 @@
   },
   "homepage": "https://github.com/sanam2405/PrivacyNetwork",
   "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
+    "@mui/icons-material": "^5.15.3",
+    "@mui/material": "^5.15.3",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.11",
     "@react-google-maps/api": "^2.19.2",
     "@react-oauth/google": "^0.12.1",
     "bcryptjs": "^2.4.3",
@@ -55,6 +61,7 @@
     "react-toastify": "^9.1.3",
     "socket.io": "^4.7.2",
     "socket.io-client": "^4.7.2",
+    "styled-components": "^6.1.6",
     "validator": "^13.11.0"
   },
   "devDependencies": {
@@ -62,12 +69,12 @@
     "crypto-browserify": "^3.12.0",
     "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.2",
     "events": "^3.3.0",
     "os-browserify": "^0.3.0",
     "parcel": "^2.10.3",
@@ -78,4 +85,4 @@
   "browserslist": [
     "last 2 versions"
   ]
-}
\ No newline at end of file
+}

From 21b1f5ede3e9c93a669ba31aefd3612d32b54d85 Mon Sep 17 00:00:00 2001
From: Anumoy Nandy <anumoynandyanunan2021@gmail.com>
Date: Fri, 5 Jan 2024 03:07:37 +0530
Subject: [PATCH 2/2] Implemented filter buttons and input textfields

---
 .eslintrc.json                          |   3 +-
 backend/routes/user.js                  |  20 ++
 frontend/src/App.jsx                    |   2 +
 frontend/src/components/Client.jsx      |  13 +-
 frontend/src/components/FriendsCard.jsx |  84 ++++++++
 frontend/src/components/FriendsPage.jsx | 234 +++++++++++++++++---
 frontend/src/components/Login.jsx       |  31 +--
 frontend/src/components/LogoutModal.jsx |  68 ++++++
 frontend/src/components/Map.jsx         | 273 +++++++++++++++++++++---
 frontend/src/components/ProfilePic.jsx  | 126 +++++++++++
 frontend/src/components/Signup.jsx      |  30 +--
 frontend/src/components/UserBanner.jsx  | 106 +++++++--
 frontend/src/components/UserCard.jsx    |  33 ++-
 frontend/src/styles/FriendsPage.css     |  25 ++-
 frontend/src/styles/LogoutModal.css     | 126 +++++++++++
 frontend/src/styles/Map.css             |  15 ++
 frontend/src/styles/ProfilePic.css      | 108 ++++++++++
 frontend/src/styles/Signup_Login.css    |   4 +-
 frontend/src/styles/UserBanner.css      |  11 +
 frontend/src/styles/UserCard.css        |  35 +--
 package-lock.json                       |   9 +
 package.json                            |   1 +
 22 files changed, 1205 insertions(+), 152 deletions(-)
 create mode 100644 frontend/src/components/FriendsCard.jsx
 create mode 100644 frontend/src/components/LogoutModal.jsx
 create mode 100644 frontend/src/components/ProfilePic.jsx
 create mode 100644 frontend/src/styles/LogoutModal.css
 create mode 100644 frontend/src/styles/ProfilePic.css

diff --git a/.eslintrc.json b/.eslintrc.json
index 7f66b2e..db2b079 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -24,6 +24,7 @@
         "react/jsx-no-constructed-context-values": "warn",
         "react/no-unescaped-entities": "warn",
         "react-hooks/exhaustive-deps": "warn",
-        "array-callback-return": "warn"
+        "array-callback-return": "warn",
+        "jsx-a11y/no-noninteractive-element-interactions": "warn"
     }
 }
\ No newline at end of file
diff --git a/backend/routes/user.js b/backend/routes/user.js
index 37ffac3..9dd70a1 100644
--- a/backend/routes/user.js
+++ b/backend/routes/user.js
@@ -84,4 +84,24 @@ router.get('/allusers', requireLogin, async (req, res) => {
 	}
 })
 
+// save profile picture of users inside mongodb (through cloudinary)
+
+router.put('/uploadProfilePic', requireLogin, async (req, res) => {
+	try {
+		const userData = await User.findByIdAndUpdate(
+			req.user._id,
+			{
+				$set: { Photo: req.body.pic },
+			},
+			{
+				new: true,
+			},
+		)
+		res.status(200).json({ success: true })
+	} catch (error) {
+		console.log(error)
+		res.status(422).json({ error: 'Something went wrong...' })
+	}
+})
+
 module.exports = router
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 0860be8..8159972 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -5,6 +5,7 @@ import Signup from './components/Signup'
 import Login from './components/Login'
 import FriendsPage from './components/FriendsPage'
 import Client from './components/Client'
+import LogoutModal from './components/LogoutModal'
 import { LoginContext } from './context/LoginContext'
 
 require('dotenv').config()
@@ -29,6 +30,7 @@ function App() {
 							<Route path='/client' element={<Client />} />
 						</Routes>
 					</BrowserRouter>
+					{modalOpen ? <LogoutModal /> : ''}
 				</LoginContext.Provider>
 			</GoogleOAuthProvider>
 		</div>
diff --git a/frontend/src/components/Client.jsx b/frontend/src/components/Client.jsx
index 4e662de..a04ad34 100644
--- a/frontend/src/components/Client.jsx
+++ b/frontend/src/components/Client.jsx
@@ -1,8 +1,19 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import Map from './Map'
 
 function Client() {
-	return <Map />
+	const navigate = useNavigate()
+
+	const checker = () => {
+		if (localStorage.getItem('user') !== null) {
+			;<Map />
+		} else {
+			navigate('/login')
+		}
+	}
+
+	return <div>{checker()}</div>
 }
 
 export default Client
diff --git a/frontend/src/components/FriendsCard.jsx b/frontend/src/components/FriendsCard.jsx
new file mode 100644
index 0000000..fa6cc68
--- /dev/null
+++ b/frontend/src/components/FriendsCard.jsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import '../styles/UserCard.css'
+import { useNavigate } from 'react-router-dom'
+import Button from '@mui/material/Button'
+
+require('dotenv').config()
+
+const PORT = process.env.PORT || 5050
+const BASE_API_URI = `http://localhost:${PORT}`
+
+function FriendsCard({
+	username,
+	name,
+	dpLink,
+	currentUsername,
+	user,
+	curruser,
+	users,
+	setUsers,
+}) {
+	const navigate = useNavigate()
+
+	const handleUnFollow = id => {
+		fetch(`${BASE_API_URI}/api/unfollow`, {
+			method: 'PUT',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${localStorage.getItem('jwt')}`,
+			},
+			body: JSON.stringify({
+				userID: id,
+			}),
+		})
+			.then(res => res.json())
+			.then(result => {
+				console.log(result)
+				const newUsers = users.filter(u => u._id !== id)
+				setUsers(newUsers)
+				// setIsFollow(true)
+			})
+			.catch(err => console.log(err))
+	}
+
+	return (
+		<>
+			{currentUsername !== username &&
+			curruser._id !== user._id &&
+			curruser.friends.includes(user._id) === true ? (
+				<div className='container'>
+					<div className='card_item'>
+						<div className='card_inner'>
+							<img src={dpLink} alt='' />
+							<div className='Name'>{name}</div>
+							<div className='userName'>{username}</div>
+							<div className='userUrl' />
+							<div className='detail-box'>
+								<div className='gitDetail'>
+									<span>College</span>JU
+								</div>
+								<div className='gitDetail'>
+									<span>Following</span>45
+								</div>
+								<div className='gitDetail'>
+									<span>Followers</span>11
+								</div>
+							</div>
+
+							{/* <Button className="top-margin" size="large" variant="contained" onClick={() => handleUnFollow(user._id)}>Remove Friend</Button> */}
+							<button
+								type='button'
+								className='removeFriend'
+								onClick={() => handleUnFollow(user._id)}
+							>
+								Remove Friend
+							</button>
+						</div>
+					</div>
+				</div>
+			) : null}
+		</>
+	)
+}
+
+export default FriendsCard
diff --git a/frontend/src/components/FriendsPage.jsx b/frontend/src/components/FriendsPage.jsx
index 33f0fe5..759e16e 100644
--- a/frontend/src/components/FriendsPage.jsx
+++ b/frontend/src/components/FriendsPage.jsx
@@ -1,5 +1,6 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
+
 import Box from '@mui/material/Box'
 import TextField from '@mui/material/TextField'
 import MenuItem from '@mui/material/MenuItem'
@@ -8,12 +9,23 @@ import FormControlLabel from '@mui/material/FormControlLabel'
 import Checkbox from '@mui/material/Checkbox'
 import Stack from '@mui/material/Stack'
 import Button from '@mui/material/Button'
+import Backdrop from '@mui/material/Backdrop'
+import Modal from '@mui/material/Modal'
+import Fade from '@mui/material/Fade'
+import IconButton from '@mui/material/IconButton'
+import CloseIcon from '@mui/icons-material/Close'
 import GroupAddRoundedIcon from '@mui/icons-material/GroupAddRounded'
 import PeopleAltRoundedIcon from '@mui/icons-material/PeopleAltRounded'
 import TravelExploreRoundedIcon from '@mui/icons-material/TravelExploreRounded'
+import ExitToAppRoundedIcon from '@mui/icons-material/ExitToAppRounded'
+import SaveRoundedIcon from '@mui/icons-material/SaveRounded'
+import SaveAsRoundedIcon from '@mui/icons-material/SaveAsRounded'
+
 import UserCard from './UserCard'
+import FriendsCard from './FriendsCard'
 import UserBanner from './UserBanner'
 import '../styles/FriendsPage.css'
+import { LoginContext } from '../context/LoginContext'
 
 require('dotenv').config()
 
@@ -28,6 +40,11 @@ function FriendsPage() {
 	const [users, setUsers] = useState([])
 	const [changePic, setChangePic] = useState(false)
 
+	const { setModalOpen } = useContext(LoginContext)
+	const handleClick = () => {
+		setModalOpen(true)
+	}
+
 	const colleges = [
 		{
 			value: 'Jadavpur University',
@@ -62,6 +79,41 @@ function FriendsPage() {
 		},
 	]
 
+	// Modal custom stylesheet
+	const style = {
+		position: 'absolute',
+		top: '50%',
+		left: '50%',
+		transform: 'translate(-50%, -50%)',
+		minWidth: '60vw',
+		maxWidth: '95vw',
+		maxHeight: '80vh',
+		bgcolor: '#f0f0f0',
+		border: '2px solid #000',
+		boxShadow: 24,
+		p: 4,
+		borderRadius: 5,
+		overflow: 'auto',
+	}
+
+	// Closed Modal Icon stylesheet
+	const closeButtonStyle = {
+		position: 'absolute',
+		top: 5,
+		right: 5,
+		fontWeight: 'bolder',
+	}
+
+	// Modal related hooks and utilities
+	const [open, setOpen] = useState(false)
+	const handleOpen = () => setOpen(true)
+	const handleClose = () => setOpen(false)
+	const [open2, setOpen2] = useState(false)
+	const handleOpen2 = () => setOpen2(true)
+	const handleClose2 = () => setOpen2(false)
+
+	const [toggle, setToggle] = useState(false)
+
 	useEffect(() => {
 		fetch(
 			`${BASE_API_URI}/api/user/${
@@ -111,17 +163,30 @@ function FriendsPage() {
 		if (localStorage.getItem('user')) {
 			return (
 				<>
+					{/* actual content of the screen  */}
 					<div className='container'>
 						<div className='button-container'>
-							<Button
-								variant='outlined'
-								onClick={() => {
-									navigate('/client')
-								}}
-								startIcon={<TravelExploreRoundedIcon />}
-							>
-								Go To Map
-							</Button>
+							<Stack direction='row' spacing={3}>
+								<Button
+									variant='contained'
+									size='large'
+									onClick={() => {
+										navigate('/client')
+									}}
+									startIcon={<TravelExploreRoundedIcon />}
+								>
+									Go To Map
+								</Button>
+								<Button
+									variant='outlined'
+									size='large'
+									color='success'
+									onClick={handleClick}
+									startIcon={<ExitToAppRoundedIcon />}
+								>
+									Logout
+								</Button>
+							</Stack>
 						</div>
 						<div className='user-banner'>
 							<UserBanner
@@ -131,7 +196,7 @@ function FriendsPage() {
 								dpLink={curruser.Photo ? curruser.Photo : defaultPicLink}
 							/>
 						</div>
-						<div className='option-container'>
+						<div className='options-container'>
 							<div className='form-container'>
 								<Box
 									component='form'
@@ -215,35 +280,144 @@ function FriendsPage() {
 									/>
 								</FormGroup>
 							</div>
-							<Stack direction='row' spacing={3}>
-								<Button variant='outlined' startIcon={<PeopleAltRoundedIcon />}>
+							<div className='save-edit-button-container'>
+								<Stack direction='row' spacing={3}>
+									{!toggle && (
+										<Button
+											variant='contained'
+											onClick={() => {
+												setToggle(!toggle)
+											}}
+											startIcon={<SaveRoundedIcon />}
+										>
+											Save
+										</Button>
+									)}
+									{toggle && (
+										<Button
+											variant='outlined'
+											onClick={() => {
+												setToggle(!toggle)
+											}}
+											startIcon={<SaveAsRoundedIcon />}
+										>
+											Edit
+										</Button>
+									)}
+								</Stack>
+							</div>
+							<Stack direction='row' spacing={5}>
+								<Button
+									variant='outlined'
+									size='large'
+									onClick={handleOpen2}
+									startIcon={<PeopleAltRoundedIcon />}
+								>
 									My Friends
 								</Button>
-								<Button variant='contained' endIcon={<GroupAddRoundedIcon />}>
+								<Button
+									variant='contained'
+									size='large'
+									onClick={handleOpen}
+									endIcon={<GroupAddRoundedIcon />}
+								>
 									Add Friends
 								</Button>
 							</Stack>
 						</div>
-
-						{/* <div className='friends-modal'>
-						{users.length > 0 &&
-							users.map(user => (
-								<UserCard
-									key={user.username} // Ensure each UserCard has a unique key
-									username={user.username}
-									name={user.name}
-									dpLink={user.Photo ? user.Photo : defaultPicLink}
-									currentUserName={curruser.username}
-									user={user}
-									curruser={curruser}
-								/>
-							))}
-					</div> */}
+					</div>
+					{/* Show friends modal  */}
+					<div className='modal-container'>
+						<Modal
+							aria-labelledby='transition-modal-title'
+							aria-describedby='transition-modal-description'
+							open={open}
+							onClose={handleClose}
+							closeAfterTransition
+							slots={{ backdrop: Backdrop }}
+							slotProps={{
+								backdrop: {
+									timeout: 500,
+								},
+							}}
+						>
+							<Fade in={open}>
+								<Box sx={style}>
+									<IconButton
+										aria-label='close'
+										style={closeButtonStyle}
+										onClick={handleClose}
+									>
+										<CloseIcon />
+									</IconButton>
+									<div className='friends-modal'>
+										{users.length > 0 &&
+											users.map(user => (
+												<UserCard
+													key={user.username} // Ensure each UserCard has a unique key
+													username={user.username}
+													name={user.name}
+													dpLink={user.Photo ? user.Photo : defaultPicLink}
+													currentUserName={curruser.username}
+													user={user}
+													curruser={curruser}
+													users={users}
+													setUsers={setUsers}
+												/>
+											))}
+									</div>
+								</Box>
+							</Fade>
+						</Modal>
+					</div>
+					{/* Add friends modal  */}
+					<div className='modal-container'>
+						<Modal
+							aria-labelledby='transition-modal-title'
+							aria-describedby='transition-modal-description'
+							open={open2}
+							onClose={handleClose2}
+							closeAfterTransition
+							slots={{ backdrop: Backdrop }}
+							slotProps={{
+								backdrop: {
+									timeout: 500,
+								},
+							}}
+						>
+							<Fade in={open2}>
+								<Box sx={style}>
+									<IconButton
+										aria-label='close'
+										style={closeButtonStyle}
+										onClick={handleClose2}
+									>
+										<CloseIcon />
+									</IconButton>
+									<div className='friends-modal'>
+										{users.length > 0 &&
+											users.map(user => (
+												<FriendsCard
+													key={user.username} // Ensure each FriendsCard has a unique key
+													username={user.username}
+													name={user.name}
+													dpLink={user.Photo ? user.Photo : defaultPicLink}
+													currentUserName={curruser.username}
+													user={user}
+													curruser={curruser}
+													users={users}
+													setUsers={setUsers}
+												/>
+											))}
+									</div>
+								</Box>
+							</Fade>
+						</Modal>
 					</div>
 				</>
 			)
 		}
-		navigate('/')
+		navigate('/login')
 	}
 
 	return <div className='friends-container'>{checker()}</div>
diff --git a/frontend/src/components/Login.jsx b/frontend/src/components/Login.jsx
index 74bc7c4..9516e68 100644
--- a/frontend/src/components/Login.jsx
+++ b/frontend/src/components/Login.jsx
@@ -123,21 +123,24 @@ function Login() {
 							value='Log in'
 							onClick={postData}
 						/>
+						<div className='form-footer'>
+							<br />
+							Don't have an account ?
+							<br />
+							<Link to='/' style={{ textDecoration: 'none' }}>
+								<span
+									style={{
+										color: '#1877f2',
+										cursor: 'pointer',
+										fontWeight: 'bold',
+									}}
+								>
+									{'   '} Sign up
+								</span>
+							</Link>
+						</div>
 					</div>
-					<div className='form-footer'>
-						Don't have an account ?
-						<Link to='/' style={{ textDecoration: 'none' }}>
-							<span
-								style={{
-									color: '#1877f2',
-									cursor: 'pointer',
-									fontWeight: 'bold',
-								}}
-							>
-								{'   '} Sign up
-							</span>
-						</Link>
-					</div>
+
 					<ToastContainer autoClose={3000} theme='dark' />
 				</div>
 			</div>
diff --git a/frontend/src/components/LogoutModal.jsx b/frontend/src/components/LogoutModal.jsx
new file mode 100644
index 0000000..3052966
--- /dev/null
+++ b/frontend/src/components/LogoutModal.jsx
@@ -0,0 +1,68 @@
+import React, { useContext } from 'react'
+import Stack from '@mui/material/Stack'
+import Button from '@mui/material/Button'
+import '../styles/LogoutModal.css'
+import { RiCloseLine } from 'react-icons/ri'
+
+import { LoginContext } from '../context/LoginContext'
+
+function LogoutModal() {
+	const { setModalOpen } = useContext(LoginContext)
+	const { setUserLogin } = useContext(LoginContext)
+
+	const handleCancel = () => {
+		setModalOpen(false)
+	}
+
+	const handleLogout = () => {
+		setModalOpen(false)
+		setUserLogin(false)
+		localStorage.removeItem('jwt')
+		localStorage.removeItem('user')
+	}
+
+	return (
+		<>
+			<div className='darkBg'>
+				<div className='centered'>
+					<div className='modal'>
+						<div className='modalHeader'>
+							<h5 className='heading'>Confirm</h5>
+						</div>
+						<button
+							type='button'
+							className='closeBtn'
+							onClick={handleCancel}
+							aria-label='close-button'
+						>
+							<RiCloseLine />
+						</button>
+						<div className='modalContent'>Do you really want to log out ?</div>
+						<div className='modalActions'>
+							<div className='actionsContainer'>
+								<Stack direction='row' spacing={3}>
+									<Button
+										variant='contained'
+										color='error'
+										onClick={handleLogout}
+									>
+										Logout
+									</Button>
+									<Button
+										variant='outlined'
+										color='success'
+										onClick={handleCancel}
+									>
+										Cancel
+									</Button>
+								</Stack>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</>
+	)
+}
+
+export default LogoutModal
diff --git a/frontend/src/components/Map.jsx b/frontend/src/components/Map.jsx
index d64473e..314b567 100644
--- a/frontend/src/components/Map.jsx
+++ b/frontend/src/components/Map.jsx
@@ -1,14 +1,26 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
+
+import Box from '@mui/material/Box'
+import Slider from '@mui/material/Slider'
+import TextField from '@mui/material/TextField'
+import MenuItem from '@mui/material/MenuItem'
+import Stack from '@mui/material/Stack'
+import Button from '@mui/material/Button'
+import TravelExploreRoundedIcon from '@mui/icons-material/TravelExploreRounded'
+import ExitToAppRoundedIcon from '@mui/icons-material/ExitToAppRounded'
+
 import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'
 import io from 'socket.io-client'
 import '../styles/Map.css'
+import { useNavigate } from 'react-router-dom'
+import { LoginContext } from '../context/LoginContext'
 
 require('dotenv').config()
 
 const socket = io.connect('http://localhost:5050')
 
 const containerStyle = {
-	width: '70vw',
+	width: '60vw',
 	height: '100vh',
 }
 
@@ -18,6 +30,8 @@ const center = {
 }
 
 function Map() {
+	const navigate = useNavigate()
+
 	const { isLoaded } = useJsApiLoader({
 		id: 'google-map-script',
 		googleMapsApiKey: process.env.GOOGLE_API_KEY,
@@ -121,41 +135,238 @@ function Map() {
 		setMap(null)
 	}, [])
 
+	const distances = [
+		{
+			value: 0,
+			label: '0 km',
+		},
+		{
+			value: 10,
+			label: '10',
+		},
+		{
+			value: 20,
+			label: '20',
+		},
+		{
+			value: 30,
+			label: '30',
+		},
+		{
+			value: 40,
+			label: '40',
+		},
+		{
+			value: 50,
+			label: '50',
+		},
+		{
+			value: 60,
+			label: '60',
+		},
+		{
+			value: 70,
+			label: '70',
+		},
+		{
+			value: 80,
+			label: '80',
+		},
+		{
+			value: 90,
+			label: '90',
+		},
+		{
+			value: 100,
+			label: '100 km',
+		},
+	]
+
+	const genders = [
+		{
+			value: 'Male',
+			label: 'Male',
+		},
+		{
+			value: 'Female',
+			label: 'Female',
+		},
+		{
+			value: 'Non Binary',
+			label: 'Non Binary',
+		},
+	]
+
+	const colleges = [
+		{
+			value: 'Jadavpur University',
+			label: 'Jadavpur University',
+		},
+		{
+			value: 'Calcutta University',
+			label: 'Calcutta University',
+		},
+		{
+			value: 'Presidency University',
+			label: 'Presidency University',
+		},
+		{
+			value: 'Kalyani University',
+			label: 'Kalyani University',
+		},
+	]
+
+	function valuetext(value) {
+		return `${value}km`
+	}
+
+	const { setModalOpen } = useContext(LoginContext)
+	const handleClick = () => {
+		setModalOpen(true)
+	}
+
 	return isLoaded ? (
 		<>
-			<div className='map-container'>
-				<div>
-					<GoogleMap
-						mapContainerStyle={containerStyle}
-						center={currentCenter}
-						zoom={18.25}
-					>
-						<Marker position={{ lat: location.lat, lng: location.lng }} />
-						<Marker
-							position={{
-								lat: 22.54905,
-								lng: 88.37816,
-							}}
-						/>
-						<Marker
-							position={{
-								lat: 22.559132,
-								lng: 88.38827,
-							}}
-						/>
-						{/* {locationArray.map(loc => {
+			<div className='complete-container'>
+				<div className='map-container'>
+					<div>
+						<GoogleMap
+							mapContainerStyle={containerStyle}
+							center={currentCenter}
+							zoom={18.25}
+						>
+							<Marker position={{ lat: location.lat, lng: location.lng }} />
+							<Marker
+								position={{
+									lat: 22.54905,
+									lng: 88.37816,
+								}}
+							/>
+							<Marker
+								position={{
+									lat: 22.559132,
+									lng: 88.38827,
+								}}
+							/>
+							{/* {locationArray.map(loc => {
 							; <Marker position={{ lat: loc.lat, lng: loc.lng }} />
 						})} */}
-					</GoogleMap>
+						</GoogleMap>
+					</div>
 				</div>
-				<div className='button-container'>
-					<button
-						type='button'
-						className='enlarge-button'
-						onClick={sendLocation}
+				<div className='option-container'>
+					<div className='button-container-2'>
+						<Stack direction='row' spacing={25}>
+							<Button
+								variant='contained'
+								size='large'
+								onClick={() => {
+									navigate('/friendsPage')
+								}}
+								startIcon={<TravelExploreRoundedIcon />}
+							>
+								Profile
+							</Button>
+							<Button
+								variant='outlined'
+								size='large'
+								color='success'
+								onClick={handleClick}
+								startIcon={<ExitToAppRoundedIcon />}
+							>
+								Logout
+							</Button>
+						</Stack>
+					</div>
+					<Box sx={{ width: '27.5rem' }}>
+						<Slider
+							aria-label='Custom marks'
+							defaultValue={20}
+							step={10}
+							valueLabelDisplay='auto'
+							marks={distances}
+						/>
+					</Box>
+					<Box
+						component='form'
+						sx={{
+							'& .MuiTextField-root': {
+								m: 1,
+								width: '27.5rem',
+								marginTop: '4.5rem',
+							},
+						}}
+						noValidate
+						autoComplete='off'
+					>
+						<div>
+							<TextField
+								required
+								id='outlined-number'
+								label='Age'
+								type='number'
+								InputLabelProps={{
+									shrink: true,
+								}}
+							/>
+						</div>
+					</Box>
+					<Box
+						component='form'
+						sx={{
+							'& .MuiTextField-root': {
+								m: 1,
+								width: '27.5rem',
+								marginTop: '4rem',
+							},
+						}}
+						noValidate
+						autoComplete='off'
+					>
+						<div>
+							<TextField
+								id='outlined-select-gender'
+								select
+								label='Gender'
+								required
+								defaultValue='Male'
+							>
+								{genders.map(option => (
+									<MenuItem key={option.value} value={option.value}>
+										{option.label}
+									</MenuItem>
+								))}
+							</TextField>
+						</div>
+					</Box>
+					<Box
+						component='form'
+						sx={{
+							'& .MuiTextField-root': {
+								m: 1,
+								width: '27.5rem',
+								marginTop: '4rem',
+							},
+						}}
+						noValidate
+						autoComplete='off'
 					>
-						Click Me
-					</button>
+						<div>
+							<TextField
+								id='outlined-select-college'
+								select
+								label='College'
+								required
+								defaultValue='Jadavpur University'
+							>
+								{colleges.map(option => (
+									<MenuItem key={option.value} value={option.value}>
+										{option.label}
+									</MenuItem>
+								))}
+							</TextField>
+						</div>
+					</Box>
 				</div>
 			</div>
 		</>
diff --git a/frontend/src/components/ProfilePic.jsx b/frontend/src/components/ProfilePic.jsx
new file mode 100644
index 0000000..b8fab2c
--- /dev/null
+++ b/frontend/src/components/ProfilePic.jsx
@@ -0,0 +1,126 @@
+import React, { useRef, useState, useEffect } from 'react'
+
+import '../styles/ProfilePic.css'
+
+require('dotenv').config()
+
+const PORT = process.env.PORT || 5050
+const BASE_API_URI = `http://localhost:${PORT}`
+
+function ProfilePic({ changeProfile }) {
+	const hiddenFileInput = useRef(null)
+	const [image, setImage] = useState()
+	const [url, setUrl] = useState(null)
+
+	const handleClick = () => {
+		hiddenFileInput.current.click()
+	}
+
+	const postDetails = () => {
+		const data = new FormData()
+		data.append('file', image)
+		data.append('upload_preset', 'insta-clone')
+		data.append('cloud_name', 'cantacloud2')
+		fetch('https://api.cloudinary.com/v1_1/cantacloud2/image/upload', {
+			method: 'POST',
+			body: data,
+		})
+			.then(res => res.json())
+			.then(data => setUrl(data.url))
+			.catch(err => console.log(err))
+		console.log(url)
+	}
+
+	const postPic = () => {
+		// saving post to mongodb
+		fetch(`${BASE_API_URI}/api/uploadProfilePic`, {
+			method: 'PUT',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${localStorage.getItem('jwt')}`,
+			},
+			body: JSON.stringify({
+				pic: url,
+			}),
+		})
+			.then(res => res.json())
+			.then(data => {
+				console.log(data)
+				changeProfile()
+				window.location.reload()
+			})
+			.catch(err => console.log(err))
+	}
+
+	useEffect(() => {
+		if (image) {
+			postDetails()
+		}
+	}, [image])
+
+	useEffect(() => {
+		if (url) {
+			postPic()
+		}
+	}, [url])
+
+	return (
+		<>
+			<div className='profilePic'>
+				<div className='changePic'>
+					<div>
+						<h2>Change Profile Picture</h2>
+					</div>
+					<div
+						style={{ borderTop: '1px solid #00000070', padding: '25px 80px' }}
+					>
+						<button
+							type='button'
+							className='upload-btn'
+							style={{ color: '#1EA1F7' }}
+							onClick={handleClick}
+						>
+							Upload Profile Picture
+						</button>
+						<input
+							type='file'
+							ref={hiddenFileInput}
+							accept='image/*'
+							style={{ display: 'none' }}
+							onChange={e => setImage(e.target.files[0])}
+						/>
+					</div>
+					<div
+						style={{ borderTop: '1px solid #00000070', padding: '25px 80px' }}
+					>
+						<button
+							type='button'
+							className='upload-btn'
+							style={{ color: '#ED4956' }}
+							onClick={() => {
+								setUrl(null)
+								postPic()
+							}}
+						>
+							Remove Profile Picture
+						</button>
+					</div>
+					<div
+						style={{ borderTop: '1px solid #00000070', padding: '25px 80px' }}
+					>
+						<button
+							type='button'
+							className='upload-btn'
+							style={{ color: 'red' }}
+							onClick={() => changeProfile()}
+						>
+							Cancel
+						</button>
+					</div>
+				</div>
+			</div>
+		</>
+	)
+}
+
+export default ProfilePic
diff --git a/frontend/src/components/Signup.jsx b/frontend/src/components/Signup.jsx
index ecfa2ae..1d55db6 100644
--- a/frontend/src/components/Signup.jsx
+++ b/frontend/src/components/Signup.jsx
@@ -211,20 +211,22 @@ function Signup() {
 								}}
 							/>
 						</div>
-					</div>
-					<div className='form-footer'>
-						Already have an account ?
-						<Link to='/login' style={{ textDecoration: 'none' }}>
-							<span
-								style={{
-									color: '#1877f2',
-									cursor: 'pointer',
-									fontWeight: 'bold',
-								}}
-							>
-								{'   '} Sign In
-							</span>
-						</Link>
+						<div className='form-footer'>
+							<br />
+							Already have an account ?
+							<br />
+							<Link to='/login' style={{ textDecoration: 'none' }}>
+								<span
+									style={{
+										color: '#1877f2',
+										cursor: 'pointer',
+										fontWeight: 'bold',
+									}}
+								>
+									{'   '} Sign In
+								</span>
+							</Link>
+						</div>
 					</div>
 					<ToastContainer autoClose={3000} theme='dark' />
 				</div>
diff --git a/frontend/src/components/UserBanner.jsx b/frontend/src/components/UserBanner.jsx
index 24dae33..d9eb3f1 100644
--- a/frontend/src/components/UserBanner.jsx
+++ b/frontend/src/components/UserBanner.jsx
@@ -1,27 +1,101 @@
-import React from 'react'
+import React, { useState } from 'react'
 
+import Box from '@mui/material/Box'
+import Backdrop from '@mui/material/Backdrop'
+import Modal from '@mui/material/Modal'
+import Fade from '@mui/material/Fade'
+import IconButton from '@mui/material/IconButton'
+import CloseIcon from '@mui/icons-material/Close'
+
+import ProfilePic from './ProfilePic'
 import '../styles/UserBanner.css'
 
 function UserBanner({ username, name, dpLink }) {
+	const [changePic, setChangePic] = useState(false)
+	const handleOpen3 = () => setChangePic(true)
+	const handleClose3 = () => setChangePic(false)
+
+	// Modal custom stylesheet
+	const style = {
+		position: 'absolute',
+		top: '50%',
+		left: '50%',
+		transform: 'translate(-50%, -50%)',
+		maxWidth: '28vw',
+		minHeight: '40vh',
+		maxHeight: '50vh',
+		bgcolor: '#f0f0f0',
+		border: '2px solid #000',
+		boxShadow: 24,
+		p: 4,
+		borderRadius: 5,
+		backgroundColor: '#f0f2f5',
+	}
+
+	// Closed Modal Icon stylesheet
+	const closeButtonStyle = {
+		position: 'absolute',
+		top: 5,
+		right: 5,
+		fontWeight: 'bolder',
+	}
+
+	const changeProfile = () => {
+		setChangePic(!changePic)
+	}
+
 	return (
-		<div className='user-banner-container'>
-			<div className='profile-photo-container'>
-				<img
-					className='user-profile-img'
-					// onClick={changeProfile}
-					src={dpLink}
-					alt='User Profile Photo'
-				/>
-			</div>
-			<div className='user-details-container'>
-				<div className='user-full-name'>
-					<h1>{name}</h1>
+		<>
+			<div className='user-banner-container'>
+				<div className='profile-photo-container'>
+					<img
+						className='user-profile-img'
+						onClick={changeProfile}
+						onKeyDown={changeProfile}
+						src={dpLink}
+						alt='User Profile Photo'
+					/>
 				</div>
-				<div className='user-username'>
-					<h3>@{username}</h3>
+				<div className='user-details-container'>
+					<div className='user-full-name'>
+						<h1>{name}</h1>
+					</div>
+					<div className='user-username'>
+						<h3>@{username}</h3>
+					</div>
 				</div>
 			</div>
-		</div>
+			{/* Upload profile picture modal  */}
+			<div className='modal-container-2'>
+				<Modal
+					aria-labelledby='transition-modal-title'
+					aria-describedby='transition-modal-description'
+					open={changePic}
+					onClose={handleClose3}
+					closeAfterTransition
+					slots={{ backdrop: Backdrop }}
+					slotProps={{
+						backdrop: {
+							timeout: 500,
+						},
+					}}
+				>
+					<Fade in={changePic}>
+						<Box sx={style}>
+							<IconButton
+								aria-label='close'
+								style={closeButtonStyle}
+								onClick={handleClose3}
+							>
+								<CloseIcon />
+							</IconButton>
+							{/* Component to update the profile picture of the current user  */}
+							<ProfilePic changeProfile={changeProfile} />
+						</Box>
+					</Fade>
+				</Modal>
+			</div>
+		</>
 	)
 }
 
diff --git a/frontend/src/components/UserCard.jsx b/frontend/src/components/UserCard.jsx
index 5a71308..089a246 100644
--- a/frontend/src/components/UserCard.jsx
+++ b/frontend/src/components/UserCard.jsx
@@ -7,7 +7,16 @@ require('dotenv').config()
 const PORT = process.env.PORT || 5050
 const BASE_API_URI = `http://localhost:${PORT}`
 
-function UserCard({ username, name, dpLink, currentUsername, user, curruser }) {
+function UserCard({
+	username,
+	name,
+	dpLink,
+	currentUsername,
+	user,
+	curruser,
+	users,
+	setUsers,
+}) {
 	const navigate = useNavigate()
 
 	const handleFollow = id => {
@@ -24,33 +33,17 @@ function UserCard({ username, name, dpLink, currentUsername, user, curruser }) {
 			.then(res => res.json())
 			.then(result => {
 				console.log(result)
+				const newUsers = users.filter(u => u._id !== id)
+				setUsers(newUsers)
 				// setIsFollow(false)
 			})
 			.catch(err => console.log(err))
 	}
 
-	const handleUnFollow = id => {
-		fetch(`${BASE_API_URI}/api/unfollow`, {
-			method: 'PUT',
-			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${localStorage.getItem('jwt')}`,
-			},
-			body: JSON.stringify({
-				userID: id,
-			}),
-		})
-			.then(res => res.json())
-			.then(result => {
-				console.log(result)
-				// setIsFollow(true)
-			})
-			.catch(err => console.log(err))
-	}
-
 	return (
 		<>
 			{currentUsername !== username &&
+			curruser._id !== user._id &&
 			curruser.friends.includes(user._id) === false ? (
 				<div className='container'>
 					<div className='card_item'>
diff --git a/frontend/src/styles/FriendsPage.css b/frontend/src/styles/FriendsPage.css
index b395cf9..94201d5 100644
--- a/frontend/src/styles/FriendsPage.css
+++ b/frontend/src/styles/FriendsPage.css
@@ -1,6 +1,8 @@
 .container {
 	background-color: #f0f2f5;
 	min-height: 100vh;
+	padding: 2rem;
+	/* padding: 40px 20px 20px 20px; */
 }
 
 .friends-container {
@@ -9,16 +11,15 @@
 
 .friends-modal {
 	display: grid;
-	grid-template-columns: repeat(4, 350px);
-	grid-auto-rows: auto;
-	grid-gap: 1rem;
+	grid-template-columns: repeat(3, 18.4375rem);
+	grid-template-rows: repeat(3, 28.125rem);
 }
 
 .button-container {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 	justify-content: flex-end;
-	align-items: end;
+	align-items: flex-end;
 }
 
 .large-button {
@@ -45,7 +46,7 @@
 	/* Change color on hover */
 }
 
-.option-container {
+.options-container {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -62,12 +63,18 @@
 }
 
 .checkbox-container {
-	padding: 2rem;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
 }
 
 .button-container-2 {
-	padding: 2rem;
+	padding-bottom: 5rem;
 	display: flex;
 	flex-direction: row;
-	justify-content: space-around;
+	justify-content: space-between;
+}
+
+.save-edit-button-container {
+	margin-top: 0.5rem;
+	margin-bottom: 2.5rem;
 }
diff --git a/frontend/src/styles/LogoutModal.css b/frontend/src/styles/LogoutModal.css
new file mode 100644
index 0000000..0340b4d
--- /dev/null
+++ b/frontend/src/styles/LogoutModal.css
@@ -0,0 +1,126 @@
+.darkBg {
+	background-color: rgba(0, 0, 0, 0.2);
+	width: 100vw;
+	/* min-height: 100vh; */
+	/* height: 100vh; */
+	z-index: 0;
+	top: 30%;
+	left: 90%;
+	transform: translate(-50%, -50%);
+	position: absolute;
+}
+
+.centered {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.modal {
+	width: 15.625rem;
+	height: 10.5rem;
+	background: white;
+	color: white;
+	z-index: 10;
+	border-radius: 16px;
+	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
+}
+
+.modalHeader {
+	height: 50px;
+	background: white;
+	overflow: hidden;
+	border-top-left-radius: 16px;
+	border-top-right-radius: 16px;
+}
+
+.heading {
+	margin: 0;
+	padding: 10px;
+	color: #2c3e50;
+	font-weight: 500;
+	font-size: 18px;
+	text-align: center;
+}
+
+.modalContent {
+	padding: 10px;
+	font-size: 14px;
+	color: #2c3e50;
+	text-align: center;
+}
+
+.modalActions {
+	position: absolute;
+	bottom: 2px;
+	margin-bottom: 10px;
+	width: 100%;
+}
+
+.actionsContainer {
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+}
+
+.closeBtn {
+	cursor: pointer;
+	font-weight: 500;
+	padding: 4px 8px;
+	border-radius: 8px;
+	border: none;
+	font-size: 18px;
+	color: white;
+	background: rgb(10, 60, 223);
+	transition: all 0.25s ease;
+	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.06);
+	position: absolute;
+	right: 0;
+	top: 0;
+	align-self: flex-end;
+	margin-top: -7px;
+	margin-right: -7px;
+}
+
+.closeBtn:hover {
+	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
+	transform: translate(-4px, 4px);
+}
+
+.logOutBtn {
+	margin-top: 10px;
+	cursor: pointer;
+	font-weight: 500;
+	padding: 11px 28px;
+	border-radius: 12px;
+	font-size: 0.8rem;
+	border: none;
+	color: #fff;
+	background: #ff3e4e;
+	transition: all 0.25s ease;
+}
+
+.logOutBtn:hover {
+	box-shadow: 0 10px 20px -10px rgba(255, 62, 78, 0.6);
+	transform: translateY(-5px);
+	background: #ff3e4e;
+}
+
+.cancelBtn {
+	margin-top: 10px;
+	cursor: pointer;
+	font-weight: 500;
+	padding: 11px 28px;
+	border-radius: 12px;
+	font-size: 0.8rem;
+	border: none;
+	color: #fcfcfc;
+	background: #2c3e50;
+	transition: all 0.25s ease;
+}
+
+.cancelBtn:hover {
+	box-shadow: none;
+	transform: translateY(-5px);
+}
diff --git a/frontend/src/styles/Map.css b/frontend/src/styles/Map.css
index eda3547..57376b2 100644
--- a/frontend/src/styles/Map.css
+++ b/frontend/src/styles/Map.css
@@ -1,5 +1,20 @@
+.complete-container {
+	display: flex;
+	flex-direction: row;
+}
+
 .map-container {
 	display: flex;
+	border-right: 0.15rem solid black;
+}
+
+.option-container {
+	padding-top: 2rem;
+	width: 40vw;
+	height: 100vh;
+	padding-left: 4.5rem;
+	padding-right: 2.5rem;
+	background-color: #fff;
 }
 
 .enlarge-button {
diff --git a/frontend/src/styles/ProfilePic.css b/frontend/src/styles/ProfilePic.css
new file mode 100644
index 0000000..429ef55
--- /dev/null
+++ b/frontend/src/styles/ProfilePic.css
@@ -0,0 +1,108 @@
+.profile {
+	max-width: 600px;
+	margin: 10px auto;
+}
+
+.profile-frame {
+	display: flex;
+	justify-content: space-evenly;
+}
+
+.profile-pic {
+	height: fit-content;
+}
+
+.profile-pic > img {
+	width: 160px;
+	height: 160px;
+	object-fit: contain;
+	border-radius: 100px;
+}
+
+.profile-data {
+	text-align: left;
+}
+
+.profile-info p {
+	padding: 0px 5px;
+}
+
+.gallery {
+	display: flex;
+	flex-wrap: wrap;
+	text-align: center;
+}
+
+.gallery img {
+	width: 30%;
+	margin: 10px;
+}
+
+.profile_img:hover {
+	cursor: pointer;
+}
+
+.followBtn {
+	cursor: pointer;
+	font-weight: bolder;
+	padding: 0px 35px;
+	border-radius: 15px;
+	font-size: 0.8rem;
+	border: none;
+	color: white;
+	background: #0115eb;
+	transition: all 0.25s ease;
+	margin-left: 20px;
+}
+
+.unfollowBtn {
+	cursor: pointer;
+	font-weight: bolder;
+	padding: 0px 35px;
+	border-radius: 15px;
+	font-size: 0.8rem;
+	border: none;
+	color: white;
+	background: #868cc8;
+	transition: all 0.25s ease;
+	margin-left: 20px;
+}
+
+.inlineStyle {
+	display: flex;
+}
+
+.followBtn:hover {
+	transform: scale(1.1);
+	box-shadow: 0 10px 20px -10px #0115eb;
+}
+
+.unfollowBtn:hover {
+	transform: scale(1.1);
+	box-shadow: 0 10px 20px -10px #0115eb;
+}
+
+.changePic {
+	background-color: #f0f2f5;
+	border-radius: 20px;
+}
+
+.changePic div {
+	padding: 15px 80px;
+}
+
+.upload-btn {
+	cursor: pointer;
+	background: none;
+	border: none;
+	font-weight: bolder;
+
+	font-size: 15px;
+}
+
+.profilePic {
+	margin-top: 1rem;
+	margin-left: 0.8rem;
+	margin-right: 0.8rem;
+	background-color: #f0f2f5;
+}
diff --git a/frontend/src/styles/Signup_Login.css b/frontend/src/styles/Signup_Login.css
index 1723e8d..63178dd 100644
--- a/frontend/src/styles/Signup_Login.css
+++ b/frontend/src/styles/Signup_Login.css
@@ -185,8 +185,8 @@ input:hover {
 
 .form-footer {
 	background-color: transparent;
-	padding: 15px;
-	margin-top: 5px;
+	padding: 2rem;
+	margin-top: 2rem;
 	border: none;
 	text-align: center;
 	font-family: var(--font-courier-prime);
diff --git a/frontend/src/styles/UserBanner.css b/frontend/src/styles/UserBanner.css
index 5a3a594..ff49d5b 100644
--- a/frontend/src/styles/UserBanner.css
+++ b/frontend/src/styles/UserBanner.css
@@ -41,3 +41,14 @@
 	font-family: var(--font-courier-prime);
 	font-size: var(--font-size-small);
 }
+
+.user-profile-img {
+	width: 8.5rem;
+	height: 8.5rem;
+	border-radius: 50%;
+	object-fit: cover;
+}
+
+.user-profile-img:hover {
+	cursor: pointer;
+}
diff --git a/frontend/src/styles/UserCard.css b/frontend/src/styles/UserCard.css
index 7125f0f..a2e624d 100644
--- a/frontend/src/styles/UserCard.css
+++ b/frontend/src/styles/UserCard.css
@@ -1,15 +1,4 @@
-.container {
-	padding: 40px 20px 20px 20px;
-	margin: auto;
-	/* flex-wrap: wrap; */
-	/* display: flex; */
-	/* justify-content: space-between; */
-	/* justify-content: center; */
-	/* flex-wrap: wrap; */
-}
-
 .card_item {
-	padding: 15px 30px;
 	width: 24%;
 	width: 100%;
 	text-align: center;
@@ -87,9 +76,23 @@
 }
 
 .addFriend {
-	margin: 10px auto;
-	width: 100px;
-	height: 35px;
+	margin: 25px auto;
+	width: 140px;
+	height: 40px;
+	background: #1877f2;
+	color: #fff;
+	border: none;
+	border-radius: 10px;
+	font-weight: 600;
+	cursor: pointer;
+	box-shadow: 0 10px 10px hsl(225, 100%, 94%);
+	font-family: var(--font-courier-prime);
+}
+
+.removeFriend {
+	margin: 25px auto;
+	width: 180px;
+	height: 40px;
 	background: #1877f2;
 	color: #fff;
 	border: none;
@@ -100,6 +103,10 @@
 	font-family: var(--font-courier-prime);
 }
 
+.top-margin {
+	margin-top: 5rem;
+}
+
 .addFriend:hover {
 	scale: 1.25;
 }
diff --git a/package-lock.json b/package-lock.json
index 8cffcf4..b2844cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "prettier": "^3.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.12.0",
         "react-router-dom": "^6.20.0",
         "react-toastify": "^9.1.3",
         "socket.io": "^4.7.2",
@@ -8025,6 +8026,14 @@
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==",
       "dev": true
     },
+    "node_modules/react-icons": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
+      "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 58920bb..a708dff 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0",
     "react-router-dom": "^6.20.0",
     "react-toastify": "^9.1.3",
     "socket.io": "^4.7.2",