Merge pull request 'ui/cubes: use css modules for cube' (#5257) from hgl-ui-cube into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5257

pkgs/clan-app/ui/src/scene/cubes.css

@@ -1,27 +0,0 @@
-.cubes-scene-container {
-  width: 100%;
-  height: 100vh;
-}
-
-/* <div class="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col items-center">
-        <Show when={show()}> */
-.toolbar-container {
-  @apply absolute bottom-10 z-30 left-1/2;
-  @apply flex justify-center items-center;
-}
-
-.machine-label {
-  @apply text-white bg-inv-4 py-1 px-2 rounded-sm;
-  font-size: 0.75rem;
-}
-
-.machine-label::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: #203637 transparent transparent transparent;
-}

pkgs/clan-app/ui/src/scene/cubes.module.css

@@ -0,0 +1,9 @@
+.cubesSceneContainer {
+  width: 100%;
+  height: 100vh;
+}
+
+.toolbarContainer {
+  @apply absolute bottom-10 z-30 left-1/2;
+  @apply flex justify-center items-center;
+}

pkgs/clan-app/ui/src/scene/cubes.tsx

@@ -7,7 +7,7 @@ import {
   JSX,
   Show,
 } from "solid-js";
-import "./cubes.css";
+import styles from "./cubes.module.css";
 
 import * as THREE from "three";
 import { MapControls } from "three/examples/jsm/controls/MapControls.js";
@@ -779,7 +779,7 @@ export function CubeScene(props: {
       </Show>
       <div
         class={cx(
-          "cubes-scene-container",
+          styles.cubesSceneContainer,
           ctx.worldMode() === "default" && "cursor-no-drop",
           ctx.worldMode() === "select" && "cursor-pointer",
           ctx.worldMode() === "service" && "cursor-pointer",
@@ -788,7 +788,7 @@ export function CubeScene(props: {
         )}
         ref={(el) => (container = el)}
       />
-      <div class="toolbar-container">
+      <div class={styles.toolbarContainer}>
         <div class="absolute bottom-full left-1/2 mb-2 -translate-x-1/2">
           {props.toolbarPopup}
         </div>