♻️ Refactor and tweaks, rename UserCreateOpen to UserRegister and others (#1143)

frontend/src/components/Common/Navbar.tsx

@@ -18,7 +18,7 @@ const Navbar = ({ type }: NavbarProps) => {
         {/* TODO: Complete search functionality */}
         {/* <InputGroup w={{ base: '100%', md: 'auto' }}>
                     <InputLeftElement pointerEvents='none'>
-                        <Icon as={FaSearch} color='gray.400' />
+                        <Icon as={FaSearch} color='ui.dim' />
                     </InputLeftElement>
                     <Input type='text' placeholder='Search' fontSize={{ base: 'sm', md: 'inherit' }} borderRadius='8px' />
                 </InputGroup> */}

frontend/src/components/Common/Sidebar.tsx

@@ -22,8 +22,8 @@ import SidebarItems from "./SidebarItems"
 
 const Sidebar = () => {
   const queryClient = useQueryClient()
-  const bgColor = useColorModeValue("ui.white", "ui.dark")
-  const textColor = useColorModeValue("ui.dark", "ui.white")
+  const bgColor = useColorModeValue("ui.light", "ui.dark")
+  const textColor = useColorModeValue("ui.dark", "ui.light")
   const secBgColor = useColorModeValue("ui.secondary", "ui.darkSlate")
   const currentUser = queryClient.getQueryData<UserOut>("currentUser")
   const { isOpen, onOpen, onClose } = useDisclosure()

frontend/src/components/Common/SidebarItems.tsx

@@ -17,7 +17,7 @@ interface SidebarItemsProps {
 
 const SidebarItems = ({ onClose }: SidebarItemsProps) => {
   const queryClient = useQueryClient()
-  const textColor = useColorModeValue("ui.main", "ui.white")
+  const textColor = useColorModeValue("ui.main", "ui.light")
   const bgActive = useColorModeValue("#E2E8F0", "#4A5568")
   const currentUser = queryClient.getQueryData<UserOut>("currentUser")
 
@@ -25,13 +25,13 @@ const SidebarItems = ({ onClose }: SidebarItemsProps) => {
     ? [...items, { icon: FiUsers, title: "Admin", path: "/admin" }]
     : items
 
-  const listItems = finalItems.map((item) => (
+  const listItems = finalItems.map(({ icon, title, path }) => (
     <Flex
       as={Link}
-      to={item.path}
+      to={path}
       w="100%"
       p={2}
-      key={item.title}
+      key={title}
       activeProps={{
         style: {
           background: bgActive,
@@ -41,8 +41,8 @@ const SidebarItems = ({ onClose }: SidebarItemsProps) => {
       color={textColor}
       onClick={onClose}
     >
-      <Icon as={item.icon} alignSelf="center" />
-      <Text ml={2}>{item.title}</Text>
+      <Icon as={icon} alignSelf="center" />
+      <Text ml={2}>{title}</Text>
     </Flex>
   ))
 

frontend/src/components/Common/UserMenu.tsx

@@ -6,10 +6,10 @@ import {
   MenuItem,
   MenuList,
 } from "@chakra-ui/react"
+import { Link } from "@tanstack/react-router"
 import { FaUserAstronaut } from "react-icons/fa"
 import { FiLogOut, FiUser } from "react-icons/fi"
 
-import { Link } from "@tanstack/react-router"
 import useAuth from "../../hooks/useAuth"
 
 const UserMenu = () => {