[dyad] Updated the dashboard with a new color palette - wrote 6 file(s)

src/components/Header.tsx

@@ -10,11 +10,11 @@ const Header = () => {
   const [isSheetOpen, setSheetOpen] = useState(false);
 
   return (
-    <header className="bg-slate-700 p-4 flex justify-between items-center text-white">
+    <header className="bg-primary-dark p-4 flex justify-between items-center text-white">
       <div className="flex items-center">
         <Sheet open={isSheetOpen} onOpenChange={setSheetOpen}>
           <SheetTrigger asChild>
-            <Button variant="ghost" size="icon" className="md:hidden mr-2 hover:bg-slate-600">
+            <Button variant="ghost" size="icon" className="md:hidden mr-2 hover:bg-slate-blue">
               <Menu className="h-6 w-6" />
             </Button>
           </SheetTrigger>
@@ -34,7 +34,7 @@ const Header = () => {
           <Input
             type="search"
             placeholder="Search..."
-            className="pl-10 bg-slate-600 border-none placeholder-gray-200 text-white focus:bg-slate-500"
+            className="pl-10 bg-slate-blue border-none placeholder-gray-200 text-white focus:bg-slate-blue"
           />
         </div>
         <Avatar>

src/components/SidebarNav.tsx

@@ -9,7 +9,7 @@ export const SidebarNav = ({ onLinkClick }: SidebarNavProps) => {
   const navLinkClasses = ({ isActive }: { isActive: boolean }) =>
     `flex items-center px-4 py-2 rounded-lg transition-colors duration-200 ${
       isActive
-        ? 'bg-slate-700 text-white'
+        ? 'bg-primary-dark text-white'
         : 'text-gray-700 hover:bg-gray-200'
     }`;
 

src/components/StockActivityChart.tsx

@@ -15,7 +15,7 @@ const StockActivityChart = () => {
   return (
     <Card className="col-span-1">
       <CardHeader>
-        <CardTitle className="bg-pink-500 text-white -mt-10 mb-4 p-4 rounded-lg shadow-lg">Monthly Activity</CardTitle>
+        <CardTitle className="bg-slate-blue text-white -mt-10 mb-4 p-4 rounded-lg shadow-lg">Monthly Activity</CardTitle>
       </CardHeader>
       <CardContent className="h-80">
         <ResponsiveContainer width="100%" height="100%">

src/components/StockChart.tsx

@@ -15,7 +15,7 @@ const StockChart = () => {
   return (
     <Card className="col-span-1 lg:col-span-2">
       <CardHeader>
-        <CardTitle className="bg-orange-500 text-white -mt-10 mb-4 p-4 rounded-lg shadow-lg">Stock Movement</CardTitle>
+        <CardTitle className="bg-teal-accent text-white -mt-10 mb-4 p-4 rounded-lg shadow-lg">Stock Movement</CardTitle>
       </CardHeader>
       <CardContent className="h-80">
         <ResponsiveContainer width="100%" height="100%">

src/pages/Index.tsx

@@ -11,25 +11,25 @@ const Index = () => {
           title="Total Stock Value"
           value="R2,253,478.35"
           icon={<DollarSign className="h-6 w-6 text-white" />}
-          iconBgColor="bg-pink-500"
+          iconBgColor="bg-slate-blue"
         />
         <StatCard
           title="Items in Stock"
           value="2,350"
           icon={<Package className="h-6 w-6 text-white" />}
-          iconBgColor="bg-orange-500"
+          iconBgColor="bg-teal-accent"
         />
         <StatCard
           title="Stock Out (30 days)"
           value="924"
           icon={<ArrowDown className="h-6 w-6 text-white" />}
-          iconBgColor="bg-purple-500"
+          iconBgColor="bg-slate-blue"
         />
         <StatCard
           title="Low Stock Alerts"
           value="12"
           icon={<AlertTriangle className="h-6 w-6 text-white" />}
-          iconBgColor="bg-slate-700"
+          iconBgColor="bg-primary-dark"
         />
       </div>
       <div className="grid gap-8 md:grid-cols-1 lg:grid-cols-3">

tailwind.config.ts

@@ -19,6 +19,10 @@ export default {
     },
     extend: {
       colors: {
+        'primary-dark': '#332D56',
+        'slate-blue': '#4E6688',
+        'teal-accent': '#71C0BB',
+        'light-lime': '#E3EEB2',
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
@@ -93,4 +97,4 @@ export default {
     },
   },
   plugins: [require("tailwindcss-animate")],
-} satisfies Config;
+} satisfies Config;