@adminide-stack/clock-tik-browser 12.0.18-alpha.4 → 12.0.18-alpha.6

package/lib/pages/LandingPage/components/BuildingSoftwareScene.js

@@ -96,12 +96,11 @@ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';i
                 backgroundImage: 'linear-gradient(to bottom, rgba(255,255,255,0.24), transparent 45%), linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.06) 100%)'
               }
             }), jsxs("div", {
-              className: "relative rounded-xl overflow-clip bg-white",
+              className: "relative rounded-xl overflow-clip bg-background",
               children: [jsxs("div", {
-                className: "h-14 flex items-center px-6 gap-4 border-b",
+                className: "h-14 flex items-center px-6 gap-4 border-b border-foreground/10",
                 style: {
-                  background: '#1F2937',
-                  borderColor: 'rgba(255, 255, 255, 0.1)'
+                  background: '#1F2937'
                 },
                 children: [jsxs("div", {
                   className: "flex items-center gap-2",
@@ -147,10 +146,9 @@ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';i
               }), jsxs("div", {
                 className: "flex h-[560px]",
                 children: [jsxs("div", {
-                  className: "w-14 flex flex-col items-center py-4 gap-3 border-r",
+                  className: "w-14 flex flex-col items-center py-4 gap-3 border-r border-foreground/10",
                   style: {
-                    background: '#1F2937',
-                    borderColor: 'rgba(255, 255, 255, 0.1)'
+                    background: '#1F2937'
                   },
                   children: [jsx("div", {
                     className: "w-8 h-8 rounded-lg bg-[#E33A2C] cursor-pointer flex items-center justify-center",
@@ -218,23 +216,23 @@ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';i
                     className: "w-5 h-5 text-white/60 cursor-pointer hover:text-white"
                   })]
                 }), jsx("div", {
-                  className: "flex-1 bg-white p-8 overflow-y-auto",
+                  className: "flex-1 bg-background p-8 overflow-y-auto",
                   children: activePage ? jsx(PageView, {
                     page: activePage,
                     onClose: () => setActivePage(null)
                   }) : jsxs(Fragment, {
                     children: [jsxs("div", {
-                      className: "flex gap-6 mb-6 border-b",
+                      className: "flex gap-6 mb-6 border-b border-foreground/10",
                       children: [jsx("div", {
                         className: "pb-2 border-b-2 border-[#E33A2C]",
                         children: jsx("span", {
-                          className: "text-sm font-medium text-gray-900",
+                          className: "text-sm font-medium text-foreground",
                           children: "My Dashboard"
                         })
                       }), jsxs("div", {
                         className: "pb-2 relative",
                         children: [jsx("span", {
-                          className: "text-sm font-medium text-gray-600",
+                          className: "text-sm font-medium text-muted-foreground",
                           children: "Productivity"
                         }), jsx("div", {
                           className: "spectrum-dot absolute top-0 right-0 w-2 h-2 rounded-full bg-[#E33A2C] animate-pulse-red cursor-pointer z-10",
@@ -246,19 +244,19 @@ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';i
                       }), jsx("div", {
                         className: "pb-2",
                         children: jsx("span", {
-                          className: "text-sm font-medium text-gray-600",
+                          className: "text-sm font-medium text-muted-foreground",
                           children: "Collaboration"
                         })
                       })]
                     }), jsxs("div", {
                       className: "grid grid-cols-4 gap-4 mb-6",
                       children: [jsxs("div", {
-                        className: "bg-white border border-gray-200 rounded-lg p-4",
+                        className: "bg-background border border-foreground/10 rounded-lg p-4",
                         children: [jsx("div", {
-                          className: "text-xs text-gray-500 mb-1",
+                          className: "text-xs text-muted-foreground mb-1",
                           children: "New Customers"
                         }), jsx("div", {
-                          className: "text-xl font-semibold text-gray-900",
+                          className: "text-xl font-semibold text-foreground",
                           children: "25.42k"
                         }), jsxs("div", {
                           className: "flex items-center gap-1 mt-1",
@@ -270,12 +268,12 @@ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';i
                           })]
                         })]
                       }), jsxs("div", {
-                        className: "bg-white border border-gray-200 rounded-lg p-4",
+                        className: "bg-background border border-foreground/10 rounded-lg p-4",
                         children: [jsx("div", {
-                          className: "text-xs text-gray-500 mb-1",
+                          className: "text-xs text-muted-foreground mb-1",
                           children: "New Revenue"
                         }), jsx("div", {
-                          className: "text-xl font-semibold text-gray-900",
+                          className: "text-xl font-semibold text-foreground",
                           children: "3.51M"
                         }), jsxs("div", {
                           className: "flex items-center gap-1 mt-1",
@@ -287,12 +285,12 @@ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';i
                           })]
                         })]
                       }), jsxs("div", {
-                        className: "bg-white border border-gray-200 rounded-lg p-4",
+                        className: "bg-background border border-foreground/10 rounded-lg p-4",
                         children: [jsx("div", {
-                          className: "text-xs text-gray-500 mb-1",
+                          className: "text-xs text-muted-foreground mb-1",
                           children: "Net MRR"
                         }), jsx("div", {
-                          className: "text-xl font-semibold text-gray-900",
+                          className: "text-xl font-semibold text-foreground",
                           children: "46.82M"
                         }), jsxs("div", {
                           className: "flex items-center gap-1 mt-1",
@@ -304,12 +302,12 @@ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';i
                           })]
                         })]
                       }), jsxs("div", {
-                        className: "bg-white border border-gray-200 rounded-lg p-4",
+                        className: "bg-background border border-foreground/10 rounded-lg p-4",
                         children: [jsx("div", {
-                          className: "text-xs text-gray-500 mb-1",
+                          className: "text-xs text-muted-foreground mb-1",
                           children: "Net Cancellation"
                         }), jsx("div", {
-                          className: "text-xl font-semibold text-gray-900",
+                          className: "text-xl font-semibold text-foreground",
                           children: "14.93k"
                         }), jsxs("div", {
                           className: "flex items-center gap-1 mt-1",
@@ -324,26 +322,26 @@ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';i
                     }), jsxs("div", {
                       className: "grid grid-cols-2 gap-4",
                       children: [jsxs("div", {
-                        className: "bg-white border border-gray-200 rounded-lg p-4",
+                        className: "bg-background border border-foreground/10 rounded-lg p-4",
                         children: [jsx("div", {
-                          className: "text-sm font-semibold text-gray-900 mb-3",
+                          className: "text-sm font-semibold text-foreground mb-3",
                           children: "Leads - MQL to SQL"
                         }), jsx("div", {
                           className: "h-32 bg-gradient-to-t from-blue-50 to-transparent rounded flex items-end justify-center",
                           children: jsx("div", {
-                            className: "text-xs text-gray-500",
+                            className: "text-xs text-muted-foreground",
                             children: "Chart visualization"
                           })
                         })]
                       }), jsxs("div", {
-                        className: "bg-white border border-gray-200 rounded-lg p-4",
+                        className: "bg-background border border-foreground/10 rounded-lg p-4",
                         children: [jsx("div", {
-                          className: "text-sm font-semibold text-gray-900 mb-3",
+                          className: "text-sm font-semibold text-foreground mb-3",
                           children: "Cash Flow Monthly Trend"
                         }), jsx("div", {
                           className: "h-32 bg-gradient-to-t from-green-50 to-transparent rounded flex items-end justify-center",
                           children: jsx("div", {
-                            className: "text-xs text-gray-500",
+                            className: "text-xs text-muted-foreground",
                             children: "Chart visualization"
                           })
                         })]
@@ -352,15 +350,11 @@ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';i
                   })
                 })]
               }), jsxs("div", {
-                className: "h-10 flex items-center px-4 gap-4 border-t",
-                style: {
-                  background: '#F3F4F6',
-                  borderColor: 'rgba(0, 0, 0, 0.1)'
-                },
+                className: "h-10 flex items-center px-4 gap-4 border-t border-foreground/10 bg-muted",
                 children: [jsxs("div", {
                   className: "relative",
                   children: [jsx("span", {
-                    className: "text-xs text-gray-600 font-medium cursor-pointer hover:text-gray-900",
+                    className: "text-xs text-muted-foreground font-medium cursor-pointer hover:text-foreground",
                     children: "Chats"
                   }), jsx("div", {
                     className: "spectrum-dot absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-[#E33A2C] animate-pulse-red cursor-pointer z-10",
@@ -370,10 +364,10 @@ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';i
                     }
                   })]
                 }), jsx("span", {
-                  className: "text-xs text-gray-500 cursor-pointer hover:text-gray-700",
+                  className: "text-xs text-muted-foreground cursor-pointer hover:text-foreground",
                   children: "Channels"
                 }), jsx("span", {
-                  className: "text-xs text-gray-500 cursor-pointer hover:text-gray-700",
+                  className: "text-xs text-muted-foreground cursor-pointer hover:text-foreground",
                   children: "Contacts"
                 }), jsx("div", {
                   className: "flex-1 flex items-center justify-center",
@@ -382,7 +376,7 @@ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';i
                     children: [jsx("input", {
                       type: "text",
                       placeholder: "Here is your Smart Chat (Ctrl+Space)",
-                      className: "w-full px-3 py-1.5 text-xs bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#E33A2C]/20 focus:border-[#E33A2C]"
+                      className: "w-full px-3 py-1.5 text-xs bg-background border border-foreground/10 rounded-md focus:outline-none focus:ring-2 focus:ring-[#E33A2C]/20 focus:border-[#E33A2C] text-foreground"
                     }), jsx("div", {
                       className: "spectrum-dot absolute -top-0.5 -right-1 w-2.5 h-2.5 rounded-full bg-[#E33A2C] animate-pulse-red cursor-pointer z-10",
                       onClick: e => {
@@ -394,7 +388,7 @@ import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';i
                 }), jsxs("div", {
                   className: "relative",
                   children: [jsx(FileText, {
-                    className: "w-4 h-4 text-gray-500 cursor-pointer hover:text-gray-700"
+                    className: "w-4 h-4 text-muted-foreground cursor-pointer hover:text-foreground"
                   }), jsx("div", {
                     className: "spectrum-dot absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-[#E33A2C] animate-pulse-red cursor-pointer z-10",
                     onClick: e => {
@@ -465,7 +459,7 @@ function PageView({
       content: jsxs("div", {
         className: "grid grid-cols-2 gap-6",
         children: [jsxs("div", {
-          className: "bg-white border border-gray-200 rounded-lg p-6",
+          className: "bg-background border border-foreground/10 rounded-lg p-6",
           children: [jsx("div", {
             className: "flex items-center justify-between mb-4",
             children: jsxs("div", {
@@ -473,14 +467,14 @@ function PageView({
               children: [jsx(CheckCircle2, {
                 className: "w-5 h-5 text-green-500"
               }), jsx("h3", {
-                className: "text-lg font-semibold text-gray-900",
+                className: "text-lg font-semibold text-foreground",
                 children: "My Tasks (Projects)"
               })]
             })
           }), jsxs("div", {
             className: "space-y-3",
             children: [jsxs("div", {
-              className: "flex items-start gap-3 p-3 bg-gray-50 rounded-lg",
+              className: "flex items-start gap-3 p-3 bg-muted rounded-lg",
               children: [jsx("input", {
                 type: "checkbox",
                 className: "w-4 h-4 mt-1",
@@ -491,15 +485,15 @@ function PageView({
                   className: "text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded inline-block mb-1",
                   children: "In Progress"
                 }), jsx("div", {
-                  className: "text-sm font-medium text-gray-900 mt-1",
+                  className: "text-sm font-medium text-foreground mt-1",
                   children: "Create an enhancement list based on feedback"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500 mt-1",
+                  className: "text-xs text-muted-foreground mt-1",
                   children: "Website Development"
                 })]
               })]
             }), jsxs("div", {
-              className: "flex items-start gap-3 p-3 bg-gray-50 rounded-lg",
+              className: "flex items-start gap-3 p-3 bg-muted rounded-lg",
               children: [jsx("input", {
                 type: "checkbox",
                 className: "w-4 h-4 mt-1"
@@ -509,15 +503,15 @@ function PageView({
                   className: "text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded inline-block mb-1",
                   children: "In Progress"
                 }), jsx("div", {
-                  className: "text-sm font-medium text-gray-900 mt-1",
+                  className: "text-sm font-medium text-foreground mt-1",
                   children: "Review and approve design mockups"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500 mt-1",
+                  className: "text-xs text-muted-foreground mt-1",
                   children: "UI/UX Project"
                 })]
               })]
             }), jsxs("div", {
-              className: "flex items-start gap-3 p-3 bg-gray-50 rounded-lg",
+              className: "flex items-start gap-3 p-3 bg-muted rounded-lg",
               children: [jsx("input", {
                 type: "checkbox",
                 className: "w-4 h-4 mt-1"
@@ -527,185 +521,185 @@ function PageView({
                   className: "text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded inline-block mb-1",
                   children: "In Progress"
                 }), jsx("div", {
-                  className: "text-sm font-medium text-gray-900 mt-1",
+                  className: "text-sm font-medium text-foreground mt-1",
                   children: "Update project documentation"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500 mt-1",
+                  className: "text-xs text-muted-foreground mt-1",
                   children: "Product Management"
                 })]
               })]
             })]
           })]
         }), jsxs("div", {
-          className: "bg-white border border-gray-200 rounded-lg p-6",
+          className: "bg-background border border-foreground/10 rounded-lg p-6",
           children: [jsxs("div", {
             className: "flex items-center justify-between mb-4",
             children: [jsxs("div", {
               className: "flex items-center gap-2",
               children: [jsx(Mail, {
-                className: "w-5 h-5 text-gray-600"
+                className: "w-5 h-5 text-muted-foreground"
               }), jsx("h3", {
-                className: "text-lg font-semibold text-gray-900",
+                className: "text-lg font-semibold text-foreground",
                 children: "All Mails"
               })]
             }), jsxs("div", {
               className: "flex items-center gap-2",
               children: [jsx("select", {
-                className: "text-xs border border-gray-300 rounded px-2 py-1",
+                className: "text-xs border border-foreground/10 rounded px-2 py-1 bg-background text-foreground",
                 children: jsx("option", {
                   children: "Inbox"
                 })
               }), jsx(MoreHorizontal, {
-                className: "w-4 h-4 text-gray-400"
+                className: "w-4 h-4 text-muted-foreground"
               })]
             })]
           }), jsxs("div", {
             className: "space-y-2",
             children: [jsxs("div", {
-              className: "flex items-start gap-3 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-start gap-3 p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsx("div", {
                 className: "w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-medium mt-0.5",
                 children: "DS"
               }), jsxs("div", {
                 className: "flex-1 min-w-0",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900 truncate",
+                  className: "text-sm font-medium text-foreground truncate",
                   children: "Darrell Steward"
                 }), jsx("div", {
-                  className: "text-xs text-gray-600 truncate",
+                  className: "text-xs text-muted-foreground truncate",
                   children: "Project update required - Q4 planning"
                 }), jsx("div", {
-                  className: "text-xs text-gray-400 mt-0.5",
+                  className: "text-xs text-muted-foreground mt-0.5",
                   children: "Today"
                 })]
               })]
             }), jsxs("div", {
-              className: "flex items-start gap-3 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-start gap-3 p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsx("div", {
                 className: "w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white text-xs font-medium mt-0.5",
                 children: "AM"
               }), jsxs("div", {
                 className: "flex-1 min-w-0",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900 truncate",
+                  className: "text-sm font-medium text-foreground truncate",
                   children: "Arlene McCoy"
                 }), jsx("div", {
-                  className: "text-xs text-gray-600 truncate",
+                  className: "text-xs text-muted-foreground truncate",
                   children: "Meeting scheduled for next week"
                 }), jsx("div", {
-                  className: "text-xs text-gray-400 mt-0.5",
+                  className: "text-xs text-muted-foreground mt-0.5",
                   children: "Today"
                 })]
               })]
             }), jsxs("div", {
-              className: "flex items-start gap-3 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-start gap-3 p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsx("div", {
                 className: "w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white text-xs font-medium mt-0.5",
                 children: "FM"
               }), jsxs("div", {
                 className: "flex-1 min-w-0",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900 truncate",
+                  className: "text-sm font-medium text-foreground truncate",
                   children: "Floyd Miles"
                 }), jsx("div", {
-                  className: "text-xs text-gray-600 truncate",
+                  className: "text-xs text-muted-foreground truncate",
                   children: "Budget approval needed"
                 }), jsx("div", {
-                  className: "text-xs text-gray-400 mt-0.5",
+                  className: "text-xs text-muted-foreground mt-0.5",
                   children: "Today"
                 })]
               })]
             })]
           })]
         }), jsxs("div", {
-          className: "bg-white border border-gray-200 rounded-lg p-6",
+          className: "bg-background border border-foreground/10 rounded-lg p-6",
           children: [jsxs("div", {
             className: "flex items-center gap-2 mb-4",
             children: [jsx(FileText, {
-              className: "w-5 h-5 text-gray-600"
+              className: "w-5 h-5 text-muted-foreground"
             }), jsx("h3", {
-              className: "text-lg font-semibold text-gray-900",
+              className: "text-lg font-semibold text-foreground",
               children: "Recent Files"
             })]
           }), jsxs("div", {
             className: "space-y-3",
             children: [jsxs("div", {
-              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-center justify-between p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsxs("div", {
                 className: "flex items-center gap-3",
                 children: [jsx(FileText, {
                   className: "w-5 h-5 text-blue-500"
                 }), jsxs("div", {
                   children: [jsx("div", {
-                    className: "text-sm font-medium text-gray-900",
+                    className: "text-sm font-medium text-foreground",
                     children: "Blog Details Content"
                   }), jsx("div", {
-                    className: "text-xs text-gray-500",
+                    className: "text-xs text-muted-foreground",
                     children: "Last Opened by You"
                   })]
                 })]
               }), jsx("div", {
-                className: "text-xs text-gray-400",
+                className: "text-xs text-muted-foreground",
                 children: "16 Jun"
               })]
             }), jsxs("div", {
-              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-center justify-between p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsxs("div", {
                 className: "flex items-center gap-3",
                 children: [jsx(FileText, {
                   className: "w-5 h-5 text-green-500"
                 }), jsxs("div", {
                   children: [jsx("div", {
-                    className: "text-sm font-medium text-gray-900",
+                    className: "text-sm font-medium text-foreground",
                     children: "Attendance sheet"
                   }), jsx("div", {
-                    className: "text-xs text-gray-500",
+                    className: "text-xs text-muted-foreground",
                     children: "Last Opened by You"
                   })]
                 })]
               }), jsx("div", {
-                className: "text-xs text-gray-400",
+                className: "text-xs text-muted-foreground",
                 children: "27 Aug"
               })]
             }), jsxs("div", {
-              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-center justify-between p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsxs("div", {
                 className: "flex items-center gap-3",
                 children: [jsx(FileText, {
                   className: "w-5 h-5 text-purple-500"
                 }), jsxs("div", {
                   children: [jsx("div", {
-                    className: "text-sm font-medium text-gray-900",
+                    className: "text-sm font-medium text-foreground",
                     children: "Website Header Graphic"
                   }), jsx("div", {
-                    className: "text-xs text-gray-500",
+                    className: "text-xs text-muted-foreground",
                     children: "Last Opened by You"
                   })]
                 })]
               }), jsx("div", {
-                className: "text-xs text-gray-400",
+                className: "text-xs text-muted-foreground",
                 children: "16 Aug"
               })]
             })]
           })]
         }), jsxs("div", {
-          className: "bg-white border border-gray-200 rounded-lg p-6",
+          className: "bg-background border border-foreground/10 rounded-lg p-6",
           children: [jsxs("div", {
             className: "flex items-center gap-2 mb-4",
             children: [jsx(PieChart, {
-              className: "w-5 h-5 text-gray-600"
+              className: "w-5 h-5 text-muted-foreground"
             }), jsx("h3", {
-              className: "text-lg font-semibold text-gray-900",
+              className: "text-lg font-semibold text-foreground",
               children: "My Top Expenses"
             })]
           }), jsx("div", {
-            className: "flex items-center justify-center h-48 bg-gray-50 rounded-lg mb-4",
+            className: "flex items-center justify-center h-48 bg-muted rounded-lg mb-4",
             children: jsxs("div", {
               className: "text-center",
               children: [jsx("div", {
                 className: "w-32 h-32 rounded-full border-8 border-orange-300 border-t-orange-500 border-r-blue-500 border-b-green-500 border-l-purple-500 mb-4 mx-auto"
               }), jsx("div", {
-                className: "text-xs text-gray-500",
+                className: "text-xs text-muted-foreground",
                 children: "Pie Chart Visualization"
               })]
             })
@@ -718,11 +712,11 @@ function PageView({
                 children: [jsx("div", {
                   className: "w-3 h-3 rounded-full bg-orange-500"
                 }), jsx("span", {
-                  className: "text-gray-700",
+                  className: "text-foreground",
                   children: "Lodging"
                 })]
               }), jsx("span", {
-                className: "text-gray-900 font-medium",
+                className: "text-foreground font-medium",
                 children: "28%"
               })]
             }), jsxs("div", {
@@ -732,11 +726,11 @@ function PageView({
                 children: [jsx("div", {
                   className: "w-3 h-3 rounded-full bg-blue-500"
                 }), jsx("span", {
-                  className: "text-gray-700",
+                  className: "text-foreground",
                   children: "Goods Sold"
                 })]
               }), jsx("span", {
-                className: "text-gray-900 font-medium",
+                className: "text-foreground font-medium",
                 children: "20%"
               })]
             }), jsxs("div", {
@@ -746,11 +740,11 @@ function PageView({
                 children: [jsx("div", {
                   className: "w-3 h-3 rounded-full bg-green-500"
                 }), jsx("span", {
-                  className: "text-gray-700",
+                  className: "text-foreground",
                   children: "Marketing"
                 })]
               }), jsx("span", {
-                className: "text-gray-900 font-medium",
+                className: "text-foreground font-medium",
                 children: "22%"
               })]
             }), jsxs("div", {
@@ -760,11 +754,11 @@ function PageView({
                 children: [jsx("div", {
                   className: "w-3 h-3 rounded-full bg-purple-500"
                 }), jsx("span", {
-                  className: "text-gray-700",
+                  className: "text-foreground",
                   children: "Hardware"
                 })]
               }), jsx("span", {
-                className: "text-gray-900 font-medium",
+                className: "text-foreground font-medium",
                 children: "10%"
               })]
             }), jsxs("div", {
@@ -774,11 +768,11 @@ function PageView({
                 children: [jsx("div", {
                   className: "w-3 h-3 rounded-full bg-gray-500"
                 }), jsx("span", {
-                  className: "text-gray-700",
+                  className: "text-foreground",
                   children: "Other Expense"
                 })]
               }), jsx("span", {
-                className: "text-gray-900 font-medium",
+                className: "text-foreground font-medium",
                 children: "20%"
               })]
             })]
@@ -803,12 +797,12 @@ function PageView({
         }), jsxs("div", {
           className: "grid grid-cols-4 gap-4",
           children: [jsxs("div", {
-            className: "bg-white border border-gray-200 rounded-lg p-4",
+            className: "bg-background border border-foreground/10 rounded-lg p-4",
             children: [jsx("div", {
-              className: "text-xs text-gray-500 mb-1",
+              className: "text-xs text-muted-foreground mb-1",
               children: "Total Users"
             }), jsx("div", {
-              className: "text-2xl font-semibold text-gray-900",
+              className: "text-2xl font-semibold text-foreground",
               children: "1,234"
             }), jsxs("div", {
               className: "flex items-center gap-1 mt-2",
@@ -820,12 +814,12 @@ function PageView({
               })]
             })]
           }), jsxs("div", {
-            className: "bg-white border border-gray-200 rounded-lg p-4",
+            className: "bg-background border border-foreground/10 rounded-lg p-4",
             children: [jsx("div", {
-              className: "text-xs text-gray-500 mb-1",
+              className: "text-xs text-muted-foreground mb-1",
               children: "Active Projects"
             }), jsx("div", {
-              className: "text-2xl font-semibold text-gray-900",
+              className: "text-2xl font-semibold text-foreground",
               children: "48"
             }), jsxs("div", {
               className: "flex items-center gap-1 mt-2",
@@ -837,12 +831,12 @@ function PageView({
               })]
             })]
           }), jsxs("div", {
-            className: "bg-white border border-gray-200 rounded-lg p-4",
+            className: "bg-background border border-foreground/10 rounded-lg p-4",
             children: [jsx("div", {
-              className: "text-xs text-gray-500 mb-1",
+              className: "text-xs text-muted-foreground mb-1",
               children: "Tasks Completed"
             }), jsx("div", {
-              className: "text-2xl font-semibold text-gray-900",
+              className: "text-2xl font-semibold text-foreground",
               children: "892"
             }), jsxs("div", {
               className: "flex items-center gap-1 mt-2",
@@ -854,12 +848,12 @@ function PageView({
               })]
             })]
           }), jsxs("div", {
-            className: "bg-white border border-gray-200 rounded-lg p-4",
+            className: "bg-background border border-foreground/10 rounded-lg p-4",
             children: [jsx("div", {
-              className: "text-xs text-gray-500 mb-1",
+              className: "text-xs text-muted-foreground mb-1",
               children: "Revenue This Month"
             }), jsx("div", {
-              className: "text-2xl font-semibold text-gray-900",
+              className: "text-2xl font-semibold text-foreground",
               children: "$125k"
             }), jsxs("div", {
               className: "flex items-center gap-1 mt-2",
@@ -874,7 +868,7 @@ function PageView({
         }), jsxs("div", {
           className: "grid grid-cols-3 gap-4",
           children: [jsxs("div", {
-            className: "bg-white border border-gray-200 rounded-lg p-6",
+            className: "bg-background border border-foreground/10 rounded-lg p-6",
             children: [jsxs("div", {
               className: "flex items-center gap-3 mb-4",
               children: [jsx("div", {
@@ -884,10 +878,10 @@ function PageView({
                 })
               }), jsxs("div", {
                 children: [jsx("h3", {
-                  className: "text-lg font-semibold text-gray-900",
+                  className: "text-lg font-semibold text-foreground",
                   children: "Mail"
                 }), jsx("p", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "12 unread messages"
                 })]
               })]
@@ -896,7 +890,7 @@ function PageView({
               children: "View Inbox"
             })]
           }), jsxs("div", {
-            className: "bg-white border border-gray-200 rounded-lg p-6",
+            className: "bg-background border border-foreground/10 rounded-lg p-6",
             children: [jsxs("div", {
               className: "flex items-center gap-3 mb-4",
               children: [jsx("div", {
@@ -906,10 +900,10 @@ function PageView({
                 })
               }), jsxs("div", {
                 children: [jsx("h3", {
-                  className: "text-lg font-semibold text-gray-900",
+                  className: "text-lg font-semibold text-foreground",
                   children: "Tasks"
                 }), jsx("p", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "5 pending tasks"
                 })]
               })]
@@ -918,7 +912,7 @@ function PageView({
               children: "View Tasks"
             })]
           }), jsxs("div", {
-            className: "bg-white border border-gray-200 rounded-lg p-6",
+            className: "bg-background border border-foreground/10 rounded-lg p-6",
             children: [jsxs("div", {
               className: "flex items-center gap-3 mb-4",
               children: [jsx("div", {
@@ -928,10 +922,10 @@ function PageView({
                 })
               }), jsxs("div", {
                 children: [jsx("h3", {
-                  className: "text-lg font-semibold text-gray-900",
+                  className: "text-lg font-semibold text-foreground",
                   children: "Calendar"
                 }), jsx("p", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "3 meetings today"
                 })]
               })]
@@ -941,54 +935,54 @@ function PageView({
             })]
           })]
         }), jsxs("div", {
-          className: "bg-white border border-gray-200 rounded-lg p-6",
+          className: "bg-background border border-foreground/10 rounded-lg p-6",
           children: [jsx("h3", {
-            className: "text-lg font-semibold text-gray-900 mb-4",
+            className: "text-lg font-semibold text-foreground mb-4",
             children: "Recent Activity"
           }), jsxs("div", {
             className: "space-y-3",
             children: [jsxs("div", {
-              className: "flex items-center gap-3 p-3 bg-gray-50 rounded-lg",
+              className: "flex items-center gap-3 p-3 bg-muted rounded-lg",
               children: [jsx("div", {
                 className: "w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-medium",
                 children: "JD"
               }), jsxs("div", {
                 className: "flex-1",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "John Doe completed a task"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "2 hours ago"
                 })]
               })]
             }), jsxs("div", {
-              className: "flex items-center gap-3 p-3 bg-gray-50 rounded-lg",
+              className: "flex items-center gap-3 p-3 bg-muted rounded-lg",
               children: [jsx("div", {
                 className: "w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white text-xs font-medium",
                 children: "JS"
               }), jsxs("div", {
                 className: "flex-1",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Jane Smith shared a file"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "4 hours ago"
                 })]
               })]
             }), jsxs("div", {
-              className: "flex items-center gap-3 p-3 bg-gray-50 rounded-lg",
+              className: "flex items-center gap-3 p-3 bg-muted rounded-lg",
               children: [jsx("div", {
                 className: "w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white text-xs font-medium",
                 children: "MB"
               }), jsxs("div", {
                 className: "flex-1",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Mike Brown created a new project"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "6 hours ago"
                 })]
               })]
@@ -1003,193 +997,193 @@ function PageView({
       content: jsxs("div", {
         className: "flex gap-4 h-full",
         children: [jsxs("div", {
-          className: "w-64 border-r border-gray-200 pr-4",
+          className: "w-64 border-r border-foreground/10 pr-4",
           children: [jsxs("button", {
             className: "w-full mb-4 px-4 py-2 bg-[#E33A2C] text-white text-sm font-medium rounded-lg hover:bg-[#c82f23] transition-colors flex items-center justify-center gap-2",
             children: [jsx(Plus, {
               className: "w-4 h-4"
             }), "New Mail"]
           }), jsxs("div", {
-            className: "flex gap-2 mb-4 border-b border-gray-200",
+            className: "flex gap-2 mb-4 border-b border-foreground/10",
             children: [jsx("button", {
               className: "pb-2 px-2 text-sm font-medium text-[#E33A2C] border-b-2 border-[#E33A2C]",
               children: "Mail"
             }), jsx("button", {
-              className: "pb-2 px-2 text-sm text-gray-600",
+              className: "pb-2 px-2 text-sm text-muted-foreground",
               children: "Streams"
             }), jsx("button", {
-              className: "pb-2 px-2 text-sm text-gray-600",
+              className: "pb-2 px-2 text-sm text-muted-foreground",
               children: "Settings"
             })]
           }), jsxs("div", {
             className: "space-y-1",
             children: [jsx("div", {
-              className: "text-xs font-semibold text-gray-500 uppercase mb-2",
+              className: "text-xs font-semibold text-muted-foreground uppercase mb-2",
               children: "Folders"
             }), jsxs("div", {
-              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-center justify-between p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsxs("div", {
                 className: "flex items-center gap-2",
                 children: [jsx(Inbox, {
-                  className: "w-4 h-4 text-gray-400"
+                  className: "w-4 h-4 text-muted-foreground"
                 }), jsx("span", {
-                  className: "text-sm text-gray-700",
+                  className: "text-sm text-foreground",
                   children: "Inbox"
                 })]
               }), jsx("span", {
-                className: "text-xs text-gray-500",
+                className: "text-xs text-muted-foreground",
                 children: "13"
               })]
             }), jsxs("div", {
-              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-center justify-between p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsxs("div", {
                 className: "flex items-center gap-2",
                 children: [jsx(FileText, {
-                  className: "w-4 h-4 text-gray-400"
+                  className: "w-4 h-4 text-muted-foreground"
                 }), jsx("span", {
-                  className: "text-sm text-gray-700",
+                  className: "text-sm text-foreground",
                   children: "Drafts"
                 })]
               }), jsx("span", {
-                className: "text-xs text-gray-500",
+                className: "text-xs text-muted-foreground",
                 children: "18"
               })]
             }), jsxs("div", {
-              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-center justify-between p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsxs("div", {
                 className: "flex items-center gap-2",
                 children: [jsx(FileText, {
-                  className: "w-4 h-4 text-gray-400"
+                  className: "w-4 h-4 text-muted-foreground"
                 }), jsx("span", {
-                  className: "text-sm text-gray-700",
+                  className: "text-sm text-foreground",
                   children: "Templates"
                 })]
               }), jsx("span", {
-                className: "text-xs text-gray-500",
+                className: "text-xs text-muted-foreground",
                 children: "5"
               })]
             }), jsxs("div", {
-              className: "flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-center gap-2 p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsx(FileText, {
-                className: "w-4 h-4 text-gray-400"
+                className: "w-4 h-4 text-muted-foreground"
               }), jsx("span", {
-                className: "text-sm text-gray-700",
+                className: "text-sm text-foreground",
                 children: "Snoozed"
               })]
             }), jsxs("div", {
-              className: "flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-center gap-2 p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsx(Send, {
-                className: "w-4 h-4 text-gray-400"
+                className: "w-4 h-4 text-muted-foreground"
               }), jsx("span", {
-                className: "text-sm text-gray-700",
+                className: "text-sm text-foreground",
                 children: "Sent"
               })]
             }), jsxs("div", {
-              className: "flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-center gap-2 p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsx(FileText, {
-                className: "w-4 h-4 text-gray-400"
+                className: "w-4 h-4 text-muted-foreground"
               }), jsx("span", {
-                className: "text-sm text-gray-700",
+                className: "text-sm text-foreground",
                 children: "Spam"
               })]
             }), jsxs("div", {
-              className: "flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-center gap-2 p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsx(Trash2, {
-                className: "w-4 h-4 text-gray-400"
+                className: "w-4 h-4 text-muted-foreground"
               }), jsx("span", {
-                className: "text-sm text-gray-700",
+                className: "text-sm text-foreground",
                 children: "Trash"
               })]
             }), jsxs("div", {
-              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-center justify-between p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsxs("div", {
                 className: "flex items-center gap-2",
                 children: [jsx(FileText, {
-                  className: "w-4 h-4 text-gray-400"
+                  className: "w-4 h-4 text-muted-foreground"
                 }), jsx("span", {
-                  className: "text-sm text-gray-700",
+                  className: "text-sm text-foreground",
                   children: "Outbox"
                 })]
               }), jsx("span", {
-                className: "text-xs text-gray-500",
+                className: "text-xs text-muted-foreground",
                 children: "2"
               })]
             }), jsxs("div", {
-              className: "flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              className: "flex items-center gap-2 p-2 hover:bg-muted rounded cursor-pointer",
               children: [jsx(Archive, {
-                className: "w-4 h-4 text-gray-400"
+                className: "w-4 h-4 text-muted-foreground"
               }), jsx("span", {
-                className: "text-sm text-gray-700",
+                className: "text-sm text-foreground",
                 children: "Archive"
               })]
             })]
           })]
         }), jsxs("div", {
-          className: "flex-1 border-r border-gray-200 pr-4",
+          className: "flex-1 border-r border-foreground/10 pr-4",
           children: [jsxs("div", {
             className: "flex items-center justify-between mb-4",
             children: [jsxs("div", {
               className: "flex items-center gap-2",
               children: [jsx("select", {
-                className: "text-sm border border-gray-300 rounded px-3 py-1.5",
+                className: "text-sm border border-foreground/10 rounded px-3 py-1.5 bg-background text-foreground",
                 children: jsx("option", {
                   children: "Blog"
                 })
               }), jsx("button", {
-                className: "text-sm text-gray-600 hover:text-gray-900",
+                className: "text-sm text-muted-foreground hover:text-foreground",
                 children: "Move to"
               }), jsx("button", {
-                className: "text-sm text-gray-600 hover:text-gray-900",
+                className: "text-sm text-muted-foreground hover:text-foreground",
                 children: "Tag as"
               })]
             }), jsx(MoreHorizontal, {
-              className: "w-5 h-5 text-gray-400"
+              className: "w-5 h-5 text-muted-foreground"
             })]
           }), jsxs("div", {
             className: "space-y-1",
             children: [jsx("div", {
-              className: "text-xs font-semibold text-gray-500 mb-2",
+              className: "text-xs font-semibold text-muted-foreground mb-2",
               children: "2020"
             }), jsxs("div", {
               className: "p-3 bg-blue-50 border-l-2 border-blue-500 rounded cursor-pointer hover:bg-blue-100",
               children: [jsx("div", {
-                className: "text-sm font-medium text-gray-900",
+                className: "text-sm font-medium text-foreground",
                 children: "Elena Brown"
               }), jsx("div", {
-                className: "text-xs text-gray-600 mt-1",
+                className: "text-xs text-muted-foreground mt-1",
                 children: "SketcheZ - Product Screensh..."
               }), jsx("div", {
-                className: "text-xs text-gray-400 mt-1",
+                className: "text-xs text-muted-foreground mt-1",
                 children: "JUN 19, 2020"
               })]
             }), jsx("div", {
-              className: "text-xs font-semibold text-gray-500 mt-4 mb-2",
+              className: "text-xs font-semibold text-muted-foreground mt-4 mb-2",
               children: "2018"
             }), jsxs("div", {
-              className: "p-3 hover:bg-gray-50 rounded cursor-pointer",
+              className: "p-3 hover:bg-muted rounded cursor-pointer",
               children: [jsx("div", {
-                className: "text-sm font-medium text-gray-900",
+                className: "text-sm font-medium text-foreground",
                 children: "Carl Mendez"
               }), jsx("div", {
-                className: "text-xs text-gray-600 mt-1",
+                className: "text-xs text-muted-foreground mt-1",
                 children: "Re: Agile Process"
               }), jsx("div", {
-                className: "text-xs text-gray-400 mt-1",
+                className: "text-xs text-muted-foreground mt-1",
                 children: "APR 26, 2018"
               })]
             }), jsx("div", {
-              className: "text-xs font-semibold text-gray-500 mt-4 mb-2",
+              className: "text-xs font-semibold text-muted-foreground mt-4 mb-2",
               children: "2016"
             }), jsxs("div", {
-              className: "p-3 hover:bg-gray-50 rounded cursor-pointer",
+              className: "p-3 hover:bg-muted rounded cursor-pointer",
               children: [jsx("div", {
-                className: "text-sm font-medium text-gray-900",
+                className: "text-sm font-medium text-foreground",
                 children: "Hannah O'Brien"
               }), jsx("div", {
-                className: "text-xs text-gray-600 mt-1",
+                className: "text-xs text-muted-foreground mt-1",
                 children: "Re: Comparison page: Zoho Mai..."
               }), jsx("div", {
-                className: "text-xs text-gray-400 mt-1",
+                className: "text-xs text-muted-foreground mt-1",
                 children: "JUL 29, 2016"
               })]
             })]
@@ -1201,23 +1195,23 @@ function PageView({
             children: [jsxs("div", {
               className: "flex items-center gap-2",
               children: [jsx("button", {
-                className: "text-xs text-gray-600 hover:text-gray-900",
+                className: "text-xs text-muted-foreground hover:text-foreground",
                 children: "Reminder"
               }), jsx("button", {
-                className: "text-xs text-gray-600 hover:text-gray-900",
+                className: "text-xs text-muted-foreground hover:text-foreground",
                 children: "Add Task"
               }), jsx("button", {
-                className: "text-xs text-gray-600 hover:text-gray-900",
+                className: "text-xs text-muted-foreground hover:text-foreground",
                 children: "Permalink"
               }), jsx("button", {
-                className: "text-xs text-gray-600 hover:text-gray-900",
+                className: "text-xs text-muted-foreground hover:text-foreground",
                 children: "Snooze"
               })]
             }), jsx(X, {
-              className: "w-4 h-4 text-gray-400 cursor-pointer"
+              className: "w-4 h-4 text-muted-foreground cursor-pointer"
             })]
           }), jsxs("div", {
-            className: "border border-gray-200 rounded-lg p-4",
+            className: "border border-foreground/10 rounded-lg p-4",
             children: [jsxs("div", {
               className: "flex items-start gap-3 mb-4",
               children: [jsx("div", {
@@ -1226,26 +1220,26 @@ function PageView({
               }), jsxs("div", {
                 className: "flex-1",
                 children: [jsx("div", {
-                  className: "text-sm font-semibold text-gray-900",
+                  className: "text-sm font-semibold text-foreground",
                   children: "Elena Brown"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "JUN 19, 2020 4:00 PM"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "Zylker Content Experts"
                 })]
               })]
             }), jsx("div", {
-              className: "text-sm font-semibold text-gray-900 mb-3",
+              className: "text-sm font-semibold text-foreground mb-3",
               children: "SketcheZ - Product Screenshots"
             }), jsxs("div", {
-              className: "text-sm text-gray-700 leading-relaxed mb-4",
+              className: "text-sm text-foreground leading-relaxed mb-4",
               children: ["Hello Ankit Sharma,", jsx("br", {}), jsx("br", {}), "As mentioned in the streams post, I managed to snag few product screenshots. Find the below attachments for reference.", jsx("br", {}), jsx("br", {}), "Elena Brown,", jsx("br", {}), "Event Marketer", jsx("br", {}), "Zylker Games LLC", jsx("br", {}), "New York, NY 10001, USA", jsx("br", {}), "Contact no: 9660-6754", jsx("br", {}), "www.zylker.com"]
             }), jsxs("div", {
-              className: "border-t border-gray-200 pt-4",
+              className: "border-t border-foreground/10 pt-4",
               children: [jsx("div", {
-                className: "text-sm font-medium text-gray-900 mb-2",
+                className: "text-sm font-medium text-foreground mb-2",
                 children: "3 Attachments"
               }), jsxs("div", {
                 className: "flex items-center gap-2 text-xs text-blue-600 mb-3",
@@ -1261,21 +1255,21 @@ function PageView({
               }), jsxs("div", {
                 className: "grid grid-cols-2 gap-2",
                 children: [jsxs("div", {
-                  className: "border border-gray-200 rounded p-2",
+                  className: "border border-foreground/10 rounded p-2",
                   children: [jsx("div", {
-                    className: "text-xs font-medium text-gray-900",
+                    className: "text-xs font-medium text-foreground",
                     children: "SketcheZ - Brush sets.jpg"
                   }), jsx("div", {
-                    className: "text-xs text-gray-500",
+                    className: "text-xs text-muted-foreground",
                     children: "1.7 MB"
                   })]
                 }), jsxs("div", {
-                  className: "border border-gray-200 rounded p-2",
+                  className: "border border-foreground/10 rounded p-2",
                   children: [jsx("div", {
-                    className: "text-xs font-medium text-gray-900",
+                    className: "text-xs font-medium text-foreground",
                     children: "SketcheZ - Desktop.jpg"
                   }), jsx("div", {
-                    className: "text-xs text-gray-500",
+                    className: "text-xs text-muted-foreground",
                     children: "2.0 MB"
                   })]
                 })]
@@ -1289,153 +1283,153 @@ function PageView({
       title: 'Chats',
       icon: Users,
       content: jsxs("div", {
-        className: "bg-white border border-gray-200 rounded-lg p-6 max-w-5xl mx-auto",
+        className: "bg-background border border-foreground/10 rounded-lg p-6 max-w-5xl mx-auto",
         children: [jsxs("div", {
           className: "mb-4",
           children: [jsx("h2", {
-            className: "text-2xl font-semibold text-gray-900 mb-2",
+            className: "text-2xl font-semibold text-foreground mb-2",
             children: "Chats"
           }), jsx("p", {
-            className: "text-sm text-gray-600",
+            className: "text-sm text-muted-foreground",
             children: "Start a 1:1 chat by simply typing @name and message. Eg: @Scott Hola"
           })]
         }), jsxs("div", {
           className: "grid grid-cols-3 gap-6",
           children: [jsxs("div", {
             children: [jsx("h3", {
-              className: "text-sm font-semibold text-gray-900 mb-3",
+              className: "text-sm font-semibold text-foreground mb-3",
               children: "Chats"
             }), jsxs("div", {
               className: "space-y-2",
               children: [jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Nikitha"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "You: Hello Sally"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "#Q2 Sales Pitch"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "You: Can someone give access to deck?"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "#Design Collabs"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "You: Please Sharing the blog banner image"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Arjun"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "You: Are you available for quick call?"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Charles"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "You: Meeting notes shared"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Megha"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "You: Design review completed"
                 })]
               })]
             })]
           }), jsxs("div", {
             children: [jsx("h3", {
-              className: "text-sm font-semibold text-gray-900 mb-3",
+              className: "text-sm font-semibold text-foreground mb-3",
               children: "Contacts"
             }), jsxs("div", {
               className: "space-y-2",
               children: [jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Nikitha"
                 }), jsx("div", {
                   className: "text-xs text-green-600",
                   children: "Available"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Charles"
                 }), jsx("div", {
                   className: "text-xs text-green-600",
                   children: "Available for collaboration"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Esther Howard"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "Offline"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Cheyenne Press"
                 }), jsx("div", {
                   className: "text-xs text-orange-600",
                   children: "In a Meeting"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Carla"
                 }), jsx("div", {
                   className: "text-xs text-yellow-600",
                   children: "Idle"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Anifa"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "On Leave"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Mukunth"
                 }), jsx("div", {
                   className: "text-xs text-green-600",
                   children: "Available"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "Nadya"
                 }), jsx("div", {
                   className: "text-xs text-green-600",
@@ -1445,80 +1439,80 @@ function PageView({
             })]
           }), jsxs("div", {
             children: [jsx("h3", {
-              className: "text-sm font-semibold text-gray-900 mb-3",
+              className: "text-sm font-semibold text-foreground mb-3",
               children: "Channels"
             }), jsxs("div", {
               className: "space-y-2",
               children: [jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "#Q2 Sales Pitch"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "Sales team discussions"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "#Design Collabs"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "Design team collaboration"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "#Subject Matter Experts"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "Expert discussions"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "#Marketing Analysts"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "Marketing insights"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "#Zylker Directors"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "Executive updates"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "#Quarterly Roadmap"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "Planning discussions"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "#Customer Engagement"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "Customer feedback"
                 })]
               }), jsxs("div", {
-                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                className: "p-2 hover:bg-muted rounded cursor-pointer",
                 children: [jsx("div", {
-                  className: "text-sm font-medium text-gray-900",
+                  className: "text-sm font-medium text-foreground",
                   children: "#Enterprise Support"
                 }), jsx("div", {
-                  className: "text-xs text-gray-500",
+                  className: "text-xs text-muted-foreground",
                   children: "Support team"
                 })]
               })]
@@ -1533,52 +1527,52 @@ function PageView({
       content: jsx("div", {
         className: "space-y-6",
         children: jsxs("div", {
-          className: "bg-white border border-gray-200 rounded-lg p-8",
+          className: "bg-background border border-foreground/10 rounded-lg p-8",
           children: [jsxs("div", {
             className: "relative mb-6",
             children: [jsx(Search, {
-              className: "absolute left-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-gray-400"
+              className: "absolute left-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-muted-foreground"
             }), jsx("input", {
               type: "text",
               placeholder: "Q Search across all apps...",
-              className: "w-full pl-12 pr-4 py-4 text-lg border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E33A2C]/20 focus:border-[#E33A2C]"
+              className: "w-full pl-12 pr-4 py-4 text-lg border-2 border-foreground/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E33A2C]/20 focus:border-[#E33A2C] bg-background text-foreground"
             })]
           }), jsxs("div", {
             className: "space-y-4",
             children: [jsxs("div", {
               children: [jsx("h3", {
-                className: "text-sm font-semibold text-gray-700 mb-2",
+                className: "text-sm font-semibold text-foreground mb-2",
                 children: "Quick Access"
               }), jsxs("div", {
                 className: "flex flex-wrap gap-2",
                 children: [jsx("span", {
-                  className: "px-3 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm cursor-pointer hover:bg-gray-200",
+                  className: "px-3 py-1.5 bg-muted text-foreground rounded-full text-sm cursor-pointer hover:bg-muted/80",
                   children: "Files"
                 }), jsx("span", {
-                  className: "px-3 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm cursor-pointer hover:bg-gray-200",
+                  className: "px-3 py-1.5 bg-muted text-foreground rounded-full text-sm cursor-pointer hover:bg-muted/80",
                   children: "Contacts"
                 }), jsx("span", {
-                  className: "px-3 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm cursor-pointer hover:bg-gray-200",
+                  className: "px-3 py-1.5 bg-muted text-foreground rounded-full text-sm cursor-pointer hover:bg-muted/80",
                   children: "Messages"
                 }), jsx("span", {
-                  className: "px-3 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm cursor-pointer hover:bg-gray-200",
+                  className: "px-3 py-1.5 bg-muted text-foreground rounded-full text-sm cursor-pointer hover:bg-muted/80",
                   children: "Tasks"
                 }), jsx("span", {
-                  className: "px-3 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm cursor-pointer hover:bg-gray-200",
+                  className: "px-3 py-1.5 bg-muted text-foreground rounded-full text-sm cursor-pointer hover:bg-muted/80",
                   children: "Notes"
                 })]
               })]
             }), jsxs("div", {
-              className: "border-t border-gray-200 pt-4",
+              className: "border-t border-foreground/10 pt-4",
               children: [jsx("p", {
-                className: "text-sm text-gray-600",
+                className: "text-sm text-muted-foreground",
                 children: "Search for files, contacts, messages, tasks, and more across Clockbook."
               }), jsxs("p", {
-                className: "text-xs text-gray-500 mt-2",
-                children: ["Use keyboard shortcut:", ' ', jsx("kbd", {
-                  className: "px-2 py-1 bg-gray-100 rounded text-xs",
+                className: "text-xs text-muted-foreground mt-2",
+                children: ["Use keyboard shortcut: ", jsx("kbd", {
+                  className: "px-2 py-1 bg-muted rounded text-xs",
                   children: "/"
-                }), " to open search"]
+                }), ' ', "to open search"]
               })]
             })]
           })]
@@ -1595,13 +1589,13 @@ function PageView({
           children: jsxs("div", {
             className: "relative flex-1 max-w-md",
             children: [jsx(Search, {
-              className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"
+              className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground"
             }), jsx("input", {
               type: "text",
               placeholder: "Search notes...",
-              className: "w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E33A2C]/20 focus:border-[#E33A2C]"
+              className: "w-full pl-10 pr-10 py-2 border border-foreground/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E33A2C]/20 focus:border-[#E33A2C] bg-background text-foreground"
             }), jsx(Plus, {
-              className: "absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 cursor-pointer hover:text-gray-600"
+              className: "absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground cursor-pointer hover:text-foreground"
             })]
           })
         }), jsxs("div", {
@@ -1609,45 +1603,45 @@ function PageView({
           children: [jsxs("div", {
             className: "bg-orange-50 border border-orange-200 rounded-lg p-5 relative",
             children: [jsx(MoreHorizontal, {
-              className: "absolute top-3 right-3 w-4 h-4 text-gray-400 cursor-pointer"
+              className: "absolute top-3 right-3 w-4 h-4 text-muted-foreground cursor-pointer"
             }), jsx("h4", {
-              className: "text-base font-semibold text-gray-900 mb-2",
+              className: "text-base font-semibold text-foreground mb-2",
               children: "Weekly goals"
             }), jsx("p", {
-              className: "text-xs text-gray-600",
+              className: "text-xs text-muted-foreground",
               children: "Plan your week ahead with clear objectives and milestones"
             })]
           }), jsxs("div", {
             className: "bg-blue-50 border border-blue-200 rounded-lg p-5 relative",
             children: [jsx(MoreHorizontal, {
-              className: "absolute top-3 right-3 w-4 h-4 text-gray-400 cursor-pointer"
+              className: "absolute top-3 right-3 w-4 h-4 text-muted-foreground cursor-pointer"
             }), jsx("h4", {
-              className: "text-base font-semibold text-gray-900 mb-2",
+              className: "text-base font-semibold text-foreground mb-2",
               children: "New Project Ideas"
             }), jsx("p", {
-              className: "text-xs text-gray-600",
+              className: "text-xs text-muted-foreground",
               children: "Brainstorming session notes and creative concepts"
             })]
           }), jsxs("div", {
             className: "bg-purple-50 border border-purple-200 rounded-lg p-5 relative",
             children: [jsx(MoreHorizontal, {
-              className: "absolute top-3 right-3 w-4 h-4 text-gray-400 cursor-pointer"
+              className: "absolute top-3 right-3 w-4 h-4 text-muted-foreground cursor-pointer"
             }), jsx("h4", {
-              className: "text-base font-semibold text-gray-900 mb-2",
+              className: "text-base font-semibold text-foreground mb-2",
               children: "Follow-ups"
             }), jsx("p", {
-              className: "text-xs text-gray-600",
+              className: "text-xs text-muted-foreground",
               children: "Items to follow up on and action items"
             })]
           }), jsxs("div", {
             className: "bg-green-50 border border-green-200 rounded-lg p-5 relative",
             children: [jsx(MoreHorizontal, {
-              className: "absolute top-3 right-3 w-4 h-4 text-gray-400 cursor-pointer"
+              className: "absolute top-3 right-3 w-4 h-4 text-muted-foreground cursor-pointer"
             }), jsx("h4", {
-              className: "text-base font-semibold text-gray-900 mb-2",
+              className: "text-base font-semibold text-foreground mb-2",
               children: "Checklist"
             }), jsx("p", {
-              className: "text-xs text-gray-600",
+              className: "text-xs text-muted-foreground",
               children: "Daily tasks and reminders for productivity"
             })]
           })]
@@ -1666,12 +1660,12 @@ function PageView({
         children: [jsx(Icon, {
           className: "w-5 h-5 text-[#E33A2C]"
         }), jsx("h2", {
-          className: "text-xl font-semibold text-gray-900",
+          className: "text-xl font-semibold text-foreground",
           children: config.title
         })]
       }), jsx("button", {
         onClick: onClose,
-        className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors",
+        className: "px-4 py-2 text-sm font-medium text-foreground bg-muted rounded-lg hover:bg-muted/80 transition-colors",
         children: "Back to Dashboard"
       })]
     }), config.content]