New light mood toggle icon (#1328)

* feat: added sun icon for light mode theme toggle

* extracting the theme icons into a seperate component

* Removing hard coded color

* Rename the file from ThemeToggleIcon.tsx to theme-toggle-icon.tsx

* applying proper importing

* Rearranging the import

* Add accessibility attributes for screen readers.

* Fixed the accessibility issue

Author: Enejivk

apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { LogoBadge } from "@cap/ui";
-import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useClickAway } from "@uidotdev/usehooks";
 import { AnimatePresence, motion } from "framer-motion";
 import { X } from "lucide-react";
 import Link from "next/link";
 import { type MutableRefObject, useState } from "react";
+
+import { ThemeToggleIcon } from "@/components/theme-toggle-icon";
 import { useTheme } from "../../Contexts";
 import NavItems from "./Items";
 
@@ -61,10 +61,7 @@ export const AdminMobileNav = () => {
 						}}
 						className="flex justify-center items-center rounded-full border transition-colors cursor-pointer lg:hidden bg-gray-4 hover:border-gray-6 hover:bg-gray-5 size-9 border-gray-5"
 					>
-						<FontAwesomeIcon
-							className="text-gray-12 size-3.5"
-							icon={theme === "dark" ? faSun : faMoon}
-						/>
+						<ThemeToggleIcon />
 					</div>
 				</div>
 			</div>

apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx

@@ -9,7 +9,7 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "@cap/ui";
-import { faBell, faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
+import { faBell } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useClickAway } from "@uidotdev/usehooks";
@@ -31,6 +31,7 @@ import {
 import { markAsRead } from "@/actions/notifications/mark-as-read";
 import Notifications from "@/app/(org)/dashboard/_components/Notifications";
 import { SignedImageUrl } from "@/components/SignedImageUrl";
+import { ThemeToggleIcon } from "@/components/theme-toggle-icon";
 import { UpgradeModal } from "@/components/UpgradeModal";
 import { useDashboardContext, useTheme } from "../../Contexts";
 import {
@@ -170,10 +171,7 @@ const Top = () => {
 					}}
 					className="hidden justify-center items-center rounded-full transition-colors cursor-pointer bg-gray-3 lg:flex hover:bg-gray-5 size-9"
 				>
-					<FontAwesomeIcon
-						className="text-gray-12 size-3.5 view-transition-theme-icon"
-						icon={theme === "dark" ? faMoon : faSun}
-					/>
+					<ThemeToggleIcon />
 				</div>
 				<User />
 			</div>

apps/web/components/theme-toggle-icon.tsx

@@ -0,0 +1,17 @@
+"use client";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "@/app/(org)/dashboard/Contexts";
+
+export const ThemeToggleIcon = () => {
+	const { theme } = useTheme();
+
+	return (
+		<span className="view-transition-theme-icon">
+			{theme === "dark" ? (
+				<Moon size={17} className="fill-white stroke-gray-3" />
+			) : (
+				<Sun size={17} className="stroke-gray-12" />
+			)}
+		</span>
+	);
+};