From 1cfda8fb9fa2877451dc5489427d6c15b1d2a77f Mon Sep 17 00:00:00 2001
From: Henry Dollman <hank@henrygd.me>
Date: Mon, 2 Sep 2024 15:56:57 -0400
Subject: [PATCH] add icons to theme menu

---
 beszel/site/src/components/mode-toggle.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/beszel/site/src/components/mode-toggle.tsx b/beszel/site/src/components/mode-toggle.tsx
index c0b404f..35e1bc3 100644
--- a/beszel/site/src/components/mode-toggle.tsx
+++ b/beszel/site/src/components/mode-toggle.tsx
@@ -1,4 +1,4 @@
-import { MoonStarIcon, Sun } from 'lucide-react'
+import { LaptopIcon, MoonStarIcon, SunIcon } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
 import {
@@ -16,15 +16,24 @@ export function ModeToggle() {
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
 				<Button variant={'ghost'} size="icon">
-					<Sun className="h-[1.2rem] w-[1.2rem] dark:opacity-0" />
+					<SunIcon className="h-[1.2rem] w-[1.2rem] dark:opacity-0" />
 					<MoonStarIcon className="absolute h-[1.2rem] w-[1.2rem] opacity-0 dark:opacity-100" />
 					<span className="sr-only">Toggle theme</span>
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent>
-				<DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
-				<DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme('light')}>
+					<SunIcon className="mr-2.5 h-4 w-4" />
+					Light
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme('dark')}>
+					<MoonStarIcon className="mr-2.5 h-4 w-4" />
+					Dark
+				</DropdownMenuItem>
+				<DropdownMenuItem onClick={() => setTheme('system')}>
+					<LaptopIcon className="mr-2.5 h-4 w-4" />
+					System
+				</DropdownMenuItem>
 			</DropdownMenuContent>
 		</DropdownMenu>
 	)