works I guess?

packages/client/package.json

@@ -9,10 +9,14 @@
 	"dependencies": {
 		"@elysiajs/eden": "^1.3.2",
 		"@solidjs/router": "^0.15.3",
-		"solid-js": "^1.9.5",
-		"object-hash": "^3.0.0"
+		"object-hash": "^3.0.0",
+		"solid-js": "^1.9.5"
 	},
 	"devDependencies": {
+		"@iconify-json/solar": "^1.2.4",
+		"@unocss/preset-icons": "^66.4.2",
+		"@unocss/preset-wind4": "^66.4.2",
+		"unocss": "^66.4.2",
 		"vite": "^4.4.9",
 		"vite-plugin-solid": "^2.11.8"
 	}

packages/client/src/app.tsx

@@ -4,21 +4,13 @@ import { lazy, Suspense } from "solid-js";
 import pkg from "../package.json";
 import { render } from "solid-js/web";
 import Root from "./routes/index";
+import "virtual:uno.css";
 
 const Version = () => (
-	<div class="full free clear">
-		<span
-			style={{
-				margin: "5px",
-				"font-size": "0.8rem",
-				"font-family": "monospace",
-				"pointer-events": "all",
-			}}
-			class="fixed-br"
-		>
-			v{pkg.version}
-		</span>
-	</div>
+	<>
+		<span class="fixed br m-2 font-mono text-xs">v{pkg.version}</span>
+		<div class="i-solar-user-circle-bold fixed s-10 top-0 right-0 m-2 cursor-pointer" />
+	</>
 );
 
 const App = () => (

packages/client/src/routes/[game]/[instance].tsx

@@ -10,16 +10,17 @@ export default () => {
 			<Game instanceId={params.instance} />
 			<A
 				href={`/${params.game}`}
-				style={{
-					position: "absolute",
-					padding: "10px",
-					top: "0",
-					left: "0",
-					margin: "20px",
-					"background-color": "white",
-					"border-radius": "8px",
-					border: "2px solid black",
-				}}
+				// style={{
+				// 	position: "absolute",
+				// 	padding: "10px",
+				// 	top: "0",
+				// 	left: "0",
+				// 	margin: "20px",
+				// 	"background-color": "white",
+				// 	"border-radius": "8px",
+				// 	border: "2px solid black",
+				// }}
+				class="fixed tl m-4 px-2 py-1.5 button"
 			>
 				Back
 			</A>

packages/client/src/routes/[game]/index.tsx

@@ -14,8 +14,9 @@ export default () => {
 	return (
 		<Suspense>
 			<div style={{ padding: "20px" }}>
-				<h1 style={{ margin: 0 }}>{param.game}</h1>
+				<p class="text-[40px]">{param.game}</p>
 				<button
+					class="px-2 py-1.5 m-4 button rounded"
 					onClick={() =>
 						api.simple.newGame
 							.post({

packages/client/src/style.css

@@ -12,17 +12,30 @@ body {
 body::before {
 	z-index: -1;
 	content: "";
-	font-size: 28px;
 	position: absolute;
 	width: 100%;
 	height: 100%;
 }
 
-a {
+/* a {
 	color: rgb(18, 229, 113);
 }
 a:visited {
 	color: rgb(23, 138, 125);
+} */
+
+.button {
+	cursor: pointer;
+	background-color: white;
+	color: black;
+	box-shadow: 0px 5px 10px black;
+	border-radius: 10%;
+	transition: background-color 0.15s, color 0.15s, transform 0.15s;
+}
+.button:hover {
+	background-color: rgb(23, 138, 125);
+	color: white;
+	transform: scale(1.1);
 }
 
 #app {

packages/client/uno.config.ts

@@ -0,0 +1,25 @@
+import presetWind4 from "@unocss/preset-wind4";
+import { defineConfig } from "unocss";
+import { presetIcons } from "unocss";
+import {} from "@iconify-json/solar";
+
+export default defineConfig({
+	presets: [
+		presetWind4(),
+		presetIcons({
+			collections: {
+				solar: () =>
+					import("@iconify-json/solar/icons.json").then(
+						(i) => i.default as any
+					),
+			},
+		}),
+	],
+	shortcuts: [[/^s-(\d+)$/, ([, d]) => `w-${d} h-${d}`]],
+	rules: [
+		["tl", { top: 0, left: 0 }],
+		["tr", { top: 0, right: 0 }],
+		["bl", { bottom: 0, left: 0 }],
+		["br", { bottom: 0, right: 0 }],
+	],
+});

packages/client/vite.config.ts

@@ -1,8 +1,9 @@
 import { defineConfig } from "vite";
 import solidPlugin from "vite-plugin-solid";
+import UnoCSS from "unocss/vite";
 
 export default defineConfig({
-	plugins: [solidPlugin()],
+	plugins: [solidPlugin(), UnoCSS()],
 	build: {
 		outDir: "../server/public",
 		emptyOutDir: true,