From f2be1b80f4e9ac0bde97566865f1e4c226ee8f2a Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 16 Apr 2024 17:15:22 +0800
Subject: [PATCH] Update user data fallback and theme handling

This commit adds a fallback mechanism to handle `null` user values in the site header account section. Previously, if `user.data` was `null`, the code could fail. Now, it checks for valid `user.data` before proceeding. For the layout section, it now includes a separate condition for 'light' theme, providing a clear distinction between 'dark'
---
 .../_components/site-header-account-section.tsx           | 5 +++--
 apps/web/app/layout.tsx                                   | 8 +++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
index 2d7d793ed..e986cb47a 100644
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -39,13 +39,14 @@ export function SiteHeaderAccountSection({
 function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
   const signOut = useSignOut();
   const user = useUser(props.user);
+  const userData = user.data ?? props.user ?? null;
 
-  if (user.data) {
+  if (userData) {
     return (
       <PersonalAccountDropdown
         paths={paths}
         features={features}
-        user={user.data}
+        user={userData}
         signOutRequested={() => signOut.mutateAsync()}
       />
     );
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index a8030a0a8..a967963bd 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -51,14 +51,16 @@ export default async function RootLayout({
 
 function getClassName(theme?: string) {
   const dark = theme === 'dark';
+  const light = theme === 'light';
 
   return cn(
     'min-h-screen bg-background antialiased',
-    {
-      dark,
-    },
     sans.variable,
     heading.variable,
+    {
+      dark,
+      light,
+    },
   );
 }