🎨 Update theme (#666)

alejsdev · web-flow · commit 7cf9577ebbf3 · 2024-03-11T15:50:46.000Z
diff --git a/frontend/src/components/Admin/AddUser.tsx b/frontend/src/components/Admin/AddUser.tsx
@@ -174,13 +174,7 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
             </Flex>
           </ModalBody>
           <ModalFooter gap={3}>
-            <Button
-              bg="ui.main"
-              color="white"
-              _hover={{ opacity: 0.8 }}
-              type="submit"
-              isLoading={isSubmitting}
-            >
+            <Button variant="primary" type="submit" isLoading={isSubmitting}>
               Save
             </Button>
             <Button onClick={onClose}>Cancel</Button>
diff --git a/frontend/src/components/Admin/EditUser.tsx b/frontend/src/components/Admin/EditUser.tsx
@@ -163,9 +163,7 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
 
           <ModalFooter gap={3}>
             <Button
-              bg="ui.main"
-              color="white"
-              _hover={{ opacity: 0.8 }}
+              variant="primary"
               type="submit"
               isLoading={isSubmitting}
               isDisabled={!isDirty}
diff --git a/frontend/src/components/Common/DeleteAlert.tsx b/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
diff --git a/frontend/src/components/Common/Navbar.tsx b/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}
diff --git a/frontend/src/components/Common/Sidebar.tsx b/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()
diff --git a/frontend/src/components/Common/SidebarItems.tsx b/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')
 
diff --git a/frontend/src/components/Items/AddItem.tsx b/frontend/src/components/Items/AddItem.tsx
@@ -103,13 +103,7 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
           </ModalBody>
 
           <ModalFooter gap={3}>
-            <Button
-              bg="ui.main"
-              color="white"
-              _hover={{ opacity: 0.8 }}
-              type="submit"
-              isLoading={isSubmitting}
-            >
+            <Button variant="primary" type="submit" isLoading={isSubmitting}>
               Save
             </Button>
             <Button onClick={onClose}>Cancel</Button>
diff --git a/frontend/src/components/Items/EditItem.tsx b/frontend/src/components/Items/EditItem.tsx
@@ -104,9 +104,7 @@ const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
           </ModalBody>
           <ModalFooter gap={3}>
             <Button
-              bg="ui.main"
-              color="white"
-              _hover={{ opacity: 0.8 }}
+              variant="primary"
               type="submit"
               isLoading={isSubmitting}
               isDisabled={!isDirty}
diff --git a/frontend/src/components/UserSettings/ChangePassword.tsx b/frontend/src/components/UserSettings/ChangePassword.tsx
@@ -21,7 +21,7 @@ interface UpdatePasswordForm extends UpdatePassword {
 }
 
 const ChangePassword: React.FC = () => {
-  const color = useColorModeValue('gray.700', 'white')
+  const color = useColorModeValue('inherit', 'ui.white')
   const showToast = useCustomToast()
   const {
     register,
@@ -114,9 +114,7 @@ const ChangePassword: React.FC = () => {
             )}
           </FormControl>
           <Button
-            bg="ui.main"
-            color="white"
-            _hover={{ opacity: 0.8 }}
+            variant="primary"
             mt={4}
             type="submit"
             isLoading={isSubmitting}
diff --git a/frontend/src/components/UserSettings/DeleteConfirmation.tsx b/frontend/src/components/UserSettings/DeleteConfirmation.tsx
@@ -79,13 +79,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ 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}>
                 Confirm
               </Button>
               <Button
diff --git a/frontend/src/components/UserSettings/UserInformation.tsx b/frontend/src/components/UserSettings/UserInformation.tsx
@@ -21,7 +21,7 @@ import useCustomToast from '../../hooks/useCustomToast'
 
 const UserInformation: React.FC = () => {
   const queryClient = useQueryClient()
-  const color = useColorModeValue('gray.700', 'white')
+  const color = useColorModeValue('inherit', 'ui.white')
   const showToast = useCustomToast()
   const [editMode, setEditMode] = useState(false)
   const { user: currentUser } = useAuth()
@@ -109,7 +109,7 @@ const UserInformation: React.FC = () => {
                     message: 'Invalid email address',
                   },
                 })}
-                type="text"
+                type="email"
                 size="md"
               />
             ) : (
@@ -123,9 +123,7 @@ const UserInformation: React.FC = () => {
           </FormControl>
           <Flex mt={4} gap={3}>
             <Button
-              bg="ui.main"
-              color="white"
-              _hover={{ opacity: 0.8 }}
+              variant="primary"
               onClick={toggleEditMode}
               type={editMode ? 'button' : 'submit'}
               isLoading={editMode ? isSubmitting : false}
diff --git a/frontend/src/routes/_layout/admin.tsx b/frontend/src/routes/_layout/admin.tsx
@@ -73,7 +73,7 @@ function Admin() {
                 <Tbody>
                   {users.data.map((user) => (
                     <Tr key={user.id}>
-                      <Td color={!user.full_name ? 'gray.600' : 'inherit'}>
+                      <Td color={!user.full_name ? 'gray.400' : 'inherit'}>
                         {user.full_name || 'N/A'}
                         {currentUser?.id === user.id && (
                           <Badge ml="1" colorScheme="teal">
diff --git a/frontend/src/routes/_layout/items.tsx b/frontend/src/routes/_layout/items.tsx
@@ -70,7 +70,7 @@ function Items() {
                     <Tr key={item.id}>
                       <Td>{item.id}</Td>
                       <Td>{item.title}</Td>
-                      <Td color={!item.description ? 'gray.600' : 'inherit'}>
+                      <Td color={!item.description ? 'gray.400' : 'inherit'}>
                         {item.description || 'N/A'}
                       </Td>
                       <Td>
diff --git a/frontend/src/routes/login.tsx b/frontend/src/routes/login.tsx
@@ -93,7 +93,7 @@ function Login() {
               },
             })}
             placeholder="Email"
-            type="text"
+            type="email"
           />
           {errors.username && (
             <FormErrorMessage>{errors.username.message}</FormErrorMessage>
diff --git a/frontend/src/theme.tsx b/frontend/src/theme.tsx
@@ -1,15 +1,49 @@
 import { extendTheme } from '@chakra-ui/react'
 
+const disabledStyles = {
+  _disabled: {
+    backgroundColor: 'ui.main',
+  },
+}
+
 const theme = extendTheme({
   colors: {
     ui: {
       main: '#009688',
       secondary: '#EDF2F7',
       success: '#48BB78',
       danger: '#E53E3E',
+      light: '#E2E8F0',
+      dark: '#1A202C',
+      white: '#FFFFFF',
+      darkSlate: '#252D3D',
     },
   },
   components: {
+    Button: {
+      variants: {
+        primary: {
+          backgroundColor: 'ui.main',
+          color: 'ui.white',
+          _hover: {
+            backgroundColor: '#00766C',
+          },
+          _disabled: {
+            ...disabledStyles,
+            _hover: {
+              ...disabledStyles,
+            },
+          },
+        },
+        danger: {
+          backgroundColor: 'ui.danger',
+          color: 'ui.white',
+          _hover: {
+            backgroundColor: '#E32727',
+          },
+        },
+      },
+    },
     Tabs: {
       variants: {
         enclosed: {
