Refactor theme toggle and update header navigation links (#421)

ttizze · Dec 5, 2024 · 31027cb · 31027cb
2 parents 31b34b0 + b9e228c
commit 31027cb
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git a/web/app/components/ModeToggle.tsx b/web/app/components/ModeToggle.tsx
@@ -6,10 +6,10 @@ export const ModeToggle = forwardRef<HTMLButtonElement, { showText?: boolean }>(
 	(props, ref) => {
 		const { showText = true } = props;
 		const { theme, setTheme } = useTheme();
-		const isDark = theme === "dark";
+		const isLight = theme === "light";
 
 		function toggleTheme() {
-			setTheme(isDark ? "light" : "dark");
+			setTheme(isLight ? "dark" : "light");
 		}
 
 		return (
@@ -20,12 +20,12 @@ export const ModeToggle = forwardRef<HTMLButtonElement, { showText?: boolean }>(
 				className="w-full gap-2 flex cursor-pointer items-center px-4 py-3 text-sm hover:bg-accent hover:text-accent-foreground"
 			>
 				<Sun
-					className={`w-4 h-4  ${isDark ? "rotate-0 scale-100 " : "hidden"}`}
+					className={`w-4 h-4  ${isLight ? "rotate-0 scale-100 " : "hidden"}`}
 				/>
 				<Moon
-					className={`w-4 h-4 ${isDark ? "hidden" : "rotate-0 scale-100 text-gray-800"}`}
+					className={`w-4 h-4 ${isLight ? "hidden" : "rotate-0 scale-100"}`}
 				/>
-				{showText && <span>{isDark ? "Light Theme" : "Dark Theme"}</span>}
+				{showText && <span>{isLight ? "Light Theme" : "Dark Theme"}</span>}
 			</button>
 		);
 	},

diff --git a/web/app/routes/resources+/header.tsx b/web/app/routes/resources+/header.tsx
@@ -3,6 +3,7 @@ import type { ActionFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import { Link } from "@remix-run/react";
 import { Form } from "@remix-run/react";
+import { NavLink } from "@remix-run/react";
 import { LogOutIcon, Search, SettingsIcon } from "lucide-react";
 import { StartButton } from "~/components/StartButton";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
@@ -57,12 +58,16 @@ export function Header({ currentUser }: HeaderProps) {
 				<div
 					className={`grid ${currentUser ? "grid-cols-3" : "grid-cols-2"} gap-3 items-center mr-2`}
 				>
-					<Link
+					<NavLink
 						to="/search"
-						className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white justify-self-end"
+						className={({ isPending }) =>
+							isPending
+								? "opacity-50"
+								: "opacity-100 text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white justify-self-end"
+						}
 					>
 						<Search className="w-6 h-6 " />
-					</Link>
+					</NavLink>
 					{currentUser ? (
 						<>
 							<NewPageButton userName={currentUser.userName} />
@@ -80,17 +85,21 @@ export function Header({ currentUser }: HeaderProps) {
 								</DropdownMenuTrigger>
 								<DropdownMenuContent className="m-2 p-0 rounded-xl min-w-40">
 									<DropdownMenuItem asChild>
-										<Link
+										<NavLink
 											to={`/${currentUser.userName}`}
-											className="w-full rounded-none  px-4 py-3 cursor-pointer hover:bg-accent hover:text-accent-foreground"
+											className={({ isPending }) =>
+												isPending
+													? "opacity-50"
+													: "opacity-100 w-full  px-4 py-3 cursor-pointer hover:bg-accent hover:text-accent-foreground"
+											}
 										>
 											<div className="flex flex-col items-start">
 												{currentUser.displayName}
 												<span className="text-xs text-gray-500">
 													@{currentUser.userName}
 												</span>
 											</div>
-										</Link>
+										</NavLink>
 									</DropdownMenuItem>
 									<DropdownMenuSeparator className="my-0" />
 									<DropdownMenuItem asChild>