feat: navbar account

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>
+  );
+}

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>

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,6 +33,7 @@ export function NavbarAccount() {
         </IconButton>
       </Popover.Trigger>
 
+      <BlitzKitTheme>
         <Popover.Content
           align="end"
           width="320px"
@@ -105,6 +107,7 @@ export function NavbarAccount() {
             </Flex>
           )}
         </Popover.Content>
+      </BlitzKitTheme>
     </Popover.Root>
   );
 }

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
+    <BlitzKitTheme>
-      appearance="dark"
-      panelBackground="solid"
-      radius="full"
-      accentColor="amber"
-      suppressHydrationWarning
-      suppressContentEditableWarning
-    >
       <Flex direction="column" minHeight="100vh">
         <Navbar />
 
@@ -56,6 +50,6 @@ const isRoot = pathname === '/';
 
         <Footer />
       </Flex>
-    </Theme>
+    </BlitzKitTheme>
   </body>
 </html>

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>
   );
 }

packages/website/src/pages/test.astro

@@ -1,11 +1,16 @@
 ---
-import { Theme } from '@radix-ui/themes';
+import { BlitzKitTheme } from '../components/BlitzKitTheme';
-import '@radix-ui/themes/styles.css';
 import { TestComponent } from './TestComponent';
 ---
 
-Minimal!
+<style is:global>
+  @import '@radix-ui/themes/styles.css';
+</style>
 
-<Theme>
+<html>
-  <TestComponent client:only="react" />
+  <body>
-</Theme>
+    <BlitzKitTheme>
+      <TestComponent client:idle />
+    </BlitzKitTheme>
+  </body>
+</html>