From 51ff8a0ef2a7a045750316b386fcdd36ef3c1ff6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandra=20S=C3=A1nchez?= <ing.alejandrasanchezv@gmail.com>
Date: Fri, 16 Feb 2024 09:06:47 -0500
Subject: [PATCH 1/6] Add dark mode to new-frontend

---
 src/new-frontend/src/components/ActionsMenu.tsx  |  2 +-
 src/new-frontend/src/components/Sidebar.tsx      | 16 ++++++++++------
 src/new-frontend/src/components/SidebarItems.tsx | 10 ++++++----
 src/new-frontend/src/pages/Admin.tsx             |  2 +-
 src/new-frontend/src/pages/Items.tsx             |  2 +-
 src/new-frontend/src/pages/RecoverPassword.tsx   |  2 +-
 src/new-frontend/src/pages/UserSettings.tsx      |  2 +-
 src/new-frontend/src/panels/Appearance.tsx       | 14 +++++---------
 src/new-frontend/src/panels/ChangePassword.tsx   |  9 +++++----
 src/new-frontend/src/panels/UserInformation.tsx  |  7 ++++---
 10 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/new-frontend/src/components/ActionsMenu.tsx b/src/new-frontend/src/components/ActionsMenu.tsx
index ea7d8bd25b..2a3a2a7d58 100644
--- a/src/new-frontend/src/components/ActionsMenu.tsx
+++ b/src/new-frontend/src/components/ActionsMenu.tsx
@@ -20,7 +20,7 @@ const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, id }) => {
     return (
         <>
             <Menu>
-                <MenuButton as={Button} bg="white" rightIcon={<BsThreeDotsVertical />} variant="unstyled">
+                <MenuButton as={Button} rightIcon={<BsThreeDotsVertical />} variant="unstyled">
                 </MenuButton>
                 <MenuList>
                     <MenuItem onClick={editUserModal.onOpen} icon={<FiEdit fontSize="16px" />}>Edit {type}</MenuItem>
diff --git a/src/new-frontend/src/components/Sidebar.tsx b/src/new-frontend/src/components/Sidebar.tsx
index 0d281520a6..ca80d4fe84 100644
--- a/src/new-frontend/src/components/Sidebar.tsx
+++ b/src/new-frontend/src/components/Sidebar.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Flex, IconButton, Image, useDisclosure, Text } from '@chakra-ui/react';
+import { Box, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Flex, IconButton, Image, useDisclosure, Text, useColorModeValue } from '@chakra-ui/react';
 import { FiMenu } from 'react-icons/fi';
 
 import Logo from "../assets/images/fastapi-logo.svg";
@@ -9,6 +9,10 @@ import { useUserStore } from '../store/user-store';
 
 
 const Sidebar: React.FC = () => {
+    const bg = useColorModeValue("white", "#1a202c");
+    const text = useColorModeValue("gray", "white");
+    const secBg = useColorModeValue("ui.secondary", "#252d3d");
+
     const { isOpen, onOpen, onClose } = useDisclosure();
     const { user } = useUserStore();
 
@@ -18,7 +22,7 @@ const Sidebar: React.FC = () => {
             <IconButton onClick={onOpen} display={{ base: 'flex', md: 'none' }} aria-label="Open Menu" position="absolute" fontSize='20px' m={4} icon={<FiMenu />} />
             <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
                 <DrawerOverlay />
-                <DrawerContent bg="ui.secondary" maxW="250px">
+                <DrawerContent maxW="250px">
                     <DrawerCloseButton />
                     <DrawerBody py={8}>
                         <Flex flexDir="column" justify="space-between">
@@ -28,7 +32,7 @@ const Sidebar: React.FC = () => {
                             </Box>
                             {
                                 user?.email &&
-                                <Text color='gray' noOfLines={2} fontSize="sm" p={2}>Logged in as: {user.email}</Text>
+                                <Text color={text} noOfLines={2} fontSize="sm" p={2}>Logged in as: {user.email}</Text>
                             }
                         </Flex>
                     </DrawerBody>
@@ -36,15 +40,15 @@ const Sidebar: React.FC = () => {
             </Drawer>
 
             {/* Desktop */}
-            <Box bg="white" p={3} h="100vh" position="sticky" top="0" display={{ base: 'none', md: 'flex' }}>
-                <Flex flexDir="column" justify="space-between" bg="ui.secondary" p={4} borderRadius={12}>
+            <Box bg={bg} p={3} h="100vh" position="sticky" top="0" display={{ base: 'none', md: 'flex' }}>
+                <Flex flexDir="column" justify="space-between" bg={secBg} p={4} borderRadius={12}>
                     <Box>
                         <Image src={Logo} alt="Logo" w="180px" maxW="2xs" p={6} />
                         <SidebarItems />
                     </Box>
                     {
                         user?.email &&
-                        <Text color='gray' noOfLines={2} fontSize="sm" p={2} maxW="180px">Logged in as: {user.email}</Text>
+                        <Text color={text} noOfLines={2} fontSize="sm" p={2} maxW="180px">Logged in as: {user.email}</Text>
                     }
                 </Flex>
             </Box>
diff --git a/src/new-frontend/src/components/SidebarItems.tsx b/src/new-frontend/src/components/SidebarItems.tsx
index 2282aaa3f0..7ba70b462a 100644
--- a/src/new-frontend/src/components/SidebarItems.tsx
+++ b/src/new-frontend/src/components/SidebarItems.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, Flex, Icon, Text } from '@chakra-ui/react';
+import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
 import { FiBriefcase, FiHome, FiSettings, FiUsers } from 'react-icons/fi';
 import { Link, useLocation } from 'react-router-dom';
 
@@ -16,6 +16,8 @@ interface SidebarItemsProps {
 }
 
 const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
+    const textColor = useColorModeValue("ui.main", "#E2E8F0");
+    const bgActive = useColorModeValue("#E2E8F0", "#4A5568");
     const location = useLocation();
 
     const listItems = items.map((item) => (
@@ -26,10 +28,10 @@ const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
             p={2}
             key={item.title}
             style={location.pathname === item.path ? {
-                background: "#E2E8F0",
+                background: bgActive,
                 borderRadius: "12px",
             } : {}}
-            color="ui.main"
+            color={textColor}
             onClick={onClose}
         >
             <Icon as={item.icon} alignSelf="center" />
@@ -42,7 +44,7 @@ const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
             <Box>
                 {listItems}
             </Box>
-           
+
         </>
     );
 };
diff --git a/src/new-frontend/src/pages/Admin.tsx b/src/new-frontend/src/pages/Admin.tsx
index 17b410fabb..ee97f863f5 100644
--- a/src/new-frontend/src/pages/Admin.tsx
+++ b/src/new-frontend/src/pages/Admin.tsx
@@ -42,7 +42,7 @@ const Admin: React.FC = () => {
             ) : (
                 users &&
                 <Container maxW="full">
-                    <Heading size="lg" color="gray.700" textAlign={{ base: "center", md: "left" }} pt={12}>
+                    <Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
                         User Management
                     </Heading>
                     <Navbar type={"User"} />
diff --git a/src/new-frontend/src/pages/Items.tsx b/src/new-frontend/src/pages/Items.tsx
index bcf1c04dd6..e3e273b0cd 100644
--- a/src/new-frontend/src/pages/Items.tsx
+++ b/src/new-frontend/src/pages/Items.tsx
@@ -44,7 +44,7 @@ const Items: React.FC = () => {
             ) : (
                 items &&
                 <Container maxW="full">
-                    <Heading size="lg" color="gray.700" textAlign={{ base: "center", md: "left" }} pt={12}>
+                    <Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
                         Items Management
                     </Heading>
                     <Navbar type={"Item"} />
diff --git a/src/new-frontend/src/pages/RecoverPassword.tsx b/src/new-frontend/src/pages/RecoverPassword.tsx
index 4de1aba194..23c44124b3 100644
--- a/src/new-frontend/src/pages/RecoverPassword.tsx
+++ b/src/new-frontend/src/pages/RecoverPassword.tsx
@@ -42,7 +42,7 @@ const RecoverPassword: React.FC = () => {
         Password Recovery
       </Heading>
       <FormControl id="username">
-        <Text align="center" color="gray.600">
+        <Text align="center">
           A password recovery email will be sent to the registered account.
         </Text>
         <Input
diff --git a/src/new-frontend/src/pages/UserSettings.tsx b/src/new-frontend/src/pages/UserSettings.tsx
index a8156a4592..49c551ae69 100644
--- a/src/new-frontend/src/pages/UserSettings.tsx
+++ b/src/new-frontend/src/pages/UserSettings.tsx
@@ -14,7 +14,7 @@ const UserSettings: React.FC = () => {
     return (
         <>
             <Container maxW="full">
-                <Heading size="lg" color="gray.700" textAlign={{ base: "center", md: "left" }} py={12}>
+                <Heading size="lg" textAlign={{ base: "center", md: "left" }} py={12}>
                     User Settings
                 </Heading>
                 <Tabs variant='enclosed' >
diff --git a/src/new-frontend/src/panels/Appearance.tsx b/src/new-frontend/src/panels/Appearance.tsx
index 71caee6246..07f988069f 100644
--- a/src/new-frontend/src/panels/Appearance.tsx
+++ b/src/new-frontend/src/panels/Appearance.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Button, Container, Heading, Radio, RadioGroup, Stack } from '@chakra-ui/react';
+import { Container, Heading, Radio, RadioGroup, Stack, useColorMode } from '@chakra-ui/react';
 
 const Appearance: React.FC = () => {
-    const [value, setValue] = React.useState('system');
+    const { colorMode, toggleColorMode } = useColorMode();
 
     return (
         <>
@@ -11,21 +11,17 @@ const Appearance: React.FC = () => {
                 <Heading size="sm" py={4}>
                     Appearance
                 </Heading>
-                <RadioGroup onChange={setValue} value={value}>
+                <RadioGroup onChange={toggleColorMode} value={colorMode}>
                     <Stack>
-                        <Radio value="system" colorScheme="teal" defaultChecked>
-                            Use system settings (default)
-                        </Radio>
                         <Radio value="light" colorScheme="teal">
-                            Light
+                            Light <i>(default)</i>
                         </Radio>
                         <Radio value="dark" colorScheme="teal">
                             Dark
                         </Radio>
                     </Stack>
                 </RadioGroup>
-                <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} mt={4}>Save</Button>
-            </ Container>
+            </Container>
         </>
     );
 }
diff --git a/src/new-frontend/src/panels/ChangePassword.tsx b/src/new-frontend/src/panels/ChangePassword.tsx
index 1f1f056a20..19bef94d66 100644
--- a/src/new-frontend/src/panels/ChangePassword.tsx
+++ b/src/new-frontend/src/panels/ChangePassword.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { Box, Button, Container, FormControl, FormLabel, Heading, Input } from '@chakra-ui/react';
+import { Box, Button, Container, FormControl, FormLabel, Heading, Input, useColorModeValue } from '@chakra-ui/react';
 
 const ChangePassword: React.FC = () => {
+    const color = useColorModeValue("gray.700", "white");
 
     return (
         <>
@@ -12,15 +13,15 @@ const ChangePassword: React.FC = () => {
                 </Heading>
                 <Box as="form" display="flex" flexDirection="column" alignItems="start">
                     <FormControl>
-                        <FormLabel color="gray.700">Old password</FormLabel>
+                        <FormLabel color={color}>Old password</FormLabel>
                         <Input placeholder='Password' type="password" />
                     </FormControl>
                     <FormControl mt={4}>
-                        <FormLabel color="gray.700">New password</FormLabel>
+                        <FormLabel color={color}>New password</FormLabel>
                         <Input placeholder='Password' type="password" />
                     </FormControl>
                     <FormControl mt={4}>
-                        <FormLabel color="gray.700">Confirm new password</FormLabel>
+                        <FormLabel color={color}>Confirm new password</FormLabel>
                         <Input placeholder='Password' type="password" />
                     </FormControl>
                     <Button bg="ui.main" color="white" _hover={{ opacity: 0.8 }} mt={4} type="submit">
diff --git a/src/new-frontend/src/panels/UserInformation.tsx b/src/new-frontend/src/panels/UserInformation.tsx
index 13f6ba24fb..50a8019bc1 100644
--- a/src/new-frontend/src/panels/UserInformation.tsx
+++ b/src/new-frontend/src/panels/UserInformation.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 
-import { Button, Container, FormControl, FormLabel, Heading, Input, Text } from '@chakra-ui/react';
+import { Button, Container, FormControl, FormLabel, Heading, Input, Text, useColorModeValue } from '@chakra-ui/react';
 
 import { useUserStore } from '../store/user-store';
 
 const UserInformation: React.FC = () => {
+    const color = useColorModeValue("gray.700", "white");
     const [editMode, setEditMode] = useState(false);
     const { user } = useUserStore();
 
@@ -20,7 +21,7 @@ const UserInformation: React.FC = () => {
                     User Information
                 </Heading>
                 <FormControl>
-                    <FormLabel color="gray.700">Full name</FormLabel>
+                    <FormLabel color={color}>Full name</FormLabel>
                     {
                         editMode ?
                             <Input placeholder={user?.full_name || "Full name"} type="text" /> :
@@ -30,7 +31,7 @@ const UserInformation: React.FC = () => {
                     }
                 </FormControl>
                 <FormControl mt={4}>
-                    <FormLabel color="gray.700">Email</FormLabel>
+                    <FormLabel color={color}>Email</FormLabel>
                     {
                         editMode ?
                             <Input placeholder={user?.email} type="text" /> :

From b5c37ee6e39735c1a69c702974017c8c257aae01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandra=20S=C3=A1nchez?= <ing.alejandrasanchezv@gmail.com>
Date: Fri, 16 Feb 2024 09:12:06 -0500
Subject: [PATCH 2/6] Rename bg and text

---
 src/new-frontend/src/components/Sidebar.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/new-frontend/src/components/Sidebar.tsx b/src/new-frontend/src/components/Sidebar.tsx
index ca80d4fe84..537cb39be7 100644
--- a/src/new-frontend/src/components/Sidebar.tsx
+++ b/src/new-frontend/src/components/Sidebar.tsx
@@ -9,9 +9,9 @@ import { useUserStore } from '../store/user-store';
 
 
 const Sidebar: React.FC = () => {
-    const bg = useColorModeValue("white", "#1a202c");
-    const text = useColorModeValue("gray", "white");
-    const secBg = useColorModeValue("ui.secondary", "#252d3d");
+    const bgColor = useColorModeValue("white", "#1a202c");
+    const textColor = useColorModeValue("gray", "white");
+    const secBgColor = useColorModeValue("ui.secondary", "#252d3d");
 
     const { isOpen, onOpen, onClose } = useDisclosure();
     const { user } = useUserStore();
@@ -40,15 +40,15 @@ const Sidebar: React.FC = () => {
             </Drawer>
 
             {/* Desktop */}
-            <Box bg={bg} p={3} h="100vh" position="sticky" top="0" display={{ base: 'none', md: 'flex' }}>
-                <Flex flexDir="column" justify="space-between" bg={secBg} p={4} borderRadius={12}>
+            <Box bg={bgColor} p={3} h="100vh" position="sticky" top="0" display={{ base: 'none', md: 'flex' }}>
+                <Flex flexDir="column" justify="space-between" bg={secBgColor} p={4} borderRadius={12}>
                     <Box>
                         <Image src={Logo} alt="Logo" w="180px" maxW="2xs" p={6} />
                         <SidebarItems />
                     </Box>
                     {
                         user?.email &&
-                        <Text color={text} noOfLines={2} fontSize="sm" p={2} maxW="180px">Logged in as: {user.email}</Text>
+                        <Text color={textColor} noOfLines={2} fontSize="sm" p={2} maxW="180px">Logged in as: {user.email}</Text>
                     }
                 </Flex>
             </Box>

From 85b9b5f67d7050e3573a402f36afede9085272a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandra=20S=C3=A1nchez?= <ing.alejandrasanchezv@gmail.com>
Date: Fri, 16 Feb 2024 09:25:33 -0500
Subject: [PATCH 3/6] Edit sizes in input/text in UserInformation

---
 src/new-frontend/src/panels/UserInformation.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/new-frontend/src/panels/UserInformation.tsx b/src/new-frontend/src/panels/UserInformation.tsx
index 50a8019bc1..ff73912503 100644
--- a/src/new-frontend/src/panels/UserInformation.tsx
+++ b/src/new-frontend/src/panels/UserInformation.tsx
@@ -24,8 +24,8 @@ const UserInformation: React.FC = () => {
                     <FormLabel color={color}>Full name</FormLabel>
                     {
                         editMode ?
-                            <Input placeholder={user?.full_name || "Full name"} type="text" /> :
-                            <Text>
+                            <Input placeholder={user?.full_name || "Full name"} type="text" size="md" /> :
+                            <Text size="md" py={2}>
                                 {user?.full_name || "N/A"}
                             </Text>
                     }
@@ -34,8 +34,8 @@ const UserInformation: React.FC = () => {
                     <FormLabel color={color}>Email</FormLabel>
                     {
                         editMode ?
-                            <Input placeholder={user?.email} type="text" /> :
-                            <Text>
+                            <Input placeholder={user?.email} type="text" size="md" /> :
+                            <Text size="md" py={2}>
                                 {user?.email || "N/A"}
                             </Text>
                     }

From a1615bc1ce6b768000f922ea93b4e1f53dd7ea3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandra=20S=C3=A1nchez?= <ing.alejandrasanchezv@gmail.com>
Date: Fri, 16 Feb 2024 11:57:54 -0500
Subject: [PATCH 4/6] Conditional sidebar depending on role and minor
 improvements

---
 src/new-frontend/src/components/Sidebar.tsx      | 2 +-
 src/new-frontend/src/components/SidebarItems.tsx | 8 ++++++--
 src/new-frontend/src/components/UserMenu.tsx     | 2 +-
 src/new-frontend/src/pages/Dashboard.tsx         | 6 +++---
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/new-frontend/src/components/Sidebar.tsx b/src/new-frontend/src/components/Sidebar.tsx
index 537cb39be7..8450fb0a21 100644
--- a/src/new-frontend/src/components/Sidebar.tsx
+++ b/src/new-frontend/src/components/Sidebar.tsx
@@ -32,7 +32,7 @@ const Sidebar: React.FC = () => {
                             </Box>
                             {
                                 user?.email &&
-                                <Text color={text} noOfLines={2} fontSize="sm" p={2}>Logged in as: {user.email}</Text>
+                                <Text color={textColor} noOfLines={2} fontSize="sm" p={2}>Logged in as: {user.email}</Text>
                             }
                         </Flex>
                     </DrawerBody>
diff --git a/src/new-frontend/src/components/SidebarItems.tsx b/src/new-frontend/src/components/SidebarItems.tsx
index 7ba70b462a..19c1d93cef 100644
--- a/src/new-frontend/src/components/SidebarItems.tsx
+++ b/src/new-frontend/src/components/SidebarItems.tsx
@@ -4,10 +4,11 @@ import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
 import { FiBriefcase, FiHome, FiSettings, FiUsers } from 'react-icons/fi';
 import { Link, useLocation } from 'react-router-dom';
 
+import { useUserStore } from '../store/user-store';
+
 const items = [
     { icon: FiHome, title: 'Dashboard', path: "/" },
     { icon: FiBriefcase, title: 'Items', path: "/items" },
-    { icon: FiUsers, title: 'Admin', path: "/admin" },
     { icon: FiSettings, title: 'User Settings', path: "/settings" },
 ];
 
@@ -19,8 +20,11 @@ const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
     const textColor = useColorModeValue("ui.main", "#E2E8F0");
     const bgActive = useColorModeValue("#E2E8F0", "#4A5568");
     const location = useLocation();
+    const { user } = useUserStore();
+
+    const finalItems = user?.is_superuser ? [...items, { icon: FiUsers, title: 'Admin', path: "/admin" }] : items;
 
-    const listItems = items.map((item) => (
+    const listItems = finalItems.map((item) => (
         <Flex
             as={Link}
             to={item.path}
diff --git a/src/new-frontend/src/components/UserMenu.tsx b/src/new-frontend/src/components/UserMenu.tsx
index 224af6012e..7f515fc3ed 100644
--- a/src/new-frontend/src/components/UserMenu.tsx
+++ b/src/new-frontend/src/components/UserMenu.tsx
@@ -32,7 +32,7 @@ const UserMenu: React.FC = () => {
                         <MenuItem icon={<FiUser fontSize="18px" />} as={Link} to="settings">
                             My profile
                         </MenuItem>
-                        <MenuItem icon={<FiLogOut fontSize="18px" />} onClick={handleLogout} color="ui.danger">
+                        <MenuItem icon={<FiLogOut fontSize="18px" />} onClick={handleLogout} color="ui.danger" fontWeight="bold">
                             Log out
                         </MenuItem>
                     </MenuList>
diff --git a/src/new-frontend/src/pages/Dashboard.tsx b/src/new-frontend/src/pages/Dashboard.tsx
index e0a5e07a5b..c5b452c7df 100644
--- a/src/new-frontend/src/pages/Dashboard.tsx
+++ b/src/new-frontend/src/pages/Dashboard.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, Text } from '@chakra-ui/react';
+import { Container, Text } from '@chakra-ui/react';
 
 import { useUserStore } from '../store/user-store';
 
@@ -10,10 +10,10 @@ const Dashboard: React.FC = () => {
 
     return (
         <>
-            <Box width="100%" p={8}>
+            <Container maxW="full" pt={12}>
                 <Text fontSize="2xl">Hi, {user?.full_name || user?.email} 👋🏼</Text>
                 <Text>Welcome back, nice to see you again!</Text>
-            </Box>
+            </Container>
         </>
 
     )

From d1ce44b851e95e3c8fc70594a5a0d6d423f99e6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandra=20S=C3=A1nchez?= <ing.alejandrasanchezv@gmail.com>
Date: Fri, 16 Feb 2024 11:58:11 -0500
Subject: [PATCH 5/6] Rename Root to Layout

---
 src/new-frontend/src/pages/{Root.tsx => Layout.tsx} | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename src/new-frontend/src/pages/{Root.tsx => Layout.tsx} (95%)

diff --git a/src/new-frontend/src/pages/Root.tsx b/src/new-frontend/src/pages/Layout.tsx
similarity index 95%
rename from src/new-frontend/src/pages/Root.tsx
rename to src/new-frontend/src/pages/Layout.tsx
index 3ebcd9ddcb..06471fb050 100644
--- a/src/new-frontend/src/pages/Root.tsx
+++ b/src/new-frontend/src/pages/Layout.tsx
@@ -7,7 +7,7 @@ import { Flex, useToast } from '@chakra-ui/react';
 import { useUserStore } from '../store/user-store';
 import UserMenu from '../components/UserMenu';
 
-const Root: React.FC = () => {
+const Layout: React.FC = () => {
     const toast = useToast();
     const { getUser } = useUserStore();
 
@@ -39,4 +39,4 @@ const Root: React.FC = () => {
     );
 };
 
-export default Root;
\ No newline at end of file
+export default Layout;
\ No newline at end of file

From 3f04e4a25bfb83ddf34099bd7010681e5d744812 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandra=20S=C3=A1nchez?= <ing.alejandrasanchezv@gmail.com>
Date: Fri, 16 Feb 2024 12:26:18 -0500
Subject: [PATCH 6/6] Add delete account confirmation and minor improvements

---
 src/new-frontend/src/modals/DeleteAlert.tsx   |  2 +-
 .../src/modals/DeleteConfirmation.tsx         | 72 +++++++++++++++++++
 src/new-frontend/src/panels/DeleteAccount.tsx |  8 ++-
 3 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 src/new-frontend/src/modals/DeleteConfirmation.tsx

diff --git a/src/new-frontend/src/modals/DeleteAlert.tsx b/src/new-frontend/src/modals/DeleteAlert.tsx
index 665168cf9e..a86ee580a3 100644
--- a/src/new-frontend/src/modals/DeleteAlert.tsx
+++ b/src/new-frontend/src/modals/DeleteAlert.tsx
@@ -55,7 +55,7 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
             >
                 <AlertDialogOverlay>
                     <AlertDialogContent as="form" onSubmit={handleSubmit(onSubmit)}>
-                        <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+                        <AlertDialogHeader>
                             Delete {type}
                         </AlertDialogHeader>
 
diff --git a/src/new-frontend/src/modals/DeleteConfirmation.tsx b/src/new-frontend/src/modals/DeleteConfirmation.tsx
new file mode 100644
index 0000000000..2f9cf9ca00
--- /dev/null
+++ b/src/new-frontend/src/modals/DeleteConfirmation.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+
+import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, useToast } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+
+interface DeleteProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
+    const toast = useToast();
+    const cancelRef = React.useRef<HTMLButtonElement | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const { handleSubmit } = useForm();
+
+    const onSubmit = async () => {
+        setIsLoading(true);
+        try {
+            // TODO: Delete user account when API is ready
+            onClose();
+        } catch (err) {
+            toast({
+                title: "An error occurred.",
+                description: `An error occurred while deleting your account.`,
+                status: "error",
+                isClosable: true,
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    }
+
+    return (
+        <>
+            <AlertDialog
+                isOpen={isOpen}
+                onClose={onClose}
+                leastDestructiveRef={cancelRef}
+                size={{ base: "sm", md: "md" }}
+                isCentered
+            >
+                <AlertDialogOverlay>
+                    <AlertDialogContent as="form" onSubmit={handleSubmit(onSubmit)}>
+                        <AlertDialogHeader>
+                            Confirmation Required
+                        </AlertDialogHeader>
+
+                        <AlertDialogBody>
+                            All your account data will be <b>permanently deleted.</b> If you're sure, please click <b>'Confirm'</b> to proceed.
+                        </AlertDialogBody>
+
+                        <AlertDialogFooter gap={3}>
+                            <Button bg="ui.danger" color="white" _hover={{ opacity: 0.8 }} type="submit" isLoading={isLoading}>
+                                Confirm
+                            </Button>
+                            <Button ref={cancelRef} onClick={onClose} isDisabled={isLoading}>
+                                Cancel
+                            </Button>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialogOverlay>
+            </AlertDialog >
+        </>
+    )
+}
+
+export default DeleteConfirmation;
+
+
+
+
diff --git a/src/new-frontend/src/panels/DeleteAccount.tsx b/src/new-frontend/src/panels/DeleteAccount.tsx
index 793605ccf5..9852c402e5 100644
--- a/src/new-frontend/src/panels/DeleteAccount.tsx
+++ b/src/new-frontend/src/panels/DeleteAccount.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
 
-import { Button, Container, Heading, Text } from '@chakra-ui/react';
+import { Button, Container, Heading, Text, useDisclosure } from '@chakra-ui/react';
+
+import DeleteConfirmation from '../modals/DeleteConfirmation';
 
 const DeleteAccount: React.FC = () => {
+    const confirmationModal = useDisclosure();
 
     return (
         <>
@@ -13,9 +16,10 @@ const DeleteAccount: React.FC = () => {
                 <Text>
                     Are you sure you want to delete your account? This action cannot be undone.
                 </Text>
-                <Button bg="ui.danger" color="white" _hover={{ opacity: 0.8 }} mt={4}>
+                <Button bg="ui.danger" color="white" _hover={{ opacity: 0.8 }} mt={4} onClick={confirmationModal.onOpen}>
                     Delete
                 </Button>
+                <DeleteConfirmation isOpen={confirmationModal.isOpen} onClose={confirmationModal.onClose} />
             </ Container>
         </>
     );