From 93e03184d691dec82db99b47fe8cf923c21cd779 Mon Sep 17 00:00:00 2001 From: Alejandra <90076947+alejsdev@users.noreply.github.com> Date: Fri, 16 Feb 2024 13:38:00 -0500 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20dark=20mode=20to=20new-fronte?= =?UTF-8?q?nd=20and=20conditional=20sidebar=20items=20(#600)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ActionsMenu.tsx | 2 +- src/new-frontend/src/components/Sidebar.tsx | 16 +++-- .../src/components/SidebarItems.tsx | 18 +++-- src/new-frontend/src/components/UserMenu.tsx | 2 +- src/new-frontend/src/modals/DeleteAlert.tsx | 2 +- .../src/modals/DeleteConfirmation.tsx | 72 +++++++++++++++++++ src/new-frontend/src/pages/Admin.tsx | 2 +- src/new-frontend/src/pages/Dashboard.tsx | 6 +- src/new-frontend/src/pages/Items.tsx | 2 +- .../src/pages/{Root.tsx => Layout.tsx} | 4 +- .../src/pages/RecoverPassword.tsx | 2 +- src/new-frontend/src/pages/UserSettings.tsx | 2 +- src/new-frontend/src/panels/Appearance.tsx | 14 ++-- .../src/panels/ChangePassword.tsx | 9 +-- src/new-frontend/src/panels/DeleteAccount.tsx | 8 ++- .../src/panels/UserInformation.tsx | 15 ++-- 16 files changed, 130 insertions(+), 46 deletions(-) create mode 100644 src/new-frontend/src/modals/DeleteConfirmation.tsx rename src/new-frontend/src/pages/{Root.tsx => Layout.tsx} (95%) diff --git a/src/new-frontend/src/components/ActionsMenu.tsx b/src/new-frontend/src/components/ActionsMenu.tsx index ea7d8bd..2a3a2a7 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 = ({ type, id }) => { return ( <> - } variant="unstyled"> + } variant="unstyled"> }>Edit {type} diff --git a/src/new-frontend/src/components/Sidebar.tsx b/src/new-frontend/src/components/Sidebar.tsx index 0d28152..8450fb0 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 bgColor = useColorModeValue("white", "#1a202c"); + const textColor = useColorModeValue("gray", "white"); + const secBgColor = useColorModeValue("ui.secondary", "#252d3d"); + const { isOpen, onOpen, onClose } = useDisclosure(); const { user } = useUserStore(); @@ -18,7 +22,7 @@ const Sidebar: React.FC = () => { } /> - + @@ -28,7 +32,7 @@ const Sidebar: React.FC = () => { { user?.email && - Logged in as: {user.email} + Logged in as: {user.email} } @@ -36,15 +40,15 @@ const Sidebar: React.FC = () => { {/* Desktop */} - - + + Logo { user?.email && - Logged in as: {user.email} + Logged in as: {user.email} } diff --git a/src/new-frontend/src/components/SidebarItems.tsx b/src/new-frontend/src/components/SidebarItems.tsx index 2282aaa..19c1d93 100644 --- a/src/new-frontend/src/components/SidebarItems.tsx +++ b/src/new-frontend/src/components/SidebarItems.tsx @@ -1,13 +1,14 @@ 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'; +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" }, ]; @@ -16,9 +17,14 @@ interface SidebarItemsProps { } const SidebarItems: React.FC = ({ 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) => ( = ({ onClose }) => { p={2} key={item.title} style={location.pathname === item.path ? { - background: "#E2E8F0", + background: bgActive, borderRadius: "12px", } : {}} - color="ui.main" + color={textColor} onClick={onClose} > @@ -42,7 +48,7 @@ const SidebarItems: React.FC = ({ onClose }) => { {listItems} - + ); }; diff --git a/src/new-frontend/src/components/UserMenu.tsx b/src/new-frontend/src/components/UserMenu.tsx index 224af60..7f515fc 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 = () => { } as={Link} to="settings"> My profile - } onClick={handleLogout} color="ui.danger"> + } onClick={handleLogout} color="ui.danger" fontWeight="bold"> Log out diff --git a/src/new-frontend/src/modals/DeleteAlert.tsx b/src/new-frontend/src/modals/DeleteAlert.tsx index 665168c..a86ee58 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 = ({ type, id, isOpen, onClose }) => { > - + Delete {type} diff --git a/src/new-frontend/src/modals/DeleteConfirmation.tsx b/src/new-frontend/src/modals/DeleteConfirmation.tsx new file mode 100644 index 0000000..2f9cf9c --- /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 = ({ isOpen, onClose }) => { + const toast = useToast(); + const cancelRef = React.useRef(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 ( + <> + + + + + Confirmation Required + + + + All your account data will be permanently deleted. If you're sure, please click 'Confirm' to proceed. + + + + + + + + + + + ) +} + +export default DeleteConfirmation; + + + + diff --git a/src/new-frontend/src/pages/Admin.tsx b/src/new-frontend/src/pages/Admin.tsx index 17b410f..ee97f86 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 && - + User Management diff --git a/src/new-frontend/src/pages/Dashboard.tsx b/src/new-frontend/src/pages/Dashboard.tsx index e0a5e07..c5b452c 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 ( <> - + Hi, {user?.full_name || user?.email} 👋🏼 Welcome back, nice to see you again! - + ) diff --git a/src/new-frontend/src/pages/Items.tsx b/src/new-frontend/src/pages/Items.tsx index bcf1c04..e3e273b 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 && - + Items Management 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 3ebcd9d..06471fb 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 diff --git a/src/new-frontend/src/pages/RecoverPassword.tsx b/src/new-frontend/src/pages/RecoverPassword.tsx index 4de1aba..23c4412 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 - + A password recovery email will be sent to the registered account. { return ( <> - + User Settings diff --git a/src/new-frontend/src/panels/Appearance.tsx b/src/new-frontend/src/panels/Appearance.tsx index 71caee6..07f9880 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 = () => { Appearance - + - - Use system settings (default) - - Light + Light (default) Dark - - + ); } diff --git a/src/new-frontend/src/panels/ChangePassword.tsx b/src/new-frontend/src/panels/ChangePassword.tsx index 1f1f056..19bef94 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 = () => { - Old password + Old password - New password + New password - Confirm new password + Confirm new password + ); diff --git a/src/new-frontend/src/panels/UserInformation.tsx b/src/new-frontend/src/panels/UserInformation.tsx index 13f6ba2..ff73912 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,21 +21,21 @@ const UserInformation: React.FC = () => { User Information - Full name + Full name { editMode ? - : - + : + {user?.full_name || "N/A"} } - Email + Email { editMode ? - : - + : + {user?.email || "N/A"} }