Update date picker, mobile styling

src/components/data/client-list.tsx

@@ -3,13 +3,35 @@
 import { useState } from "react";
 import Link from "next/link";
 import { api } from "~/trpc/react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "~/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
 import { toast } from "sonner";
-import { Mail, Phone, MapPin, Edit, Trash2, Eye, Plus, Search } from "lucide-react";
+import {
+  Mail,
+  Phone,
+  MapPin,
+  Edit,
+  Trash2,
+  Eye,
+  Plus,
+  Search,
+} from "lucide-react";
 
 export function ClientList() {
   const [searchTerm, setSearchTerm] = useState("");
@@ -29,10 +51,12 @@ export function ClientList() {
     },
   });
 
-  const filteredClients = clients?.filter(client =>
-    client.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    client.email?.toLowerCase().includes(searchTerm.toLowerCase())
-  ) ?? [];
+  const filteredClients =
+    clients?.filter(
+      (client) =>
+        client.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        client.email?.toLowerCase().includes(searchTerm.toLowerCase()),
+    ) ?? [];
 
   const handleDelete = (clientId: string) => {
     setClientToDelete(clientId);
@@ -49,14 +73,14 @@ export function ClientList() {
     return (
       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
         {[...Array(3)].map((_, i: number) => (
-          <Card key={i} className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
+          <Card key={i} className="card-primary">
             <CardHeader>
-              <div className="h-4 bg-gray-200 rounded animate-pulse" />
+              <div className="h-4 animate-pulse rounded bg-gray-200" />
             </CardHeader>
             <CardContent>
               <div className="space-y-2">
-                <div className="h-3 bg-gray-200 rounded animate-pulse" />
-                <div className="h-3 bg-gray-200 rounded w-2/3 animate-pulse" />
+                <div className="h-3 animate-pulse rounded bg-gray-200" />
+                <div className="h-3 w-2/3 animate-pulse rounded bg-gray-200" />
               </div>
             </CardContent>
           </Card>
@@ -67,9 +91,9 @@ export function ClientList() {
 
   if (!clients || clients.length === 0) {
     return (
-      <Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
+      <Card className="card-primary">
         <CardHeader className="text-center">
-          <CardTitle className="text-2xl font-bold bg-gradient-to-r from-emerald-600 to-teal-600 bg-clip-text text-transparent">
+          <CardTitle className="text-brand-gradient text-2xl font-bold">
             No Clients Yet
           </CardTitle>
           <CardDescription className="text-lg">
@@ -78,9 +102,7 @@ export function ClientList() {
         </CardHeader>
         <CardContent className="text-center">
           <Link href="/dashboard/clients/new">
-            <Button 
-              className="w-full h-12 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
-            >
+            <Button variant="brand" className="h-12 w-full">
               <Plus className="mr-2 h-4 w-4" />
               Add Your First Client
             </Button>
@@ -92,24 +114,24 @@ export function ClientList() {
 
   return (
     <div className="space-y-6">
-      <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
-        <div className="flex-1 relative">
-          <Label htmlFor="search" className="sr-only">Search clients</Label>
+      <div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center">
+        <div className="relative flex-1">
+          <Label htmlFor="search" className="sr-only">
+            Search clients
+          </Label>
           <div className="relative">
-            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+            <Search className="text-muted absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
             <Input
               id="search"
               placeholder="Search by name or email..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10 h-12 border-gray-200 focus:border-emerald-500 focus:ring-emerald-500"
+              className="h-12 pl-10"
             />
           </div>
         </div>
         <Link href="/dashboard/clients/new">
-          <Button 
-            className="w-full sm:w-auto h-12 bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white font-medium shadow-lg hover:shadow-xl transition-all duration-200"
-          >
+          <Button variant="brand" className="h-12 w-full sm:w-auto">
             <Plus className="mr-2 h-4 w-4" />
             Add Client
           </Button>
@@ -118,20 +140,23 @@ export function ClientList() {
 
       <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
         {filteredClients.map((client) => (
-          <Card key={client.id} className="shadow-xl border-0 bg-white/80 backdrop-blur-sm hover:shadow-2xl transition-all duration-300 group">
+          <Card
+            key={client.id}
+            className="group card-primary transition-all duration-300 hover:shadow-lg"
+          >
             <CardHeader>
               <CardTitle className="flex items-center justify-between text-lg">
-                <span className="font-semibold text-gray-800 group-hover:text-emerald-600 transition-colors">
+                <span className="text-accent group-hover:text-icon-emerald font-semibold transition-colors">
                   {client.name}
                 </span>
-                <div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                <div className="flex space-x-1 opacity-0 transition-opacity group-hover:opacity-100">
                   <Link href={`/clients/${client.id}`}>
-                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-emerald-100">
+                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                       <Eye className="h-4 w-4" />
                     </Button>
                   </Link>
                   <Link href={`/clients/${client.id}/edit`}>
-                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-emerald-100">
+                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                       <Edit className="h-4 w-4" />
                     </Button>
                   </Link>
@@ -139,7 +164,7 @@ export function ClientList() {
                     variant="ghost"
                     size="sm"
                     onClick={() => handleDelete(client.id)}
-                    className="h-8 w-8 p-0 hover:bg-red-100 hover:text-red-600"
+                    className="hover:bg-error-subtle hover:text-icon-red h-8 w-8 p-0"
                   >
                     <Trash2 className="h-4 w-4" />
                   </Button>
@@ -148,32 +173,34 @@ export function ClientList() {
             </CardHeader>
             <CardContent className="space-y-3">
               {client.email && (
-                <div className="flex items-center text-sm text-gray-600">
-                  <div className="p-1.5 bg-emerald-100 rounded mr-3">
-                    <Mail className="h-3 w-3 text-emerald-600" />
+                <div className="text-secondary flex items-center text-sm">
+                  <div className="bg-brand-muted mr-3 rounded p-1.5">
+                    <Mail className="text-icon-emerald h-3 w-3" />
                   </div>
                   {client.email}
                 </div>
               )}
               {client.phone && (
-                <div className="flex items-center text-sm text-gray-600">
-                  <div className="p-1.5 bg-blue-100 rounded mr-3">
-                    <Phone className="h-3 w-3 text-blue-600" />
+                <div className="text-secondary flex items-center text-sm">
+                  <div className="bg-brand-muted-blue mr-3 rounded p-1.5">
+                    <Phone className="text-icon-blue h-3 w-3" />
                   </div>
                   {client.phone}
                 </div>
               )}
               {(client.addressLine1 ?? client.city ?? client.state) && (
-                <div className="flex items-start text-sm text-gray-600">
-                  <div className="p-1.5 bg-teal-100 rounded mr-3 mt-0.5 flex-shrink-0">
-                    <MapPin className="h-3 w-3 text-teal-600" />
+                <div className="text-secondary flex items-start text-sm">
+                  <div className="bg-brand-muted-teal mt-0.5 mr-3 flex-shrink-0 rounded p-1.5">
+                    <MapPin className="text-icon-teal h-3 w-3" />
                   </div>
                   <div className="min-w-0">
                     {client.addressLine1 && <div>{client.addressLine1}</div>}
                     {client.addressLine2 && <div>{client.addressLine2}</div>}
                     {(client.city ?? client.state ?? client.postalCode) && (
                       <div>
-                        {[client.city, client.state, client.postalCode].filter(Boolean).join(", ")}
+                        {[client.city, client.state, client.postalCode]
+                          .filter(Boolean)
+                          .join(", ")}
                       </div>
                     )}
                     {client.country && <div>{client.country}</div>}
@@ -186,23 +213,26 @@ export function ClientList() {
       </div>
 
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <DialogContent className="bg-white/95 backdrop-blur-sm border-0 shadow-2xl">
+        <DialogContent className="card-primary">
           <DialogHeader>
-            <DialogTitle className="text-xl font-bold text-gray-800">Delete Client</DialogTitle>
-            <DialogDescription className="text-gray-600">
-              Are you sure you want to delete this client? This action cannot be undone.
+            <DialogTitle className="text-accent text-xl font-bold">
+              Delete Client
+            </DialogTitle>
+            <DialogDescription className="text-secondary">
+              Are you sure you want to delete this client? This action cannot be
+              undone.
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
-            <Button 
-              variant="outline" 
+            <Button
+              variant="outline"
               onClick={() => setDeleteDialogOpen(false)}
-              className="border-gray-300 text-gray-700 hover:bg-gray-50"
+              className="text-secondary"
             >
               Cancel
             </Button>
-            <Button 
-              variant="destructive" 
+            <Button
+              variant="destructive"
               onClick={confirmDelete}
               className="bg-red-600 hover:bg-red-700"
             >
@@ -213,4 +243,4 @@ export function ClientList() {
       </Dialog>
     </div>
   );
-} 
+}