From 6cc1399adf027fdca0dee93ade515d6f6e0987b3 Mon Sep 17 00:00:00 2001 From: Eneji Victor Date: Fri, 31 Oct 2025 10:37:05 +0100 Subject: [PATCH 1/8] feat: added sun icon for light mode theme toggle --- .../app/(org)/dashboard/_components/Navbar/Mobile.tsx | 9 ++++----- .../app/(org)/dashboard/_components/Navbar/Top.tsx | 11 ++++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx index a40afd15edf..4ffc1d3b75c 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx @@ -1,7 +1,7 @@ "use client"; import { LogoBadge } from "@cap/ui"; -import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"; +import { Sun, Moon } from "lucide-react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useClickAway } from "@uidotdev/usehooks"; import { AnimatePresence, motion } from "framer-motion"; @@ -61,10 +61,9 @@ 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" > - + + {theme === "dark" ? : } + diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx index 4699c4b4647..049d8978937 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx @@ -9,7 +9,8 @@ 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 { Sun, Moon } from "lucide-react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useClickAway } from "@uidotdev/usehooks"; @@ -170,10 +171,10 @@ 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" > - + + {theme === "dark" ? : } + + From 87d31a0298258a3510431c8c2f0143ef90d7797c Mon Sep 17 00:00:00 2001 From: Eneji Victor Date: Fri, 31 Oct 2025 11:14:58 +0100 Subject: [PATCH 2/8] extracting the theme icons into a seperate component --- .../dashboard/_components/Navbar/Mobile.tsx | 7 ++----- .../(org)/dashboard/_components/Navbar/Top.tsx | 7 ++----- apps/web/components/ThemeToggleIcon.tsx | 17 +++++++++++++++++ 3 files changed, 21 insertions(+), 10 deletions(-) create mode 100644 apps/web/components/ThemeToggleIcon.tsx diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx index 4ffc1d3b75c..51c2fec2aaa 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx @@ -1,11 +1,10 @@ "use client"; import { LogoBadge } from "@cap/ui"; -import { Sun, Moon } from "lucide-react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useClickAway } from "@uidotdev/usehooks"; import { AnimatePresence, motion } from "framer-motion"; import { X } from "lucide-react"; +import { ThemeToggleIcon } from "@/components/ThemeToggleIcon"; import Link from "next/link"; import { type MutableRefObject, useState } from "react"; import { useTheme } from "../../Contexts"; @@ -61,9 +60,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" > - - {theme === "dark" ? : } - + diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx index 049d8978937..3deb8376398 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx @@ -10,8 +10,8 @@ import { PopoverTrigger, } from "@cap/ui"; import { faBell } from "@fortawesome/free-solid-svg-icons"; -import { Sun, Moon } from "lucide-react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ThemeToggleIcon } from "@/components/ThemeToggleIcon"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useClickAway } from "@uidotdev/usehooks"; import clsx from "clsx"; @@ -171,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" > - - {theme === "dark" ? : } - - + {" "} diff --git a/apps/web/components/ThemeToggleIcon.tsx b/apps/web/components/ThemeToggleIcon.tsx new file mode 100644 index 00000000000..be5a2f9ef21 --- /dev/null +++ b/apps/web/components/ThemeToggleIcon.tsx @@ -0,0 +1,17 @@ +"use client"; +import { Sun, Moon } from "lucide-react"; +import { useTheme } from "@/app/(org)/dashboard/Contexts"; + +export const ThemeToggleIcon = () => { + const { theme } = useTheme(); + + return ( + + {theme === "dark" ? ( + + ) : ( + + )} + + ); +}; From 086ac5ffd76e156f1f0c973d9791065f8f006962 Mon Sep 17 00:00:00 2001 From: Eneji Victor Date: Fri, 31 Oct 2025 11:36:28 +0100 Subject: [PATCH 3/8] Removing hard coded color --- apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx | 2 +- apps/web/components/ThemeToggleIcon.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx index 3deb8376398..1955dc70fc0 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx @@ -171,7 +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" > - {" "} + diff --git a/apps/web/components/ThemeToggleIcon.tsx b/apps/web/components/ThemeToggleIcon.tsx index be5a2f9ef21..f181d21646f 100644 --- a/apps/web/components/ThemeToggleIcon.tsx +++ b/apps/web/components/ThemeToggleIcon.tsx @@ -8,7 +8,7 @@ export const ThemeToggleIcon = () => { return ( {theme === "dark" ? ( - + ) : ( )} From ed3fe5e5512828717c03d8c146b67033f3f06d78 Mon Sep 17 00:00:00 2001 From: Eneji Victor Date: Fri, 31 Oct 2025 12:12:40 +0100 Subject: [PATCH 4/8] Rename the file from ThemeToggleIcon.tsx to theme-toggle-icon.tsx --- apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx | 2 +- apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx | 2 +- .../components/{ThemeToggleIcon.tsx => theme-toggle-icon.tsx} | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) rename apps/web/components/{ThemeToggleIcon.tsx => theme-toggle-icon.tsx} (73%) diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx index 51c2fec2aaa..154808bf76d 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx @@ -4,7 +4,7 @@ import { LogoBadge } from "@cap/ui"; import { useClickAway } from "@uidotdev/usehooks"; import { AnimatePresence, motion } from "framer-motion"; import { X } from "lucide-react"; -import { ThemeToggleIcon } from "@/components/ThemeToggleIcon"; +import { ThemeToggleIcon } from "@/components/theme-toggle-icon"; import Link from "next/link"; import { type MutableRefObject, useState } from "react"; import { useTheme } from "../../Contexts"; diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx index 1955dc70fc0..f0413d837dc 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx @@ -11,7 +11,7 @@ import { } from "@cap/ui"; import { faBell } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { ThemeToggleIcon } from "@/components/ThemeToggleIcon"; +import { ThemeToggleIcon } from "@/components/theme-toggle-icon"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useClickAway } from "@uidotdev/usehooks"; import clsx from "clsx"; diff --git a/apps/web/components/ThemeToggleIcon.tsx b/apps/web/components/theme-toggle-icon.tsx similarity index 73% rename from apps/web/components/ThemeToggleIcon.tsx rename to apps/web/components/theme-toggle-icon.tsx index f181d21646f..5921c52052e 100644 --- a/apps/web/components/ThemeToggleIcon.tsx +++ b/apps/web/components/theme-toggle-icon.tsx @@ -8,9 +8,9 @@ export const ThemeToggleIcon = () => { return ( {theme === "dark" ? ( - + ) : ( - + )} ); From c102b6c419103da475823c7902feafd4cf2669f0 Mon Sep 17 00:00:00 2001 From: Eneji Victor Date: Fri, 31 Oct 2025 14:31:35 +0100 Subject: [PATCH 5/8] applying proper importing --- .../(org)/dashboard/_components/Navbar/Mobile.tsx | 2 +- .../app/(org)/dashboard/_components/Navbar/Top.tsx | 14 +++++++------- apps/web/components/theme-toggle-icon.tsx | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx index 154808bf76d..623f9dcb20c 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx @@ -1,10 +1,10 @@ "use client"; +import { ThemeToggleIcon } from "@/components/theme-toggle-icon"; import { LogoBadge } from "@cap/ui"; import { useClickAway } from "@uidotdev/usehooks"; import { AnimatePresence, motion } from "framer-motion"; import { X } from "lucide-react"; -import { ThemeToggleIcon } from "@/components/theme-toggle-icon"; import Link from "next/link"; import { type MutableRefObject, useState } from "react"; import { useTheme } from "../../Contexts"; diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx index f0413d837dc..2f1ddd9a28a 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx @@ -1,5 +1,10 @@ "use client"; +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 { buildEnv } from "@cap/env"; import { Command, @@ -11,28 +16,23 @@ import { } from "@cap/ui"; import { faBell } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { ThemeToggleIcon } from "@/components/theme-toggle-icon"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { useClickAway } from "@uidotdev/usehooks"; import clsx from "clsx"; import { AnimatePresence } from "framer-motion"; import { MoreVertical } from "lucide-react"; +import { signOut } from "next-auth/react"; import Link from "next/link"; import { usePathname } from "next/navigation"; -import { signOut } from "next-auth/react"; import { cloneElement, - type MutableRefObject, memo, + type MutableRefObject, type RefObject, useMemo, useRef, useState, } from "react"; -import { markAsRead } from "@/actions/notifications/mark-as-read"; -import Notifications from "@/app/(org)/dashboard/_components/Notifications"; -import { SignedImageUrl } from "@/components/SignedImageUrl"; -import { UpgradeModal } from "@/components/UpgradeModal"; import { useDashboardContext, useTheme } from "../../Contexts"; import { ArrowUpIcon, diff --git a/apps/web/components/theme-toggle-icon.tsx b/apps/web/components/theme-toggle-icon.tsx index 5921c52052e..d2dd414190f 100644 --- a/apps/web/components/theme-toggle-icon.tsx +++ b/apps/web/components/theme-toggle-icon.tsx @@ -1,6 +1,6 @@ "use client"; -import { Sun, Moon } from "lucide-react"; import { useTheme } from "@/app/(org)/dashboard/Contexts"; +import { Moon, Sun } from "lucide-react"; export const ThemeToggleIcon = () => { const { theme } = useTheme(); From c8a2216d3389de0f749ef784fb5ae01794fb489e Mon Sep 17 00:00:00 2001 From: Eneji Victor Date: Fri, 31 Oct 2025 14:42:18 +0100 Subject: [PATCH 6/8] Rearranging the import --- .../(org)/dashboard/_components/Navbar/Mobile.tsx | 3 ++- .../app/(org)/dashboard/_components/Navbar/Top.tsx | 14 +++++++------- apps/web/components/theme-toggle-icon.tsx | 2 +- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx index 623f9dcb20c..b996e13eaf0 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Mobile.tsx @@ -1,12 +1,13 @@ "use client"; -import { ThemeToggleIcon } from "@/components/theme-toggle-icon"; import { LogoBadge } from "@cap/ui"; 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"; diff --git a/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx b/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx index 2f1ddd9a28a..d166e0f857d 100644 --- a/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx +++ b/apps/web/app/(org)/dashboard/_components/Navbar/Top.tsx @@ -1,10 +1,5 @@ "use client"; -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 { buildEnv } from "@cap/env"; import { Command, @@ -21,18 +16,23 @@ import { useClickAway } from "@uidotdev/usehooks"; import clsx from "clsx"; import { AnimatePresence } from "framer-motion"; import { MoreVertical } from "lucide-react"; -import { signOut } from "next-auth/react"; import Link from "next/link"; import { usePathname } from "next/navigation"; +import { signOut } from "next-auth/react"; import { cloneElement, - memo, type MutableRefObject, + memo, type RefObject, useMemo, useRef, useState, } from "react"; +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 { ArrowUpIcon, diff --git a/apps/web/components/theme-toggle-icon.tsx b/apps/web/components/theme-toggle-icon.tsx index d2dd414190f..f5102e09fe6 100644 --- a/apps/web/components/theme-toggle-icon.tsx +++ b/apps/web/components/theme-toggle-icon.tsx @@ -1,6 +1,6 @@ "use client"; -import { useTheme } from "@/app/(org)/dashboard/Contexts"; import { Moon, Sun } from "lucide-react"; +import { useTheme } from "@/app/(org)/dashboard/Contexts"; export const ThemeToggleIcon = () => { const { theme } = useTheme(); From 2898073441a324289d288d4d2cecd4544cf321e1 Mon Sep 17 00:00:00 2001 From: Eneji Victor Date: Fri, 31 Oct 2025 15:05:20 +0100 Subject: [PATCH 7/8] Add accessibility attributes for screen readers. --- apps/web/components/theme-toggle-icon.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/web/components/theme-toggle-icon.tsx b/apps/web/components/theme-toggle-icon.tsx index f5102e09fe6..be4d9ad0388 100644 --- a/apps/web/components/theme-toggle-icon.tsx +++ b/apps/web/components/theme-toggle-icon.tsx @@ -6,12 +6,18 @@ export const ThemeToggleIcon = () => { const { theme } = useTheme(); return ( - + ); }; From 96c004ee61ae2e9808886fc7f715de94fe1a9121 Mon Sep 17 00:00:00 2001 From: Eneji Victor Date: Fri, 31 Oct 2025 15:33:28 +0100 Subject: [PATCH 8/8] Fixed the accessibility issue --- apps/web/components/theme-toggle-icon.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/apps/web/components/theme-toggle-icon.tsx b/apps/web/components/theme-toggle-icon.tsx index be4d9ad0388..f5102e09fe6 100644 --- a/apps/web/components/theme-toggle-icon.tsx +++ b/apps/web/components/theme-toggle-icon.tsx @@ -6,18 +6,12 @@ export const ThemeToggleIcon = () => { const { theme } = useTheme(); return ( - + ); };