From 62ba56b3bc1c507897694788601461eab9009bec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alin=20Tr=C4=83istaru?= Date: Tue, 15 Apr 2025 01:00:22 +0200 Subject: [PATCH] add light/system theme --- src/app/(dashboard)/dns/settings/page.tsx | 2 +- src/app/(dashboard)/network/page.tsx | 2 +- src/app/(dashboard)/peer/page.tsx | 8 +-- src/app/(dashboard)/settings/page.tsx | 2 +- src/app/(dashboard)/team/user/page.tsx | 2 +- src/app/globals.css | 36 ++++++++++++ src/assets/netbird-full-light.svg | 19 ++++++ src/auth/OIDCError.tsx | 2 +- src/auth/SessionLost.tsx | 2 +- src/components/Badge.tsx | 42 +++++++------- src/components/Button.tsx | 6 +- src/components/Card.tsx | 8 +-- src/components/Code.tsx | 10 ++-- src/components/Command.tsx | 2 +- src/components/CopyToClipboardText.tsx | 4 +- src/components/Dialog.tsx | 2 +- src/components/DropdownInfoText.tsx | 2 +- src/components/DropdownInput.tsx | 8 +-- src/components/DropdownMenu.tsx | 4 +- src/components/FancyToggleSwitch.tsx | 4 +- src/components/FullTooltip.tsx | 5 +- src/components/HelpText.tsx | 2 +- src/components/Input.tsx | 58 +++++++++---------- src/components/JSONFileUpload.tsx | 16 ++--- src/components/Kbd.tsx | 4 +- src/components/NetworkRouteSelector.tsx | 20 +++---- src/components/Paragraph.tsx | 2 +- src/components/PeerGroupSelector.tsx | 18 +++--- src/components/PeerSelector.tsx | 18 +++--- src/components/PortSelector.tsx | 12 ++-- src/components/RadioGroup.tsx | 11 ++-- src/components/SegmentedTabs.tsx | 14 ++--- src/components/Select.tsx | 6 +- src/components/SmallParagraph.tsx | 2 +- src/components/SquareIcon.tsx | 2 +- src/components/Textarea.tsx | 15 ++--- src/components/ToggleSwitch.tsx | 20 ++++--- src/components/VerticalTabs.tsx | 8 +-- src/components/modal/Modal.tsx | 7 ++- src/components/select/SelectDropdown.tsx | 8 +-- .../select/SelectDropdownSearchInput.tsx | 8 +-- src/components/skeletons/SkeletonHeader.tsx | 22 +++---- src/components/skeletons/SkeletonTable.tsx | 2 +- .../table/DataTableHeadingPortal.tsx | 3 +- src/components/table/DataTablePagination.tsx | 6 +- .../table/DataTableRefreshButton.tsx | 9 ++- .../table/DataTableResetFilterButton.tsx | 11 +++- src/components/table/DataTableRowsPerPage.tsx | 12 ++-- src/components/table/Table.tsx | 21 +++---- src/components/ui/AIButton.tsx | 2 +- src/components/ui/AccessControlGroupCount.tsx | 6 +- src/components/ui/AnnouncementBanner.tsx | 8 +-- src/components/ui/DarkModeToggle.tsx | 2 - src/components/ui/DescriptionWithTooltip.tsx | 2 +- src/components/ui/GetStarted.tsx | 4 +- src/components/ui/GetStartedTest.tsx | 2 +- src/components/ui/GradientFadedBackground.tsx | 2 +- src/components/ui/GroupBadgeWithEditPeers.tsx | 6 +- src/components/ui/Lightbox.tsx | 4 +- src/components/ui/Mark.tsx | 4 +- src/components/ui/NoResults.tsx | 6 +- src/components/ui/NoResultsCard.tsx | 6 +- src/components/ui/RestrictedAccess.tsx | 2 +- src/components/ui/SmallBadge.tsx | 2 +- src/components/ui/UserAvatar.tsx | 2 +- src/contexts/GlobalThemeProvider.tsx | 21 ++++++- src/layouts/AppLayout.tsx | 18 +++--- src/layouts/DashboardLayout.tsx | 4 +- src/layouts/Header.tsx | 11 +++- src/layouts/PageContainer.tsx | 2 +- .../access-control/AccessControlModal.tsx | 8 +-- .../access-tokens/AccessTokensTable.tsx | 3 +- src/modules/activity/ActivityEntryRow.tsx | 28 ++++----- .../activity/ActivityEventCodeSelector.tsx | 4 +- src/modules/activity/ActivityTable.tsx | 1 - src/modules/activity/ActivityUserSelector.tsx | 4 +- .../common-table-rows/ActiveInactiveRow.tsx | 16 +++-- src/modules/common-table-rows/LastTimeRow.tsx | 8 +-- .../table/NameserverNameCell.tsx | 2 +- src/modules/groups/AssignPeerToGroupModal.tsx | 4 +- src/modules/groups/GroupSelector.tsx | 6 +- .../misc/NetworkInformationSquare.tsx | 20 +++---- .../networks/resources/ResourceNameCell.tsx | 6 +- .../networks/resources/ResourcePolicyCell.tsx | 2 +- src/modules/peer/AddRouteDropdownButton.tsx | 8 +-- src/modules/peer/PeerRouteNameCell.tsx | 4 +- src/modules/peers/PeerAddressCell.tsx | 4 +- .../peers/PeerAddressTooltipContent.tsx | 6 +- src/modules/peers/PeerLastSeenCell.tsx | 4 +- src/modules/peers/PeerNameCell.tsx | 7 +-- src/modules/peers/PeerOSCell.tsx | 18 +++--- src/modules/peers/PeerVersionCell.tsx | 4 +- .../checks/tooltips/GeoLocationTooltip.tsx | 2 +- .../checks/tooltips/NetBirdVersionTooltip.tsx | 2 +- .../tooltips/PeerNetworkRangeTooltip.tsx | 4 +- .../checks/tooltips/ProcessTooltip.tsx | 2 +- .../table/PostureCheckBrowseTable.tsx | 4 +- .../table/cells/PostureCheckChecksCell.tsx | 4 +- .../table/cells/PostureCheckNameCell.tsx | 2 +- .../posture-checks/ui/PostureCheckCard.tsx | 12 ++-- .../posture-checks/ui/PostureCheckIcons.tsx | 4 +- src/modules/routes/RouteTable.tsx | 1 - src/modules/settings/AuthenticationTab.tsx | 4 +- src/modules/settings/DangerZoneTab.tsx | 13 +++-- src/modules/settings/GroupsTab.tsx | 6 +- src/modules/settings/GroupsTable.tsx | 2 +- src/modules/setup-keys/SetupKeyUsageCell.tsx | 8 +-- .../setup-netbird-modal/SetupModal.tsx | 2 +- .../users/table-cells/ServiceUserNameCell.tsx | 2 +- .../users/table-cells/UserNameCell.tsx | 6 +- 110 files changed, 486 insertions(+), 386 deletions(-) create mode 100644 src/assets/netbird-full-light.svg diff --git a/src/app/(dashboard)/dns/settings/page.tsx b/src/app/(dashboard)/dns/settings/page.tsx index 866f06dc..a940131c 100644 --- a/src/app/(dashboard)/dns/settings/page.tsx +++ b/src/app/(dashboard)/dns/settings/page.tsx @@ -128,7 +128,7 @@ const SettingDisabledManagementGroups = ({
@@ -359,10 +359,10 @@ export function PeerGroupSelector({
diff --git a/src/components/PeerSelector.tsx b/src/components/PeerSelector.tsx index caf362a9..067b4946 100644 --- a/src/components/PeerSelector.tsx +++ b/src/components/PeerSelector.tsx @@ -98,10 +98,10 @@ export function PeerSelector({ diff --git a/src/components/table/DataTableResetFilterButton.tsx b/src/components/table/DataTableResetFilterButton.tsx index 195299bb..e01e7172 100644 --- a/src/components/table/DataTableResetFilterButton.tsx +++ b/src/components/table/DataTableResetFilterButton.tsx @@ -1,6 +1,7 @@ import Button from "@components/Button"; import { Tooltip, TooltipContent, TooltipTrigger } from "@components/Tooltip"; import { Table } from "@tanstack/react-table"; +import { cn } from "@utils/helpers"; import { FilterX } from "lucide-react"; import * as React from "react"; import { useState } from "react"; @@ -30,12 +31,16 @@ export default function DataTableResetFilterButton({ }} > @@ -46,7 +51,7 @@ export default function DataTableResetFilterButton({ if (hovered) event.preventDefault(); }} > - + Reset Filters & Search diff --git a/src/components/table/DataTableRowsPerPage.tsx b/src/components/table/DataTableRowsPerPage.tsx index 43201d33..7a524852 100644 --- a/src/components/table/DataTableRowsPerPage.tsx +++ b/src/components/table/DataTableRowsPerPage.tsx @@ -31,12 +31,12 @@ export function DataTableRowsPerPage({ data-cy={"rows-per-page"} className="w-[200px] justify-between" > - +
- + {table.getState().pagination.pageSize} - rows per page + rows per page
@@ -57,16 +57,16 @@ export function DataTableRowsPerPage({
{ >
diff --git a/src/components/ui/AccessControlGroupCount.tsx b/src/components/ui/AccessControlGroupCount.tsx index 7d01c009..e7bd8ef9 100644 --- a/src/components/ui/AccessControlGroupCount.tsx +++ b/src/components/ui/AccessControlGroupCount.tsx @@ -35,10 +35,10 @@ export const AccessControlGroupCount = ({ group_id }: Props) => {
- + {route.network_id} {domains ? ( @@ -56,7 +56,7 @@ export const AccessControlGroupCount = ({ group_id }: Props) => { >
diff --git a/src/components/ui/AnnouncementBanner.tsx b/src/components/ui/AnnouncementBanner.tsx index 13a35e82..88917557 100644 --- a/src/components/ui/AnnouncementBanner.tsx +++ b/src/components/ui/AnnouncementBanner.tsx @@ -11,16 +11,16 @@ const variants = cva( variants: { variant: { default: - "bg-nb-gray-900/50 border-nb-gray-800/30 border-b text-nb-gray-200", + "bg-gray-100 dark:bg-nb-gray-900/50 border-gray-200/30 dark:border-nb-gray-800/30 border-b text-gray-700 dark:text-nb-gray-200", important: "from-netbird to-netbird-400 bg-gradient-to-b text-white", }, tagBadge: { - default: "bg-nb-gray-200/10 text-nb-gray-100 font-medium", + default: "bg-gray-300/50 dark:bg-nb-gray-200/10 text-gray-600 dark:text-nb-gray-100 font-medium", important: "bg-white text-netbird font-medium", }, closeButton: { default: - "bg-nb-gray-900 rounded-md p-1 text-nb-gray-300 hover:bg-nb-gray-800", + "bg-gray-200 dark:bg-nb-gray-900 rounded-md p-1 text-gray-500 dark:text-nb-gray-300 hover:bg-gray-300 dark:hover:bg-nb-gray-800", important: "bg-netbird-100 rounded-md p-1 text-netbird-600 hover:bg-white", }, @@ -50,7 +50,7 @@ export const AnnouncementBanner = () => { {announcement.tag && (
diff --git a/src/components/ui/DarkModeToggle.tsx b/src/components/ui/DarkModeToggle.tsx index 2643780a..8b2c6e96 100644 --- a/src/components/ui/DarkModeToggle.tsx +++ b/src/components/ui/DarkModeToggle.tsx @@ -39,7 +39,6 @@ export default function DarkModeToggle() { setTheme("light")} className={"flex gap-2"} - disabled={true} > Light @@ -52,7 +51,6 @@ export default function DarkModeToggle() { Dark setTheme("system")} className={"flex gap-2"} > diff --git a/src/components/ui/DescriptionWithTooltip.tsx b/src/components/ui/DescriptionWithTooltip.tsx index 58e17573..374fd6e9 100644 --- a/src/components/ui/DescriptionWithTooltip.tsx +++ b/src/components/ui/DescriptionWithTooltip.tsx @@ -17,7 +17,7 @@ export default function DescriptionWithTooltip({ ); } diff --git a/src/components/ui/GetStarted.tsx b/src/components/ui/GetStarted.tsx index 2569116b..ac5e2dc1 100644 --- a/src/components/ui/GetStarted.tsx +++ b/src/components/ui/GetStarted.tsx @@ -20,14 +20,14 @@ export default function GetStarted({ return (
diff --git a/src/components/ui/GetStartedTest.tsx b/src/components/ui/GetStartedTest.tsx index 048aa894..fe5f2f93 100644 --- a/src/components/ui/GetStartedTest.tsx +++ b/src/components/ui/GetStartedTest.tsx @@ -23,7 +23,7 @@ export default function GetStartedTest({
{ >
diff --git a/src/components/ui/GroupBadgeWithEditPeers.tsx b/src/components/ui/GroupBadgeWithEditPeers.tsx index 0c050f49..b4bb551d 100644 --- a/src/components/ui/GroupBadgeWithEditPeers.tsx +++ b/src/components/ui/GroupBadgeWithEditPeers.tsx @@ -76,7 +76,7 @@ export default function GroupBadgeWithEditPeers({ >
@@ -93,13 +93,13 @@ export default function GroupBadgeWithEditPeers({
{peerCount} diff --git a/src/components/ui/Lightbox.tsx b/src/components/ui/Lightbox.tsx index 7947baf7..287568a0 100644 --- a/src/components/ui/Lightbox.tsx +++ b/src/components/ui/Lightbox.tsx @@ -16,7 +16,7 @@ export const Lightbox = ({ image }: Props) => {
setOpen(true)} className={ - "bg-nb-gray-900 p-2 mt-2 select-none relative rounded-lg border border-nb-gray-800 cursor-pointer group/lightbox transition-all" + "bg-gray-100 dark:bg-nb-gray-900 p-2 mt-2 select-none relative rounded-lg border border-gray-200 dark:border-nb-gray-800 cursor-pointer group/lightbox transition-all" } >
{
setOpen(false)} className={ - "p-2 bg-nb-gray-900/80 backdrop-blur-2xl rounded-md border border-nb-gray-500 hover:bg-nb-gray-900/90 transition-all cursor-pointer" + "p-2 bg-gray-200/80 dark:bg-nb-gray-900/80 backdrop-blur-2xl rounded-md border border-gray-300 dark:border-nb-gray-500 hover:bg-gray-300/90 dark:hover:bg-nb-gray-900/90 transition-all cursor-pointer" } > diff --git a/src/components/ui/Mark.tsx b/src/components/ui/Mark.tsx index 8cc2dd0a..8e53246c 100644 --- a/src/components/ui/Mark.tsx +++ b/src/components/ui/Mark.tsx @@ -17,9 +17,9 @@ export const Mark = ({ children, copy = false }: Props) => { onClick={() => copy && copyToClipBoard()} ref={ref} className={cn( - "inline-flex not-italic gap-2 bg-nb-gray-900 py-[2px] px-2 rounded-md text-[12px] items-center mx-[1px] -top-[1px] relative my-[2.5px]", + "inline-flex not-italic gap-2 bg-gray-100 dark:bg-nb-gray-900 py-[2px] px-2 rounded-md text-[12px] items-center mx-[1px] -top-[1px] relative my-[2.5px]", copy && - "cursor-pointer hover:text-nb-gray-100 hover:bg-nb-gray-800 transition-all", + "cursor-pointer hover:text-gray-700 dark:hover:text-nb-gray-100 hover:bg-gray-200 dark:hover:bg-nb-gray-800 transition-all", )} > {children} diff --git a/src/components/ui/NoResults.tsx b/src/components/ui/NoResults.tsx index ab6d1349..d7cf5b48 100644 --- a/src/components/ui/NoResults.tsx +++ b/src/components/ui/NoResults.tsx @@ -22,7 +22,7 @@ export default function NoResults({
{icon ? icon : }

{title}

- + {description} {children} diff --git a/src/components/ui/NoResultsCard.tsx b/src/components/ui/NoResultsCard.tsx index 7abda926..794bb436 100644 --- a/src/components/ui/NoResultsCard.tsx +++ b/src/components/ui/NoResultsCard.tsx @@ -21,7 +21,7 @@ export default function NoResultsCard({
{icon || }

{title}

- + {description} {children} diff --git a/src/components/ui/RestrictedAccess.tsx b/src/components/ui/RestrictedAccess.tsx index bb785cbd..b181a426 100644 --- a/src/components/ui/RestrictedAccess.tsx +++ b/src/components/ui/RestrictedAccess.tsx @@ -35,7 +35,7 @@ export const RestrictedAccess = ({
{ ) : (
import("next-themes").then((mod) => mod.ThemeProvider), { ssr: false }, ); +function ThemedSkeletonProvider({ children }: { children: React.ReactNode }) { + const { resolvedTheme, theme } = useTheme(); + const isDark = resolvedTheme === "dark" || theme === "dark"; + + return ( + + {children} + + ); +} + export function GlobalThemeProvider({ children, ...props @@ -22,14 +37,14 @@ export function GlobalThemeProvider({ attribute="class" defaultTheme="dark" storageKey="netbird-theme" - enableSystem={false} + enableSystem={true} disableTransitionOnChange {...props} > - + {children} - + ); diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx index 0d94acec..46eb7462 100644 --- a/src/layouts/AppLayout.tsx +++ b/src/layouts/AppLayout.tsx @@ -17,7 +17,7 @@ import ErrorBoundaryProvider from "@/contexts/ErrorBoundary"; import { GlobalThemeProvider } from "@/contexts/GlobalThemeProvider"; import { NavigationEvents } from "@/contexts/NavigationEvents"; -const inter = localFont({ +const interFont = localFont({ src: "../assets/fonts/Inter.ttf", display: "swap", }); @@ -32,19 +32,19 @@ export const viewport: Viewport = { export default function AppLayout({ children }: { children: React.ReactNode }) { return ( - - + + - - - + + + {children} - - - + + + {mobileNavOpen && ( { return ( <> + {"NetBird {"NetBird {"NetBird ); diff --git a/src/layouts/PageContainer.tsx b/src/layouts/PageContainer.tsx index e033e50d..f7b2c18e 100644 --- a/src/layouts/PageContainer.tsx +++ b/src/layouts/PageContainer.tsx @@ -10,7 +10,7 @@ export default function PageContainer({ children, className }: Props) {
diff --git a/src/modules/access-control/AccessControlModal.tsx b/src/modules/access-control/AccessControlModal.tsx index b86efc59..36e477af 100644 --- a/src/modules/access-control/AccessControlModal.tsx +++ b/src/modules/access-control/AccessControlModal.tsx @@ -225,7 +225,7 @@ export function AccessControlModalContent({ Name & Description @@ -243,8 +243,8 @@ export function AccessControlModalContent({ Allow only specified network protocols. To change traffic direction and ports, select{" "} - TCP or{" "} - UDP protocol. + TCP or{" "} + UDP protocol.