nt_web_template/full-stack-fastapi-template
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

✨ Add dark mode to new-frontend and conditional sidebar items (#600)

Browse Source
This commit is contained in:
Alejandra
2024-02-16 13:38:00 -05:00
committed by GitHub
parent b470f59ce2
commit 93e03184d6
16 changed files with 130 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/new-frontend/src/components/ActionsMenu.tsx
View File

@@ -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>

16
src/new-frontend/src/components/Sidebar.tsx
View File

@@ -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 = () => {
<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={textColor} 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={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='gray' 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>

18
src/new-frontend/src/components/SidebarItems.tsx
View File

@@ -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<SidebarItemsProps> = ({ onClose }) => {
const textColor = useColorModeValue("ui.main", "#E2E8F0");
const bgActive = useColorModeValue("#E2E8F0", "#4A5568");
const location = useLocation();
const { user } = useUserStore();
const listItems = items.map((item) => (
const finalItems = user?.is_superuser ? [...items, { icon: FiUsers, title: 'Admin', path: "/admin" }] : items;
const listItems = finalItems.map((item) => (
<Flex
as={Link}
to={item.path}
@@ -26,10 +32,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 +48,7 @@ const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
<Box>
{listItems}
</Box>
</>
);
};

2
src/new-frontend/src/components/UserMenu.tsx
View File

@@ -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>

2
src/new-frontend/src/modals/DeleteAlert.tsx
View File

@@ -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>

72
src/new-frontend/src/modals/DeleteConfirmation.tsx Normal file
View File

@@ -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;

2
src/new-frontend/src/pages/Admin.tsx
View File

@@ -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"} />

6
src/new-frontend/src/pages/Dashboard.tsx
View File

@@ -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>
</>
)

2
src/new-frontend/src/pages/Items.tsx
View File

@@ -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"} />

4
src/new-frontend/src/pages/Root.tsx → src/new-frontend/src/pages/Layout.tsx
View File

@@ -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;
export default Layout;

2
src/new-frontend/src/pages/RecoverPassword.tsx
View File

@@ -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

2
src/new-frontend/src/pages/UserSettings.tsx
View File

@@ -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' >

14
src/new-frontend/src/panels/Appearance.tsx
View File

@@ -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>
</>
);
}

9
src/new-frontend/src/panels/ChangePassword.tsx
View File

@@ -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">

8
src/new-frontend/src/panels/DeleteAccount.tsx
View File

@@ -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>
</>
);

15
src/new-frontend/src/panels/UserInformation.tsx
View File

@@ -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
</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" /> :
<Text>
<Input placeholder={user?.full_name || "Full name"} type="text" size="md" /> :
<Text size="md" py={2}>
{user?.full_name || "N/A"}
</Text>
}
</FormControl>
<FormControl mt={4}>
<FormLabel color="gray.700">Email</FormLabel>
<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>
}