9 months ago · bd4b714ab8
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
 
				         "lucide-react": "0.447.0",
			
 
				         "moment": "2.30.1",
			
 
				         "next": "14.2.13",
			
 
				+        "next-themes": "0.3.0",
			
 
				         "node-fetch": "3.3.2",
			
 
				         "nodemailer": "6.9.15",
			
 
				         "oslo": "1.2.1",
			
--- a/src/app/[orgId]/components/TopbarNav.tsx
+++ b/src/app/[orgId]/components/TopbarNav.tsx
@@ -50,7 +50,11 @@ export function TopbarNav({
 
				                     aria-disabled={disabled}
			
 
				                 >
			
 
				                     <div className="flex items-center gap-2">
			
 
				-                        {item.icon}
			
 
				+                        {item.icon && (
			
 
				+                            <div className="hidden md:block">
			
 
				+                                {item.icon}
			
 
				+                            </div>
			
 
				+                        )}
			
 
				                         {item.title}
			
 
				                     </div>
			
 
				                 </Link>
			
--- a/src/app/[orgId]/layout.tsx
+++ b/src/app/[orgId]/layout.tsx
@@ -4,6 +4,7 @@ import { Cog, Combine, LayoutGrid, Tent, Users, Waypoints } from "lucide-react";
 
				 import Header from "./components/Header";
			
 
				 import { verifySession } from "@app/lib/auth/verifySession";
			
 
				 import { redirect } from "next/navigation";
			
 
				+import { cache } from "react";
			
 
				 
			
 
				 export const metadata: Metadata = {
			
 
				     title: "Configuration",
			
@@ -42,7 +43,9 @@ export default async function ConfigurationLaytout({
 
				     children,
			
 
				     params,
			
 
				 }: ConfigurationLaytoutProps) {
			
 
				-    const user = await verifySession();
			
 
				+    const loadUser = cache(async () => await verifySession());
			
 
				+
			
 
				+    const user = await loadUser();
			
 
				 
			
 
				     if (!user) {
			
 
				         redirect("/auth/login");
			
@@ -50,7 +53,7 @@ export default async function ConfigurationLaytout({
 
				 
			
 
				     return (
			
 
				         <>
			
 
				-            <div className="w-full bg-neutral-100 border-b border-neutral-200 mb-6 select-none sm:px-0 px-3 pt-3">
			
 
				+            <div className="w-full bg-neutral-100 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-900 mb-6 select-none sm:px-0 px-3 pt-3">
			
 
				                 <div className="container mx-auto flex flex-col content-between gap-4">
			
 
				                     <Header email={user.email} orgName={params.orgId} />
			
 
				                     <TopbarNav items={topNavItems} orgId={params.orgId} />
			
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,8 @@
 
				 import type { Metadata } from "next";
			
 
				 import "./globals.css";
			
 
				-import { Inter, Roboto } from "next/font/google";
			
 
				+import { Inter, Open_Sans, Roboto } from "next/font/google";
			
 
				 import { Toaster } from "@/components/ui/toaster";
			
 
				+import { ThemeProvider } from "@app/providers/ThemeProvider";
			
 
				 
			
 
				 export const metadata: Metadata = {
			
 
				     title: process.env.NEXT_PUBLIC_APP_NAME,
			
@@ -9,6 +10,7 @@ export const metadata: Metadata = {
 
				 };
			
 
				 
			
 
				 const font = Inter({ subsets: ["latin"] });
			
 
				+// const font = Open_Sans({ subsets: ["latin"] });
			
 
				 
			
 
				 export default async function RootLayout({
			
 
				     children,
			
@@ -16,10 +18,17 @@ export default async function RootLayout({
 
				     children: React.ReactNode;
			
 
				 }>) {
			
 
				     return (
			
 
				-        <html>
			
 
				+        <html suppressHydrationWarning>
			
 
				             <body className={`${font.className} pb-3`}>
			
 
				-                <main>{children}</main>
			
 
				-                <Toaster />
			
 
				+                <ThemeProvider
			
 
				+                    attribute="class"
			
 
				+                    defaultTheme="system"
			
 
				+                    enableSystem
			
 
				+                    disableTransitionOnChange
			
 
				+                >
			
 
				+                    {children}
			
 
				+                    <Toaster />
			
 
				+                </ThemeProvider>
			
 
				             </body>
			
 
				         </html>
			
 
				     );
			
--- a/src/providers/ThemeProvider.tsx
+++ b/src/providers/ThemeProvider.tsx
@@ -0,0 +1,9 @@
 
				+"use client";
			
 
				+
			
 
				+import * as React from "react";
			
 
				+import { ThemeProvider as NextThemesProvider } from "next-themes";
			
 
				+import { type ThemeProviderProps } from "next-themes/dist/types";
			
 
				+
			
 
				+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
			
 
				+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
			
 
				+}