🎨 Tweak styling

Author: alejsdev

frontend/src/routes/_layout.tsx

@@ -28,8 +28,10 @@ function Layout() {
         <header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b px-4">
           <SidebarTrigger className="-ml-1 text-muted-foreground" />
         </header>
-        <main className="flex-1 p-4">
-          <Outlet />
+        <main className="flex-1 p-6 md:p-8">
+          <div className="mx-auto max-w-7xl">
+            <Outlet />
+          </div>
         </main>
         <Footer />
       </SidebarInset>

frontend/src/routes/_layout/index.tsx

@@ -1,4 +1,3 @@
-import { Box, Container, Text } from "@chakra-ui/react"
 import { createFileRoute } from "@tanstack/react-router"
 
 import useAuth from "@/hooks/useAuth"
@@ -11,13 +10,15 @@ function Dashboard() {
   const { user: currentUser } = useAuth()
 
   return (
-    <Container maxW="full">
-      <Box pt={12} m={4}>
-        <Text fontSize="2xl" truncate maxW="sm">
-          Hi, {currentUser?.full_name || currentUser?.email} 👋🏼
-        </Text>
-        <Text>Welcome back, nice to see you again!</Text>
-      </Box>
-    </Container>
+    <div>
+      <div>
+        <h1 className="text-2xl truncate max-w-sm">
+          Hi, {currentUser?.full_name || currentUser?.email} 👋
+        </h1>
+        <p className="text-muted-foreground">
+          Welcome back, nice to see you again!
+        </p>
+      </div>
+    </div>
   )
 }

frontend/src/routes/_layout/settings.tsx

@@ -27,8 +27,13 @@ function UserSettings() {
   }
 
   return (
-    <div>
-      <h1 className="text-2xl font-bold">User Settings</h1>
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">User Settings</h1>
+        <p className="text-muted-foreground">
+          Manage your account settings and preferences
+        </p>
+      </div>
 
       <Tabs defaultValue="my-profile">
         <TabsList>