using vanilla extract for main and app

ui/frontend/build_src/package.json

@@ -12,6 +12,8 @@
   "dependencies": {
     "@tanstack/react-query": "^4.2.3",
     "@tanstack/react-query-devtools": "^4.2.3",
+    "@vanilla-extract/css": "^1.9.0",
+    "@vanilla-extract/vite-plugin": "^3.5.0",
     "immer": "^9.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -26,5 +28,10 @@
     "prettier": "^2.7.1",
     "typescript": "^4.6.4",
     "vite": "^3.0.7"
+  },
+  "overrides": {
+    "@vanilla-extract/vite-plugin": {
+      "vite": "^3"
+    }
   }
 }

ui/frontend/build_src/src/App.css

@@ -1,18 +1,3 @@
-.App {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  pointer-events: auto;
-  display: grid;
-  background-color: rgb(32, 33, 36);
-  grid-template-columns: 360px 1fr;
-  grid-template-rows: 100px 1fr 300px;
-  grid-template-areas:
-    "header header header"
-    "create display display"
-    "footer footer footer";
-}
-
 /* Very basic mobile stacked UI*/
 @media screen and (max-width: 768px) {
   .App {

ui/frontend/build_src/src/App.tsx

@@ -1,5 +1,14 @@
 import React, { useEffect, useState } from "react";
-import "./App.css";
+
+
+import { 
+  AppLayout,
+  HeaderLayout,
+  CreateLayout,
+  DisplayLayout,
+  FooterLayout
+} 
+from './app.css.ts';
 
 import { useQuery } from "@tanstack/react-query";
 import { getSaveDirectory } from "./api";
@@ -22,17 +31,17 @@ function App() {
   }, [setRequestOption, status, data]);
 
   return (
-    <div className="App">
+    <div className={AppLayout}>
-      <header className="header-layout">
+      <header className={HeaderLayout}>
         <HeaderDisplay></HeaderDisplay>
       </header>
-      <nav className="create-layout">
+      <nav className={CreateLayout}>
         <CreationPanel></CreationPanel>
       </nav>
-      <main className="display-layout">
+      <main className={DisplayLayout}>
         <DisplayPanel></DisplayPanel>
       </main>
-      <footer className="footer-layout">
+      <footer className={FooterLayout}>
         <FooterDisplay></FooterDisplay>
       </footer>
     </div>

ui/frontend/build_src/src/app.css.ts

@@ -0,0 +1,33 @@
+import { style } from '@vanilla-extract/css';
+
+export const AppLayout = style({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  pointerEvents: 'auto',
+  display: 'grid',
+  backgroundColor: 'rgb(32, 33, 36)',
+  gridTemplateColumns: '360px 1fr',
+  gridTemplateRows: '100px 1fr 50px',
+  gridTemplateAreas: `
+    "header header header"
+    "create display display"
+    "footer footer footer"
+  `,
+});
+
+export const HeaderLayout = style({
+  gridArea: 'header',
+});
+
+export const CreateLayout = style({ 
+  gridArea: 'create',
+});
+
+export const DisplayLayout = style({
+  gridArea: 'display',
+});
+
+export const FooterLayout = style({
+  gridArea: 'footer',
+});

ui/frontend/build_src/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-#root {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}

ui/frontend/build_src/src/main.tsx

@@ -7,7 +7,9 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import { enableMapSet } from "immer";
 import App from "./App";
-import "./index.css";
+
+import './styles.css.ts';
+
 
 const queryClient = new QueryClient({
   defaultOptions: {

ui/frontend/build_src/src/styles.css.ts

@@ -0,0 +1,17 @@
+
+import { globalStyle } from '@vanilla-extract/css';
+
+globalStyle('body', {
+  margin: 0,
+  minWidth: '320px',
+  minHeight: '100vh',
+});
+
+globalStyle('#root', {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100vw',
+  height: '100vh',
+});
+

ui/frontend/build_src/vite.config.ts

@@ -1,12 +1,20 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    vanillaExtractPlugin({
+      // configuration
+    })
+  ],
   server: {
     port: 9001,
   },
+ 
   build: {
     // make sure everythign is in the same directory
     outDir: "../dist",
@@ -18,6 +26,7 @@ export default defineConfig({
         chunkFileNames: `[name].js`,
         assetFileNames: `[name].[ext]`,
       },
+      
     },
   },
 });