small stuff

src/app/globals.css

@@ -124,11 +124,11 @@
 :root {
   --background: oklch(0.9653 0.0069 247.8959);
   --foreground: oklch(0.2077 0.0398 265.7549);
-  --card: oklch(1.0000 0 0);
+  --card: oklch(1 0 0);
   --card-foreground: oklch(0.2077 0.0398 265.7549);
-  --popover: oklch(1.0000 0 0);
+  --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.2077 0.0398 265.7549);
-  --primary: oklch(0.7182 0.1105 239.7840);
+  --primary: oklch(0.7182 0.1105 239.784);
   --primary-foreground: oklch(0.3233 0.1025 253.8852);
   --secondary: oklch(0.5544 0.0407 257.4166);
   --secondary-foreground: oklch(0.2077 0.0398 265.7549);
@@ -138,33 +138,39 @@
   --accent-foreground: oklch(0.2559 0.0901 256.7898);
   --destructive: oklch(0.5054 0.1905 27.5181);
   --destructive-foreground: oklch(0.9842 0.0034 247.8575);
-  --border: oklch(0.8690 0.0198 252.8943);
+  --border: oklch(0.869 0.0198 252.8943);
   --input: oklch(0.9288 0.0126 255.5078);
-  --ring: oklch(0.7182 0.1105 239.7840);
+  --ring: oklch(0.7182 0.1105 239.784);
   --chart-1: oklch(0.5854 0.2041 277.1173);
-  --chart-2: oklch(0.6231 0.1880 259.8145);
+  --chart-2: oklch(0.6231 0.188 259.8145);
   --chart-3: oklch(0.6271 0.1699 149.2138);
-  --chart-4: oklch(0.5771 0.2152 27.3250);
+  --chart-4: oklch(0.5771 0.2152 27.325);
   --chart-5: oklch(0.6658 0.1574 58.3183);
   --sidebar: oklch(0.9755 0.0045 258.3245);
   --sidebar-foreground: oklch(0.2077 0.0398 265.7549);
-  --sidebar-primary: oklch(0.7182 0.1105 239.7840);
+  --sidebar-primary: oklch(0.7182 0.1105 239.784);
   --sidebar-primary-foreground: oklch(0.3233 0.1025 253.8852);
   --sidebar-accent: oklch(0.7516 0.1286 257.4419);
   --sidebar-accent-foreground: oklch(0.2559 0.0901 256.7898);
-  --sidebar-border: oklch(0.8690 0.0198 252.8943);
-  --sidebar-ring: oklch(0.7182 0.1105 239.7840);
-  --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --sidebar-border: oklch(0.869 0.0198 252.8943);
+  --sidebar-ring: oklch(0.7182 0.1105 239.784);
+  --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   --font-serif: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
   --font-mono: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   --radius: 0.5rem;
   --shadow-2xs: 0px 5px 25px 0px hsl(0 0% 0% / 0.05);
   --shadow-xs: 0px 5px 25px 0px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0px 5px 25px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow: 0px 5px 25px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0px 5px 25px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0px 5px 25px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0px 5px 25px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-sm: 0px 5px 25px 0px hsl(0 0% 0% / 0.1),
+    0px 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0px 5px 25px 0px hsl(0 0% 0% / 0.1),
+    0px 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0px 5px 25px 0px hsl(0 0% 0% / 0.1),
+    0px 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0px 5px 25px 0px hsl(0 0% 0% / 0.1),
+    0px 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0px 5px 25px 0px hsl(0 0% 0% / 0.1),
+    0px 8px 10px -1px hsl(0 0% 0% / 0.1);
   --shadow-2xl: 0px 5px 25px 0px hsl(0 0% 0% / 0.25);
   --tracking-normal: -0.025em;
   --spacing: 0.25rem;
