Merge pull request #53 from gileadekelvin/refactor/simplify-ui

refactor: simplify ui
gileadekelvin · Mar 13, 2024 · e2adae9 · e2adae9
2 parents 4ad354b + c49c651
commit e2adae9
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 105 deletions.
diff --git a/src/JoyTheme.ts b/src/JoyTheme.ts
@@ -79,7 +79,7 @@ const joyTheme = extendJoyTheme({
       palette: {
         divider: '#000',
         background: {
-          body: '#F4F6F6',
+          body: '#fff',
         },
         primary: {
           softBg: '#AEDAFA',
@@ -88,78 +88,6 @@ const joyTheme = extendJoyTheme({
       },
     },
   },
-  components: {
-    JoyCircularProgress: {
-      styleOverrides: {
-        root: ({ ownerState, theme }) => ({
-          ...(ownerState.size === 'sm' && {
-            '--CircularProgress-size': '16px',
-          }),
-        }),
-      },
-    },
-    JoyButton: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          borderRadius: 0,
-          border: '2px solid #000',
-          boxShadow: '2px 2px #000',
-          ':focus-visible': {
-            outline: 'none',
-          },
-        }),
-      },
-    },
-    JoyCard: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          border: '2px solid #000',
-        }),
-      },
-    },
-    JoyMenu: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          borderRadius: 0,
-          border: '2px solid #000',
-          boxShadow: '1px 1px #000',
-        }),
-      },
-    },
-    JoyListDivider: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          backgroundColor: '#000',
-          blockSize: '2px',
-        }),
-      },
-    },
-    JoyAvatar: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          border: '2px solid #000',
-          boxShadow: '1px 1px #000',
-        }),
-      },
-    },
-    JoyListItemButton: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          border: '2px solid #000',
-          boxShadow: '2px 2px #000',
-          marginBottom: '2px',
-        }),
-      },
-    },
-    JoyModalDialog: {
-      styleOverrides: {
-        root: ({ theme }) => ({
-          border: '2px solid #000',
-          boxShadow: '4px 4px #000',
-        }),
-      },
-    },
-  },
 });
 
 // You can use your own `deepmerge` function.

