feat: move to css chunk 1

packages/website/src/components/BlitzKitTheme/index.css

@@ -0,0 +1,3 @@
+.blitzkit-theme {
+  min-height: unset !important;
+}

packages/website/src/components/BlitzKitTheme/index.tsx

@@ -1,5 +1,6 @@
 import { Theme, type ThemeProps } from '@radix-ui/themes';
 import type { ReactNode } from 'react';
+import './index.css';
 
 interface BlitzKitThemeProps extends ThemeProps {
   children: ReactNode;
@@ -12,8 +13,8 @@ export function BlitzKitTheme({
 }: BlitzKitThemeProps) {
   return (
     <Theme
+      className="blitzkit-theme"
       grayColor="mauve"
-      style={{ minHeight: 'unset', ...style }}
       appearance="dark"
       panelBackground="solid"
       radius="full"

packages/website/src/components/Checks/index.css

@@ -0,0 +1,18 @@
+.policies-agreement {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--color-overlay);
+  z-index: 2;
+}
+
+.policies-agreement .content-wrapper {
+  width: 100%;
+  background: var(--color-panel-solid);
+}
+
+.policies-agreement .content {
+  max-width: 80rem;
+}

packages/website/src/components/Checks/index.tsx

@@ -1,10 +1,9 @@
-'use client';
-
 import { assertSecret, idToRegion } from '@blitzkit/core';
 import { Button, Flex, Heading, Link, Text } from '@radix-ui/themes';
 import { useEffect, useState } from 'react';
-import { App } from '../stores/app';
+import { App } from '../../stores/app';
-import { CURRENT_POLICIES_AGREEMENT_INDEX } from '../stores/app/constants';
+import { CURRENT_POLICIES_AGREEMENT_INDEX } from '../../stores/app/constants';
+import './index.css';
 
 type Extension =
   | {
@@ -106,34 +105,9 @@ function Content() {
   if (!showPoliciesAgreement) return null;
 
   return (
-    <Flex
+    <Flex className="policies-agreement" align="end">
-      align="end"
+      <Flex p="8" className="content-wrapper" justify="center">
-      style={{
+        <Flex align="start" gap="4" className="content" direction="column">
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        background: 'var(--color-overlay)',
-        zIndex: 2,
-      }}
-    >
-      <Flex
-        p="8"
-        style={{
-          width: '100%',
-          background: 'var(--color-panel-solid)',
-        }}
-        justify="center"
-      >
-        <Flex
-          align="start"
-          gap="4"
-          style={{
-            maxWidth: 640 * 2,
-          }}
-          direction="column"
-        >
           <Flex direction="column" gap="2">
             <Heading>
               {policiesAgreementIndex === -1

packages/website/src/components/DatePicker/index.css

@@ -0,0 +1,3 @@
+.date-picker .day {
+  flex: 1;
+}

packages/website/src/components/DatePicker/index.tsx

@@ -16,6 +16,7 @@ import {
 } from '@radix-ui/themes';
 import { times } from 'lodash-es';
 import { useState } from 'react';
+import './index.css';
 
 const DAY_TITLES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const YEAR_OPTIONS = 7;
@@ -59,7 +60,7 @@ export function DatePicker({
   ).getDay();
 
   return (
-    <Flex direction="column" width="fit-content">
+    <Flex direction="column" width="fit-content" className="date-picker">
       <Flex justify="between" mb="2" align="center" py="2">
         <IconButton
           size="3"
@@ -173,9 +174,7 @@ export function DatePicker({
       <Flex mb="1">
         {times(7, (index) => (
           <Text
-            style={{
+            className="day"
-              flex: 1,
-            }}
             size="2"
             align="center"
             key={index}

packages/website/src/components/EquipmentManager/index.css

@@ -0,0 +1,9 @@
+.equipment-manager .left {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.equipment-manager .right {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

packages/website/src/components/EquipmentManager/index.tsx

@@ -1,8 +1,9 @@
 import type { EquipmentPreset } from '@blitzkit/core';
 import { Flex } from '@radix-ui/themes';
 import { chunk, cloneDeep } from 'lodash-es';
-import type { EquipmentMatrix } from '../stores/duel';
+import type { EquipmentMatrix } from '../../stores/duel';
-import { EquipmentButton } from './ModuleButtons/EquipmentButton';
+import { EquipmentButton } from '../ModuleButtons/EquipmentButton';
+import './index.css';
 
 interface EquipmentManagerProps {
   preset: EquipmentPreset;
@@ -16,17 +17,14 @@ export function EquipmentManager({
   onChange,
 }: EquipmentManagerProps) {
   return (
-    <Flex direction="column" gap="2">
+    <Flex direction="column" gap="2" className="equipment-manager">
       {chunk(preset.slots, 3).map((equipmentRow, rowIndex) => (
         <Flex gap="2" key={rowIndex}>
           {equipmentRow.map((equipment, columnIndex) => (
             <Flex key={columnIndex}>
               <EquipmentButton
+                className="left"
                 equipment={equipment.left}
-                style={{
-                  borderTopRightRadius: 0,
-                  borderBottomRightRadius: 0,
-                }}
                 selected={matrix[rowIndex][columnIndex] === -1}
                 onClick={() => {
                   const draft = cloneDeep(matrix);
@@ -41,11 +39,8 @@ export function EquipmentManager({
                 }}
               />
               <EquipmentButton
+                className="right"
                 equipment={equipment.right}
-                style={{
-                  borderTopLeftRadius: 0,
-                  borderBottomLeftRadius: 0,
-                }}
                 selected={matrix[rowIndex][columnIndex] === 1}
                 onClick={() => {
                   const draft = cloneDeep(matrix);

packages/website/src/components/Footer.astro

@@ -6,13 +6,13 @@ import packageJson from '../../../../package.json';
 const gameDefinitions = await fetchGameDefinitions();
 ---
 
-<Flex
+<style>
-  gap="6"
+  .footer {
-  p="6"
+    backgroundcolor: var(--color-panel);
-  direction="column"
+  }
-  align="center"
+</style>
-  style={{ backgroundColor: 'var(--color-panel)' }}
+
->
+<Flex className="footer" gap="6" p="6" direction="column" align="center">
   <Flex
     align="center"
     justify="between"