Merge pull request #253 from mohamedsalem401/theme-switcher

✨ Add light and dark theme switcher

apps/webapp/src/components/events/components/columns.tsx

@@ -139,7 +139,7 @@ export const columns: ColumnDef<Event>[] = [
       return (
         <div className="flex w-[100px] items-center">
           {row.getValue("integration") ? 
-            <Badge variant={"outline"} className="bg-neutral-950 p-1 pr-2">
+            <Badge variant={"outline"} className="p-1 pr-2">
               <img src={
                 provider == "hubspot" ?
                 `/providers/crm/${provider}.jpg` : 

apps/webapp/src/components/homepage/components/main-nav-sm.tsx

@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/sheet"
 import { MenuIcon } from "lucide-react"
 import { useState } from "react"
+import { ThemeSwitcher } from "@/components/theme-switcher"
 
 
 export function SmallNav({ 
@@ -36,12 +37,13 @@ export function SmallNav({
           <Button variant="outline" onClick={()=> setOpen(true)}><MenuIcon className="h-6 w-6" /></Button>
         </SheetTrigger>
         <SheetContent side={"left"} className="p-0  w-[200px]">
-          <SheetHeader>
+          <SheetHeader className="flex items-center">
             <SheetTitle className="mx-4 my-4">
               <div className="flex flex-row items-center">
                 <img src="logo.png" className="w-10 mr-1"/><span className="font-bold">Panora.</span>
               </div>
             </SheetTitle>
+            <ThemeSwitcher />
           </SheetHeader>
           <nav
               className={`flex flex-col items-start mt-6`}

apps/webapp/src/components/homepage/components/main-nav.tsx

@@ -11,8 +11,8 @@ export function MainNav({
   const [selectedItem, setSelectedItem] = useState<string>("quickstart");
 
   const navItemClassName = (itemName: string) =>
-    `text-sm border-b font-medium w-full text-left px-4 py-2 hover:bg-zinc-900 cursor-pointer ${
-      selectedItem === itemName ? "bg-zinc-800" : "text-muted-foreground"
+    `text-sm border-b font-medium w-full text-left px-4 py-2 dark:hover:bg-zinc-900 hover:bg-zinc-200 cursor-pointer ${
+      selectedItem === itemName ? 'dark:bg-zinc-800 bg-zinc-200' : 'text-muted-foreground'
     } transition-colors`;
 
   function click(name: string) {

apps/webapp/src/components/root-layout.tsx

@@ -4,6 +4,7 @@ import { SmallNav } from './homepage/components/main-nav-sm';
 import { UserNav } from './homepage/components/user-nav';
 import TeamSwitcher from './shared/team-switcher';
 import { Outlet, useNavigate } from 'react-router-dom';
+import { ThemeSwitcher } from './theme-switcher';
 
 export const RootLayout = () => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -31,8 +32,9 @@ export const RootLayout = () => {
       ) : (
         <div className='items-center hidden lg:flex lg:flex-col border-r fixed left-0 bg-opacity-90 backdrop-filter backdrop-blur-lg w-[200px] h-screen'>
           <div className='flex lg:flex-col items-center py-4 space-y-4'>
-            <div className='flex flex-row justify-center'>
+            <div className='flex flex-row justify-between items-center w-full px-4'>
               <img src='logo.png' className='w-14' />
+              <ThemeSwitcher />
             </div>
             <TeamSwitcher className='w-40 ml-3' />
             <MainNav

apps/webapp/src/components/theme-provider.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useState } from "react"
 
-type Theme = "dark" | "light" | "system"
+export type Theme = 'dark' | 'light' | 'system';
 
 type ThemeProviderProps = {
   children: React.ReactNode
@@ -66,7 +66,7 @@ export function ThemeProvider({
 export const useTheme = () => {
   const context = useContext(ThemeProviderContext)
 
-  if (context === undefined)
+  if (context === undefined) 
     throw new Error("useTheme must be used within a ThemeProvider")
 
   return context

apps/webapp/src/components/theme-switcher.tsx

@@ -0,0 +1,36 @@
+import { DesktopIcon, MoonIcon, SunIcon } from '@radix-ui/react-icons';
+
+import { Button } from './ui/button';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from './ui/dropdown-menu';
+import { type Theme, useTheme } from './theme-provider';
+
+const themeElements: Record<Theme, React.ReactNode> = {
+  light: <SunIcon className='h-4 w-4' />,
+  dark: <MoonIcon className='h-4 w-4' />,
+  system: <DesktopIcon className='h-4 w-4' />,
+};
+
+export const ThemeSwitcher = () => {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant='ghost' className='rounded-full' size='icon'>
+          {themeElements[theme]}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className='min-w-[5rem]'>
+        {Object.entries(themeElements).map(([themeOption, icon]) => (
+          <DropdownMenuCheckboxItem
+            key={themeOption}
+            checked={theme === themeOption}
+            onCheckedChange={() => setTheme(themeOption as Theme)}
+          >
+            {icon}
+          </DropdownMenuCheckboxItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

apps/webapp/src/index.css

@@ -4,68 +4,52 @@
 
 @layer base {
   :root {
-    --background: 0 0% 7%;
-    --foreground: 222.2 84% 4.9%;
-
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
+    --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 0 0% 7%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 0 0% 7%;
-    --foreground: 210 40% 98%;
-
-    --card: 0 0% 7%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 0 0% 7%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 0 0% 7%;
-    --primary-foreground: 0 0% 100%;
-
-    --secondary: 0 0% 7%;
-    --secondary-foreground: 0 0% 7%;
-
-    --muted: 0 0% 17.5%;
-    --muted-foreground: 0 0% 100%;
-
-    --accent: 0 0% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 0% 17.5%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 0 0% 40%;
-    --input: 0 0% 40%;
-    --ring: 0 0% 100%;
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 46.8%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
   }
 }
 
+
 @layer base {
   * {
     @apply border-border;