diff --git a/src/components/Layout/Navbar/index.tsx b/src/components/Layout/Navbar/index.tsx
@@ -28,7 +28,6 @@ const ColorSchemeToggle = () => {
       size='sm'
       variant='outlined'
       color='primary'
-      sx={{ border: '2px solid #000', boxShadow: '2px 2px #000' }}
       onClick={() => {
         if (mode === 'light') {
           setMode('dark');

diff --git a/src/components/Layout/Wrappers/index.tsx b/src/components/Layout/Wrappers/index.tsx
@@ -29,8 +29,8 @@ const Header = (props: BoxProps) => (
         justifyContent: 'space-between',
         alignItems: 'center',
         gridColumn: '1 / -1',
-        borderBottom: '2px solid',
-        borderColor: 'divider',
+        borderBottom: '1px solid',
+        borderColor: '#ccc',
         position: 'fixed',
         minWidth: 'calc(100% - 48px)',
         top: 0,
@@ -55,8 +55,6 @@ const SideNav = (props: BoxProps) => (
         bottom: 0,
         minWidth: '240px',
         bgcolor: 'background.body',
-        borderRight: '2px solid',
-        borderColor: 'divider',
         display: {
           xs: 'none',
           sm: 'initial',

diff --git a/src/components/daily/Daily/Actions/index.tsx b/src/components/daily/Daily/Actions/index.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import IconButton from '@mui/joy/IconButton';
 import MoreHoriz from '@mui/icons-material/MoreHoriz';
-import { ListDivider, Menu, MenuItem, IconButtonProps } from '@mui/joy';
+import { Menu, MenuItem, IconButtonProps } from '@mui/joy';
 
 import DeleteDaily from '../../DeleteDaily';
 import UpdateDaily from '../../UpdateDaily';
@@ -26,7 +26,7 @@ const Actions = (props: ActionsProps) => {
         variant='soft'
         color='neutral'
         size='sm'
-        sx={{ ml: 'auto', border: '2px solid', boxShadow: '1px 1px' }}
+        sx={{ ml: 'auto' }}
         onClick={handleClick}
       >
         <MoreHoriz />
@@ -38,11 +38,10 @@ const Actions = (props: ActionsProps) => {
         onClose={handleClose}
         placement='bottom-end'
       >
-        <MenuItem sx={{ padding: 0, border: 0, boxShadow: 'none' }}>
+        <MenuItem>
           <UpdateDaily id={id} daily={daily} />
         </MenuItem>
-        <ListDivider />
-        <MenuItem color='danger' sx={{ padding: 0,  border: 0, boxShadow: 'none'}}>
+        <MenuItem color='danger'>
           <DeleteDaily id={id} />
         </MenuItem>
       </Menu>

diff --git a/src/components/daily/Daily/index.tsx b/src/components/daily/Daily/index.tsx
@@ -40,17 +40,17 @@ const Daily = (props: DailyProps) => {
       </Box>
       <TaskList
         title={t('daily.yesterday')}
-        color={joyTheme.vars.palette.info.plainHoverBg}
+        color={joyTheme.vars.palette.neutral.plainHoverBg}
         tasks={daily.yesterday}
       />
       <TaskList
         title={t('daily.today')}
-        color={joyTheme.vars.palette.warning.plainHoverBg}
+        color={joyTheme.vars.palette.neutral.plainHoverBg}
         tasks={daily.today}
       />
       <TaskList
         title={t('daily.blocks')}
-        color={joyTheme.vars.palette.danger.plainHoverBg}
+        color={joyTheme.vars.palette.neutral.plainHoverBg}
         tasks={daily.blocks}
       />
     </Card>

diff --git a/src/components/daily/DailyInputDialog/TaskInput/index.tsx b/src/components/daily/DailyInputDialog/TaskInput/index.tsx
@@ -21,12 +21,8 @@ const TaskInput = (props: TaskInputProps) => {
       <Typography
         level='body1'
         fontWeight='lg'
-        textAlign='center'
         sx={{
           width: '70px',
-          backgroundColor: color,
-          padding: '3px',
-          border: '2px solid #000',
         }}
       >
         {t(`daily.${title}`)}
@@ -41,9 +37,6 @@ const TaskInput = (props: TaskInputProps) => {
                     <Textarea
                       {...field}
                       sx={{
-                        borderColor: color,
-                        borderWidth: '2px',
-                        boxShadow: `3px 3px ${color}`,
                         fontSize: '14px',
                       }}
                     />
@@ -70,7 +63,7 @@ const TaskInput = (props: TaskInputProps) => {
       <Box textAlign='center'>
         <Button
           size='sm'
-          variant='plain'
+          variant='soft'
           onClick={() => {
             append({ text: '' });
           }}

diff --git a/src/components/daily/DailyInputDialog/index.tsx b/src/components/daily/DailyInputDialog/index.tsx
@@ -4,7 +4,6 @@ import {
   Modal,
   ModalDialog,
   Typography,
-  Divider,
   Box,
   Stack,
   CircularProgress,
@@ -81,25 +80,24 @@ const DailyInputDialog = (props: DailyInputDialogProps) => {
           },
         }}
       >
-        <Typography level='h2' fontSize='lg' px={2}>
+        <Typography level='h2' fontSize='lg' px={2} pb={3}>
           {title ?? t('daily.create.title')}
         </Typography>
-        <Divider sx={{ my: 2, mx: 0, blockSize: '2px', boxShadow: 'none' }} />
         <Box overflow='auto' maxHeight={{ xs: '90vh', md: '70vh' }} px={2}>
           <Stack spacing={1.5} sx={{ marginBottom: 4 }}>
             <TaskInput
               title='yesterday'
-              color={joyTheme.vars.palette.info.plainHoverBg}
+              color={joyTheme.vars.palette.neutral.plainHoverBg}
               control={control}
             />
             <TaskInput
               title='today'
-              color={joyTheme.vars.palette.warning.plainHoverBg}
+              color={joyTheme.vars.palette.neutral.plainHoverBg}
               control={control}
             />
             <TaskInput
               title='blocks'
-              color={joyTheme.vars.palette.danger.plainHoverBg}
+              color={joyTheme.vars.palette.neutral.plainHoverBg}
               control={control}
             />
           </Stack>

diff --git a/src/components/ui/Task/index.tsx b/src/components/ui/Task/index.tsx
@@ -18,7 +18,7 @@ const Task = (props: TaskProps) => {
         borderColor: color,
       }}
     >
-      <Typography level='body1' fontWeight={600}>
+      <Typography level='body1'>
         {task.text}
       </Typography>
     </Card>

diff --git a/src/components/ui/TaskList/index.tsx b/src/components/ui/TaskList/index.tsx
@@ -12,12 +12,8 @@ const TaskList = (props: TaskListProps) => {
         level='body1'
         fontWeight='lg'
         textColor='text.primary'
-        textAlign='center'
         sx={{
           width: '70px',
-          backgroundColor: color,
-          padding: '3px',
-          border: '2px solid #000',
         }}
       >
         {title}