From c998ca2387f02089e7b8f97b66304c38b482701d Mon Sep 17 00:00:00 2001 From: Alok Tomar Date: Thu, 27 Feb 2025 18:31:48 +0530 Subject: [PATCH 1/4] feat: Add dark mode support to dashboard --- pkg/dashboard/frontend/package.json | 1 + .../frontend/src/components/ModeToggle.tsx | 40 +++++++++++ .../src/components/apis/APIHistory.tsx | 2 +- .../components/architecture/Architecture.tsx | 12 ++-- .../components/architecture/DetailsDrawer.tsx | 10 +-- .../components/architecture/NitricEdge.tsx | 4 +- .../architecture/nodes/NodeBase.tsx | 6 +- .../architecture/nodes/ScheduleNode.tsx | 12 ++-- .../components/layout/AppLayout/AppLayout.tsx | 72 ++++++++++--------- .../layout/AppLayout/NavigationItem.tsx | 7 +- .../src/components/theme-provider.tsx | 11 +++ pkg/dashboard/frontend/yarn.lock | 5 ++ 12 files changed, 121 insertions(+), 61 deletions(-) create mode 100644 pkg/dashboard/frontend/src/components/ModeToggle.tsx create mode 100644 pkg/dashboard/frontend/src/components/theme-provider.tsx diff --git a/pkg/dashboard/frontend/package.json b/pkg/dashboard/frontend/package.json index d9d458b93..0476cd862 100644 --- a/pkg/dashboard/frontend/package.json +++ b/pkg/dashboard/frontend/package.json @@ -62,6 +62,7 @@ "html-to-image": "^1.11.11", "lottie-react": "^2.4.0", "lucide-react": "^0.471.1", + "next-themes": "^0.4.4", "radash": "^12.1.0", "react": "^18.3.1", "react-complex-tree": "^2.4.4", diff --git a/pkg/dashboard/frontend/src/components/ModeToggle.tsx b/pkg/dashboard/frontend/src/components/ModeToggle.tsx new file mode 100644 index 000000000..81474d740 --- /dev/null +++ b/pkg/dashboard/frontend/src/components/ModeToggle.tsx @@ -0,0 +1,40 @@ +"use client" + +import * as React from "react" +import { Moon, Sun } from "lucide-react" +import { useTheme } from "next-themes" + +import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" + +export function ModeToggle() { + const { setTheme } = useTheme() + + return ( + + + + + + setTheme("light")}> + Light + + setTheme("dark")}> + Dark + + setTheme("system")}> + System + + + + ) +} diff --git a/pkg/dashboard/frontend/src/components/apis/APIHistory.tsx b/pkg/dashboard/frontend/src/components/apis/APIHistory.tsx index 911137cdd..470307b51 100644 --- a/pkg/dashboard/frontend/src/components/apis/APIHistory.tsx +++ b/pkg/dashboard/frontend/src/components/apis/APIHistory.tsx @@ -57,7 +57,7 @@ const APIHistory: React.FC = ({ }) if (!requestHistory.length) { - return

There is no history.

+ return

There is no history.

} return ( diff --git a/pkg/dashboard/frontend/src/components/architecture/Architecture.tsx b/pkg/dashboard/frontend/src/components/architecture/Architecture.tsx index c5dcdaad1..bb5fcf867 100644 --- a/pkg/dashboard/frontend/src/components/architecture/Architecture.tsx +++ b/pkg/dashboard/frontend/src/components/architecture/Architecture.tsx @@ -181,15 +181,15 @@ function ReactFlowLayout() { )} -
-
+
+
Connector Types
- - Triggers - - Dependencies + + Triggers + + Dependencies
diff --git a/pkg/dashboard/frontend/src/components/architecture/DetailsDrawer.tsx b/pkg/dashboard/frontend/src/components/architecture/DetailsDrawer.tsx index 51a4c0456..101b46a59 100644 --- a/pkg/dashboard/frontend/src/components/architecture/DetailsDrawer.tsx +++ b/pkg/dashboard/frontend/src/components/architecture/DetailsDrawer.tsx @@ -111,7 +111,7 @@ export const DetailsDrawer = ({ return ( - +
- Address: + Address: {address.startsWith('http') ? ( @@ -147,13 +147,13 @@ export const DetailsDrawer = ({ )} {services?.length ? (
- Requested by: + Requested by:
{services.map((s) => ( @@ -310,10 +310,10 @@ const AppLayout: React.FC = ({

A new version of Nitric is available

-
-
+
+
@@ -322,14 +322,14 @@ const AppLayout: React.FC = ({ href={'https://nitric.io/docs/installation'} target="_blank" rel="noreferrer" - className="font-semibold text-gray-900" + className="font-semibold text-foreground" > Upgrade from version ' {data.currentVersion}' to ' {data.latestVersion}' -

+

To upgrade, visit the installation docs for instructions and release notes

@@ -337,12 +337,12 @@ const AppLayout: React.FC = ({
-
+
-

+

Reach out to the community

-
+
{communityLinks .filter((item) => item.name !== 'Sponsor') .map((item) => ( @@ -351,10 +351,10 @@ const AppLayout: React.FC = ({ href={item.href} target="_blank" rel="noreferrer" - className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100" + className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-foreground hover:bg-accent" >
-
+
-

+

Reach out to the community

-
+
{communityLinks .filter((item) => item.name !== 'Sponsor') .map((item) => ( @@ -430,17 +432,17 @@ const AppLayout: React.FC = ({ href={item.href} target="_blank" rel="noreferrer" - className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100" + className="flex items-center justify-center gap-x-2.5 p-3 font-semibold text-foreground hover:bg-accent" >
-

+

CLI Version: v{data?.currentVersion}

@@ -465,9 +467,9 @@ const AppLayout: React.FC = ({ )}
-
+

{title}

diff --git a/pkg/dashboard/frontend/src/components/layout/AppLayout/NavigationItem.tsx b/pkg/dashboard/frontend/src/components/layout/AppLayout/NavigationItem.tsx index 63b362af4..5a9c85c77 100644 --- a/pkg/dashboard/frontend/src/components/layout/AppLayout/NavigationItem.tsx +++ b/pkg/dashboard/frontend/src/components/layout/AppLayout/NavigationItem.tsx @@ -32,10 +32,11 @@ const NavigationItem: React.FC = ({ target={href.startsWith('http') ? '_blank' : undefined} rel={href.startsWith('http') ? 'noopener noreferrer' : undefined} className={cn( - isActive - ? 'bg-gray-100 text-primary shadow-sm' - : 'text-gray-400 hover:bg-gray-100 hover:text-primary', 'group relative flex h-12 w-12 items-center gap-x-3 rounded-md p-3 text-sm font-semibold leading-6 transition-all group-data-[state=expanded]:w-full', + isActive + ? 'bg-accent text-accent-foreground' + : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground', + 'dark:hover:bg-accent' )} >