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.