From eed628a43e2d6398947976597f73198847cdd658 Mon Sep 17 00:00:00 2001
From: Alejandra <90076947+alejsdev@users.noreply.github.com>
Date: Mon, 11 Mar 2024 17:56:59 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Improve=20styles=20(#673)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Common/Sidebar.tsx    |  2 +-
 .../src/components/Common/SidebarItems.tsx    |  2 +-
 frontend/src/index.css                        | 68 -------------------
 frontend/src/routes/_layout/index.tsx         |  6 +-
 frontend/src/theme.tsx                        |  3 +-
 5 files changed, 7 insertions(+), 74 deletions(-)
 delete mode 100644 frontend/src/index.css

diff --git a/frontend/src/components/Common/Sidebar.tsx b/frontend/src/components/Common/Sidebar.tsx
index 4ea938b..65d0fc5 100644
--- a/frontend/src/components/Common/Sidebar.tsx
+++ b/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()
diff --git a/frontend/src/components/Common/SidebarItems.tsx b/frontend/src/components/Common/SidebarItems.tsx
index d15586a..9457d03 100644
--- 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', 'ui.light')
+  const textColor = useColorModeValue('ui.main', 'ui.white')
   const bgActive = useColorModeValue('#E2E8F0', '#4A5568')
   const currentUser = queryClient.getQueryData<UserOut>('currentUser')
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
deleted file mode 100644
index 6119ad9..0000000
--- a/frontend/src/index.css
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/frontend/src/routes/_layout/index.tsx b/frontend/src/routes/_layout/index.tsx
index 852fb37..550dd20 100644
--- a/frontend/src/routes/_layout/index.tsx
+++ b/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>
     </>
   )
diff --git a/frontend/src/theme.tsx b/frontend/src/theme.tsx
index 2b9a2b6..293ebb0 100644
--- a/frontend/src/theme.tsx
+++ b/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',
     },
   },