🎨 Update theme (#666)

frontend/src/components/Common/DeleteAlert.tsx

@@ -89,13 +89,7 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
             </AlertDialogBody>
 
             <AlertDialogFooter gap={3}>
-              <Button
-                bg="ui.danger"
-                color="white"
-                _hover={{ opacity: 0.8 }}
-                type="submit"
-                isLoading={isSubmitting}
-              >
+              <Button variant="danger" type="submit" isLoading={isSubmitting}>
                 Delete
               </Button>
               <Button

frontend/src/components/Common/Navbar.tsx

@@ -24,9 +24,7 @@ const Navbar: React.FC<NavbarProps> = ({ type }) => {
                     <Input type='text' placeholder='Search' fontSize={{ base: 'sm', md: 'inherit' }} borderRadius='8px' />
                 </InputGroup> */}
         <Button
-          bg="ui.main"
-          color="white"
-          _hover={{ opacity: 0.8 }}
+          variant="primary"
           gap={1}
           fontSize={{ base: 'sm', md: 'inherit' }}
           onClick={type === 'User' ? addUserModal.onOpen : addItemModal.onOpen}

frontend/src/components/Common/Sidebar.tsx

@@ -23,9 +23,9 @@ import SidebarItems from './SidebarItems'
 
 const Sidebar: React.FC = () => {
   const queryClient = useQueryClient()
-  const bgColor = useColorModeValue('white', '#1a202c')
-  const textColor = useColorModeValue('gray', 'white')
-  const secBgColor = useColorModeValue('ui.secondary', '#252d3d')
+  const bgColor = useColorModeValue('ui.white', 'ui.dark')
+  const textColor = useColorModeValue('ui.light', 'ui.white')
+  const secBgColor = useColorModeValue('ui.secondary', 'ui.darkSlate')
   const currentUser = queryClient.getQueryData<UserOut>('currentUser')
   const { isOpen, onOpen, onClose } = useDisclosure()
   const { logout } = useAuth()

frontend/src/components/Common/SidebarItems.tsx

@@ -18,7 +18,7 @@ interface SidebarItemsProps {
 
 const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
   const queryClient = useQueryClient()
-  const textColor = useColorModeValue('ui.main', '#E2E8F0')
+  const textColor = useColorModeValue('ui.main', 'ui.light')
   const bgActive = useColorModeValue('#E2E8F0', '#4A5568')
   const currentUser = queryClient.getQueryData<UserOut>('currentUser')