🎨 Update theme (#666)

1 year ago · 7cf9577ebb
15 changed files with 53 additions and 53 deletions
--- 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>
--- 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}
--- 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
--- 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}
--- 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()
--- 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')

--- 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>
--- 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}
--- 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}
--- 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
--- 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}
--- 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">
--- 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>
--- 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>
--- a/frontend/src/theme.tsx
+++ b/frontend/src/theme.tsx
@ -1,5 +1,11 @@
 import { extendTheme } from '@chakra-ui/react'

+const disabledStyles = {
+  _disabled: {
+    backgroundColor: 'ui.main',
+  },
+}
+
 const theme = extendTheme({
  colors: {
    ui: {
@ -7,9 +13,37 @@ const theme = extendTheme({
      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: {