🎨 Improve styles (#673)

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,68 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

frontend/src/routes/_layout/index.tsx

@@ -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/theme.tsx

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