From 829df50eca9985cf1e5abb7fb9ec689b9d01e998 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 17 Sep 2024 18:24:12 -0500
Subject: [PATCH] feat: navbar account

---
 packages/website/public/favicon.ico           | Bin 0 -> 692 bytes
 .../website/src/components/BlitzKitTheme.tsx  |  22 +++
 packages/website/src/components/Navbar.astro  |   5 +-
 .../website/src/components/NavbarAccount.tsx  | 137 +++++++++---------
 packages/website/src/layouts/RootLayout.astro |  14 +-
 packages/website/src/pages/TestComponent.tsx  |  12 +-
 packages/website/src/pages/test.astro         |  17 ++-
 7 files changed, 120 insertions(+), 87 deletions(-)
 create mode 100644 packages/website/public/favicon.ico
 create mode 100644 packages/website/src/components/BlitzKitTheme.tsx

diff --git a/packages/website/public/favicon.ico b/packages/website/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..7b326ae1e07a383eb837d1e3cc2679136727cc25
GIT binary patch
literal 692
zcmV;l0!#ggP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0!c|kK~#7FwNhV5
zQ(+YUecRmbBDXI@yXKUuWT=I^h1d$L=|jEvU{BUd(2Gb=_+SY|xW^)B1wycwJ&6*e
zgeC;lRFI@z41yx4F2f>;)pcsy?smV^H|xR3qCa%tz&YPJzweyiIS2ShasDdE!xwZ#
z>rk@BjQK|&@bDmaYi*YySe%jQQ>qWLY;taTvs|_bSSPaM5JD$m!vTWy0TKoyYB%Sv
z8yoW-8y#QU#Xhq03D^ali2@iE0Fg)0-rroSk!`)<ExnN+DDd!r=BYk3&dBbSsx;PZ
zM_r%{ey<DtJ)Ky5w}dl2-I$nqDEqO)UR4h(sy>r_zhE-ncD{><6<g*3)sHLZy0L7U
zXxvqUv8g#E-+n;*(IXIB%JJgmYkW$jFnMbP*|jx8(uz1ef!5~|tn8>L#YC(huZ%^U
zz7#`c`8EWDd$4ow0n9#rhV*9(5ANK?qx<(zuyT@`%^|EV#_KzXcs&?%p|Z?_;h_Pz
zy<0Idp1@FS6ub2xI**^k)q%5enDlk-B!EIjY8p<(r#@wwr4T{z)tn1scW05K5~xkB
zDDimFdbk6lH?LtOot9O_H}DF`GEFALiS;#dEu_gv6poTEl-5WS*cS?+wxJP|!*N)a
zC2<mH=RvuTGHy*XI8T|zyz$)~@S2uBI2=)UE98E>MV^wH%$HTkS_bl~CL=`5<dYje
zKO|Mx$juVWRjR@5TYsZmN`f;BxdM*K)fxC5;Q@WnU)4<hK#+V@dK7;nTy4;JRg;eY
aDPI6J+xM=aqOE5D0000<MNUMnLSTXr<Tx$>

literal 0
HcmV?d00001

diff --git a/packages/website/src/components/BlitzKitTheme.tsx b/packages/website/src/components/BlitzKitTheme.tsx
new file mode 100644
index 000000000..8587b7964
--- /dev/null
+++ b/packages/website/src/components/BlitzKitTheme.tsx
@@ -0,0 +1,22 @@
+import { Theme } from '@radix-ui/themes';
+import type { ReactNode } from 'react';
+
+interface BlitzKitThemeProps {
+  children: ReactNode;
+}
+
+export function BlitzKitTheme({ children }: BlitzKitThemeProps) {
+  return (
+    <Theme
+      style={{ minHeight: 'unset' }}
+      appearance="dark"
+      panelBackground="solid"
+      radius="full"
+      accentColor="amber"
+      suppressHydrationWarning
+      suppressContentEditableWarning
+    >
+      {children}
+    </Theme>
+  );
+}
diff --git a/packages/website/src/components/Navbar.astro b/packages/website/src/components/Navbar.astro
index ad7fe80a6..d14ccb2dc 100644
--- a/packages/website/src/components/Navbar.astro
+++ b/packages/website/src/components/Navbar.astro
@@ -22,6 +22,7 @@ import { NAVBAR_HEIGHT } from '../constants/navbar';
 import { homeTool, TOOLS } from '../constants/tools';
 import { PatreonIcon } from './PatreonIcon';
 import { NavbarAccount } from './NavbarAccount';
+import { TestComponent } from '../pages/TestComponent';
 
 const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
 const tools = [homeTool, ...toolsFiltered];
@@ -44,7 +45,7 @@ const isBranchNamed =
 
     transition-duration: 250ms;
     width: 100%;
-    overflow: hidden;
+    /* overflow: hidden; */
     backdrop-filter: blur(4rem) brightness(0.75);
     -webkit-backdrop-filter: blur(4rem) brightness(0.75);
 
@@ -198,7 +199,7 @@ const isBranchNamed =
             <GearIcon />
           </Link>
 
-          <NavbarAccount client:load />
+          <NavbarAccount client:idle />
         </Flex>
       </Flex>
     </Flex>
diff --git a/packages/website/src/components/NavbarAccount.tsx b/packages/website/src/components/NavbarAccount.tsx
index f8e67e57c..d2ed6e490 100644
--- a/packages/website/src/components/NavbarAccount.tsx
+++ b/packages/website/src/components/NavbarAccount.tsx
@@ -15,6 +15,7 @@ import {
 import { Suspense } from 'react';
 import { $patreonLogin } from '../stores/patreonLogin';
 import { $wargamingLogin } from '../stores/wargamingLogin';
+import { BlitzKitTheme } from './BlitzKitTheme';
 import { PatreonIcon } from './PatreonIcon';
 import { WargamingAccountName } from './WargamingAccountName';
 import { WargamingIcon } from './WargamingIcon';
@@ -32,79 +33,81 @@ export function NavbarAccount() {
         </IconButton>
       </Popover.Trigger>
 
-      <Popover.Content
-        align="end"
-        width="320px"
-        onOpenAutoFocus={(event) => event.preventDefault()}
-      >
-        {(patreonLogin.token || wargamingLogin.token) && (
-          <Flex direction="column" gap="2">
-            <Text align="center" color="gray">
-              Logged in accounts
-            </Text>
+      <BlitzKitTheme>
+        <Popover.Content
+          align="end"
+          width="320px"
+          onOpenAutoFocus={(event) => event.preventDefault()}
+        >
+          {(patreonLogin.token || wargamingLogin.token) && (
+            <Flex direction="column" gap="2">
+              <Text align="center" color="gray">
+                Logged in accounts
+              </Text>
 
-            {patreonLogin.token && (
-              <Flex align="center" gap="2" justify="center">
-                <PatreonIcon width={15} height={15} />
-                <Text>Patreon</Text>
-                <Button
-                  color="red"
-                  variant="ghost"
-                  onClick={() => {
-                    $patreonLogin.set({ token: undefined });
-                  }}
-                >
-                  Logout
-                </Button>
-              </Flex>
-            )}
+              {patreonLogin.token && (
+                <Flex align="center" gap="2" justify="center">
+                  <PatreonIcon width={15} height={15} />
+                  <Text>Patreon</Text>
+                  <Button
+                    color="red"
+                    variant="ghost"
+                    onClick={() => {
+                      $patreonLogin.set({ token: undefined });
+                    }}
+                  >
+                    Logout
+                  </Button>
+                </Flex>
+              )}
 
-            {wargamingLogin.token && (
-              <Flex align="center" gap="2" justify="center">
-                <WargamingIcon width={15} height={15} />
-                <Text>
-                  <Suspense fallback={<Skeleton height="1em" width="5rem" />}>
-                    <WargamingAccountName />
-                  </Suspense>
-                </Text>
-                <Button
-                  color="red"
-                  variant="ghost"
-                  onClick={() => {
-                    $wargamingLogin.set({ token: undefined });
-                  }}
-                >
-                  Logout
-                </Button>
-              </Flex>
-            )}
-          </Flex>
-        )}
+              {wargamingLogin.token && (
+                <Flex align="center" gap="2" justify="center">
+                  <WargamingIcon width={15} height={15} />
+                  <Text>
+                    <Suspense fallback={<Skeleton height="1em" width="5rem" />}>
+                      <WargamingAccountName />
+                    </Suspense>
+                  </Text>
+                  <Button
+                    color="red"
+                    variant="ghost"
+                    onClick={() => {
+                      $wargamingLogin.set({ token: undefined });
+                    }}
+                  >
+                    Logout
+                  </Button>
+                </Flex>
+              )}
+            </Flex>
+          )}
 
-        {!patreonLogin.token !== !wargamingLogin.token && (
-          <Inset side="x">
-            <Separator my="4" size="4" />
-          </Inset>
-        )}
+          {!patreonLogin.token !== !wargamingLogin.token && (
+            <Inset side="x">
+              <Separator my="4" size="4" />
+            </Inset>
+          )}
 
-        {(!patreonLogin.token || !wargamingLogin.token) && (
-          <Flex direction="column" gap="2">
-            <Text align="center" color="gray">
-              Log in with...
-            </Text>
+          {(!patreonLogin.token || !wargamingLogin.token) && (
+            <Flex direction="column" gap="2">
+              <Text align="center" color="gray">
+                Log in with...
+              </Text>
 
-            {!patreonLogin.token && (
-              <Link style={{ width: '100%' }} href={patreonLoginUrl()}>
-                <Button style={{ width: '100%' }} color="tomato">
-                  <PatreonIcon width={15} height={15} /> Patreon
-                </Button>
-              </Link>
-            )}
+              {!patreonLogin.token && (
+                <Link style={{ width: '100%' }} href={patreonLoginUrl()}>
+                  <Button style={{ width: '100%' }} color="tomato">
+                    <PatreonIcon width={15} height={15} /> Patreon
+                  </Button>
+                </Link>
+              )}
 
-            {!wargamingLogin.token && <WargamingLoginButton />}
-          </Flex>
-        )}
-      </Popover.Content>
+              {!wargamingLogin.token && <WargamingLoginButton />}
+            </Flex>
+          )}
+        </Popover.Content>
+      </BlitzKitTheme>
     </Popover.Root>
   );
 }
diff --git a/packages/website/src/layouts/RootLayout.astro b/packages/website/src/layouts/RootLayout.astro
index 413d33778..ab0679ec8 100644
--- a/packages/website/src/layouts/RootLayout.astro
+++ b/packages/website/src/layouts/RootLayout.astro
@@ -1,5 +1,6 @@
 ---
-import { Flex, Theme } from '@radix-ui/themes';
+import { Flex } from '@radix-ui/themes';
+import { BlitzKitTheme } from '../components/BlitzKitTheme';
 import Footer from '../components/Footer.astro';
 import Navbar from '../components/Navbar.astro';
 import Party3 from '../components/Party3.astro';
@@ -37,14 +38,7 @@ const isRoot = pathname === '/';
   </head>
 
   <body>
-    <Theme
-      appearance="dark"
-      panelBackground="solid"
-      radius="full"
-      accentColor="amber"
-      suppressHydrationWarning
-      suppressContentEditableWarning
-    >
+    <BlitzKitTheme>
       <Flex direction="column" minHeight="100vh">
         <Navbar />
 
@@ -56,6 +50,6 @@ const isRoot = pathname === '/';
 
         <Footer />
       </Flex>
-    </Theme>
+    </BlitzKitTheme>
   </body>
 </html>
diff --git a/packages/website/src/pages/TestComponent.tsx b/packages/website/src/pages/TestComponent.tsx
index 028e69a36..234f7ab73 100644
--- a/packages/website/src/pages/TestComponent.tsx
+++ b/packages/website/src/pages/TestComponent.tsx
@@ -1,4 +1,5 @@
-import { Button, Popover } from '@radix-ui/themes';
+import { Button, Flex, Popover, Text } from '@radix-ui/themes';
+import { BlitzKitTheme } from '../components/BlitzKitTheme';
 
 export function TestComponent() {
   return (
@@ -7,7 +8,14 @@ export function TestComponent() {
         <Button>Radix UI</Button>
       </Popover.Trigger>
 
-      <Popover.Content>Content</Popover.Content>
+      <BlitzKitTheme>
+        <Popover.Content>
+          <Flex direction="column">
+            <Text>I should be in a dark mode popover</Text>
+            <Button>And I should be yellow and have full border radius!</Button>
+          </Flex>
+        </Popover.Content>
+      </BlitzKitTheme>
     </Popover.Root>
   );
 }
diff --git a/packages/website/src/pages/test.astro b/packages/website/src/pages/test.astro
index 4c1dd641e..a8ef8d709 100644
--- a/packages/website/src/pages/test.astro
+++ b/packages/website/src/pages/test.astro
@@ -1,11 +1,16 @@
 ---
-import { Theme } from '@radix-ui/themes';
-import '@radix-ui/themes/styles.css';
+import { BlitzKitTheme } from '../components/BlitzKitTheme';
 import { TestComponent } from './TestComponent';
 ---
 
-Minimal!
+<style is:global>
+  @import '@radix-ui/themes/styles.css';
+</style>
 
-<Theme>
-  <TestComponent client:only="react" />
-</Theme>
+<html>
+  <body>
+    <BlitzKitTheme>
+      <TestComponent client:idle />
+    </BlitzKitTheme>
+  </body>
+</html>