dashboard css

taskncoffee-app/src/index.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
+
 @custom-variant dark (&:is(.dark *));
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;

taskncoffee-app/src/pages/Dashboard.jsx

@@ -1,5 +1,6 @@
 'use client';
 import '../neon.css';
+import './dashboard.css';
 import { MenuDock } from '@/components/ui/shadcn-io/menu-dock';
 import { Home, Settings, Bell } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
@@ -12,14 +13,14 @@ const menuItems = [
 
 export default function Dashboard() {
     return (
-        <div className="flex min-h-screen bg-background">
+        <div className="dashboard-container">
             {/* Navigation Rail - Material Design 3 */}
-            <aside className="w-20 bg-card/50 flex flex-col items-center py-4 gap-4">
+            <aside className="dashboard-sidebar">
                 {/* Avatar with large M3 container */}
-                <div className="mb-2">
+                <div className="dashboard-avatar-container">
-                    <Avatar className="size-14 rounded-2xl">
+                    <Avatar className="dashboard-avatar">
                         <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-                        <AvatarFallback className="rounded-2xl">CN</AvatarFallback>
+                        <AvatarFallback className="dashboard-avatar-fallback">CN</AvatarFallback>
                     </Avatar>
                 </div>
 
@@ -34,47 +35,50 @@ export default function Dashboard() {
             </aside>
 
             {/* Main Content Area */}
-            <main className="flex-1 p-6 bg-background">
+            <main className="dashboard-main">
-                <div className="max-w-7xl mx-auto space-y-6">
+                <div className="dashboard-content">
-                    <h1 className="text-3xl font-bold">
+                    <h1 className="dashboard-header">
                         <span className="sign-pink-inline">Task&</span>
                         <span className="sign-inline">Coffee</span>
                     </h1>
 
                     {/* Material Design 3 Cards Grid */}
-                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <div className="dashboard-cards-grid">
                         {/* Filled Card */}
-                        <div className="bg-card p-6 rounded-3xl shadow-sm">
+                        <div className="dashboard-card-filled">
-                            <h3 className="text-lg font-semibold mb-2">Filled Card</h3>
+                            <h3 className="dashboard-card-title">Filled Card</h3>
-                            <p className="text-muted-foreground text-sm">
+                            <p className="dashboard-card-text">
                                 Material Design 3 filled container with large rounded corners.
                             </p>
                         </div>
 
                         {/* Elevated Card */}
-                        <div className="bg-card p-6 rounded-3xl shadow-lg hover:shadow-xl transition-shadow">
+                        <div className="dashboard-card-elevated">
-                            <h3 className="text-lg font-semibold mb-2">Elevated Card</h3>
+                            <h3 className="dashboard-card-title">Elevated Card</h3>
-                            <p className="text-muted-foreground text-sm">
+                            <p className="dashboard-card-text">
                                 Elevated surface with prominent shadow for hierarchy.
                             </p>
                         </div>
 
                         {/* Outlined Card */}
-                        <div className="bg-background border-2 border-border p-6 rounded-3xl">
+                        <div className="dashboard-card-outlined">
-                            <h3 className="text-lg font-semibold mb-2">Outlined Card</h3>
+                            <h3 className="dashboard-card-title">Outlined Card</h3>
-                            <p className="text-muted-foreground text-sm">
+                            <p className="dashboard-card-text">
                                 Outlined container with subtle border emphasis.
                             </p>
                         </div>
                     </div>
 
-                    {/* Example Section with M3 styling */}
+                    {/* Surface Container - takes 3/4 of remaining height */}
-                    <div className="bg-card/30 p-6 rounded-3xl">
+                    <div className="dashboard-surface-container">
-                        <h2 className="text-xl font-semibold mb-4">Surface Container</h2>
+                        <h2 className="dashboard-surface-title">Surface Container</h2>
-                        <p className="text-muted-foreground">
+                        <p className="dashboard-surface-text">
                             Material Design 3 emphasizes larger border radius (rounded-3xl) and layered surfaces.
                         </p>
                     </div>
+
+                    {/* Spacer - takes 1/4 of remaining height */}
+                    <div className="dashboard-spacer"></div>
                 </div>
             </main>
         </div>

taskncoffee-app/src/pages/dashboard.css

@@ -0,0 +1,139 @@
+/* Dashboard Layout */
+.dashboard-container {
+    display: flex;
+    min-height: 100vh;
+    background: var(--color-background);
+}
+
+/* Navigation Rail - Material Design 3 */
+.dashboard-sidebar {
+    width: 80px;
+    background: color-mix(in srgb, var(--color-card) 50%, transparent);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    gap: 1rem;
+}
+
+.dashboard-avatar-container {
+    margin-bottom: 0.5rem;
+}
+
+.dashboard-avatar {
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 1rem;
+}
+
+.dashboard-avatar-fallback {
+    border-radius: 1rem;
+}
+
+/* Main Content Area */
+.dashboard-main {
+    flex: 1;
+    padding: 1.5rem;
+    background: var(--color-background);
+    display: flex;
+    flex-direction: column;
+}
+
+.dashboard-content {
+    max-width: 80rem;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+/* Header */
+.dashboard-header {
+    font-size: 1.875rem;
+    font-weight: bold;
+}
+
+/* Material Design 3 Cards Grid */
+.dashboard-cards-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+}
+
+@media (min-width: 768px) {
+    .dashboard-cards-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (min-width: 1024px) {
+    .dashboard-cards-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+/* M3 Card Variants */
+.dashboard-card-filled {
+    background: var(--color-card);
+    padding: 1.5rem;
+    border-radius: 1.5rem;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.dashboard-card-elevated {
+    background: var(--color-card);
+    padding: 1.5rem;
+    border-radius: 1.5rem;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    transition: box-shadow 0.3s;
+}
+
+.dashboard-card-elevated:hover {
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+}
+
+.dashboard-card-outlined {
+    background: var(--color-background);
+    border: 2px solid var(--color-border);
+    padding: 1.5rem;
+    border-radius: 1.5rem;
+}
+
+.dashboard-card-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.dashboard-card-text {
+    color: var(--color-muted-foreground);
+    font-size: 0.875rem;
+}
+
+/* Surface Container */
+.dashboard-surface-container {
+    background: color-mix(in srgb, var(--color-card) 30%, transparent);
+    padding: 1.5rem;
+    border-radius: 1.5rem;
+    flex: 3;
+}
+
+.dashboard-surface-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+.dashboard-surface-text {
+    color: var(--color-muted-foreground);
+}
+
+/* Spacer */
+.dashboard-spacer {
+    flex: 1;
+}
+