@@ -173,47 +179,53 @@
 .dark {
   --background: oklch(0.2077 0.0398 265.7549);
   --foreground: oklch(0.9108 0.0427 269.5516);
-  --card: oklch(0.2176 0.0499 264.1230);
+  --card: oklch(0.2176 0.0499 264.123);
   --card-foreground: oklch(0.9108 0.0427 269.5516);
   --popover: oklch(0.2927 0.0604 263.5595);
   --popover-foreground: oklch(0.9108 0.0427 269.5516);
-  --primary: oklch(0.7182 0.1105 239.7840);
+  --primary: oklch(0.7182 0.1105 239.784);
   --primary-foreground: oklch(0.3233 0.1025 253.8852);
   --secondary: oklch(0.5544 0.0407 257.4166);
   --secondary-foreground: oklch(0.9288 0.0126 255.5078);
   --muted: oklch(0.3923 0.0613 254.3914);
-  --muted-foreground: oklch(0.7584 0.0419 263.5980);
+  --muted-foreground: oklch(0.7584 0.0419 263.598);
   --accent: oklch(0.7516 0.1286 257.4419);
   --accent-foreground: oklch(0.2559 0.0901 256.7898);
-  --destructive: oklch(0.6122 0.2082 22.2410);
+  --destructive: oklch(0.6122 0.2082 22.241);
   --destructive-foreground: oklch(0.9751 0.0184 137.7951);
   --border: oklch(0.2197 0.0466 261.6537);
   --input: oklch(0.3923 0.0613 254.3914);
-  --ring: oklch(0.7182 0.1105 239.7840);
+  --ring: oklch(0.7182 0.1105 239.784);
   --chart-1: oklch(55.013% 0.25888 284.728);
   --chart-2: oklch(56.989% 0.2195 266.301);
   --chart-3: oklch(0.6271 0.1699 149.2138);
-  --chart-4: oklch(0.5771 0.2152 27.3250);
+  --chart-4: oklch(0.5771 0.2152 27.325);
   --chart-5: oklch(0.6658 0.1574 58.3183);
-  --sidebar: oklch(0.2542 0.0553 261.3337);
+  --sidebar: oklch(25.1% 0.05933 261.364);
   --sidebar-foreground: oklch(0.9108 0.0427 269.5516);
-  --sidebar-primary: oklch(0.7182 0.1105 239.7840);
+  --sidebar-primary: oklch(0.7182 0.1105 239.784);
   --sidebar-primary-foreground: oklch(0.3233 0.1025 253.8852);
   --sidebar-accent: oklch(0.7516 0.1286 257.4419);
   --sidebar-accent-foreground: oklch(0.2559 0.0901 256.7898);
   --sidebar-border: oklch(0.3923 0.0613 254.3914);
-  --sidebar-ring: oklch(0.7182 0.1105 239.7840);
-  --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --sidebar-ring: oklch(0.7182 0.1105 239.784);
+  --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   --font-serif: ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
   --font-mono: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   --radius: 0.5rem;
   --shadow-2xs: 0px 5px 25px 0px hsl(0 0% 0% / 0.05);
   --shadow-xs: 0px 5px 25px 0px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0px 5px 25px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow: 0px 5px 25px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0px 5px 25px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0px 5px 25px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0px 5px 25px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-sm: 0px 5px 25px 0px hsl(0 0% 0% / 0.1),
+    0px 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0px 5px 25px 0px hsl(0 0% 0% / 0.1),
+    0px 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0px 5px 25px 0px hsl(0 0% 0% / 0.1),
+    0px 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0px 5px 25px 0px hsl(0 0% 0% / 0.1),
+    0px 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0px 5px 25px 0px hsl(0 0% 0% / 0.1),
+    0px 8px 10px -1px hsl(0 0% 0% / 0.1);
   --shadow-2xl: 0px 5px 25px 0px hsl(0 0% 0% / 0.25);
 }
 
@@ -277,7 +289,8 @@
   --tracking-widest: calc(var(--tracking-normal) + 0.1em);
 }
 
-html, body {
+html,
+body {
   min-height: 100dvh;
   height: auto;
   overflow: unset;
@@ -285,4 +298,8 @@ html, body {
 
 body {
   letter-spacing: var(--tracking-normal);
-}
+}
+
+.sidebar div {
+  border-radius: 14px !important;
+}

src/components/AppLayout.tsx

@@ -16,8 +16,10 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
       <div className="flex min-h-[100dvh] w-full">
         <AppSidebar />
         <main className="flex-1 flex flex-col min-h-0">
-          <SidebarTrigger />
-          <div className="px-4 lg:px-10 flex-1 min-h-0 mb-6">{children}</div>
+          <div className="px-4 lg:px-10 flex-1 min-h-0 mb-6 ">
+            <SidebarTrigger className="" />
+            {children}
+          </div>
         </main>
       </div>
     </SidebarProvider>

src/components/AppSidebar.tsx

@@ -1,4 +1,11 @@
-import { Calendar, Home, Inbox, Search, ServerIcon, Settings } from "lucide-react";
+import {
+  Calendar,
+  Home,
+  Inbox,
+  Search,
+  ServerIcon,
+  Settings,
+} from "lucide-react";
 
 import {
   Sidebar,
@@ -39,8 +46,8 @@ const items = [
 
 export default function AppSidebar() {
   return (
-    <Sidebar>
-      <SidebarContent>
+    <Sidebar className="sidebar py-4 ml-4">
+      <SidebarContent className="">
         <SidebarGroup>
           <SidebarGroupLabel>Application</SidebarGroupLabel>
           <SidebarGroupContent>