🎨 Improve styles (#673)

Author: alejsdev

frontend/src/components/Common/Sidebar.tsx

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

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', 'ui.light')
+  const textColor = useColorModeValue('ui.main', 'ui.white')
   const bgActive = useColorModeValue('#E2E8F0', '#4A5568')
   const currentUser = queryClient.getQueryData<UserOut>('currentUser')
 

frontend/src/index.css

@@ -1,4 +1,4 @@
-import { Container, Text } from '@chakra-ui/react'
+import { Box, Container, Text } from '@chakra-ui/react'
 import { useQueryClient } from 'react-query'
 import { createFileRoute } from '@tanstack/react-router'
 
@@ -15,11 +15,13 @@ function Dashboard() {
 
   return (
     <>
-      <Container maxW="full" pt={12}>
+      <Container maxW="full">
+        <Box pt={12} m={4}>
         <Text fontSize="2xl">
           Hi, {currentUser?.full_name || currentUser?.email} 👋🏼
         </Text>
         <Text>Welcome back, nice to see you again!</Text>
+        </Box>
       </Container>
     </>
   )

frontend/src/routes/_layout/index.tsx

@@ -13,9 +13,8 @@ const theme = extendTheme({
       secondary: '#EDF2F7',
       success: '#48BB78',
       danger: '#E53E3E',
-      light: '#E2E8F0',
-      dark: '#1A202C',
       white: '#FFFFFF',
+      dark: '#1A202C',
       darkSlate: '#252D3D',
     },
   },