From c0281e8b4c2359c34bc329456a3c98c1b8616167 Mon Sep 17 00:00:00 2001
From: Glen Huang <me@glenhuang.com>
Date: Wed, 24 Sep 2025 15:47:38 +0800
Subject: [PATCH] ui/MachineStatus: use css modules

---
 ...ineStatus.css => MachineStatus.module.css} |  4 ++--
 .../MachineStatus/MachineStatus.tsx           | 22 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)
 rename pkgs/clan-app/ui/src/components/MachineStatus/{MachineStatus.css => MachineStatus.module.css} (86%)

diff --git a/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.css b/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.module.css
similarity index 86%
rename from pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.css
rename to pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.module.css
index 6024be9bd..0c7235d89 100644
--- a/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.css
+++ b/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.module.css
@@ -1,4 +1,4 @@
-span.machine-status {
+.machineStatus {
   @apply flex items-center gap-1.5;
 
   .indicator {
@@ -13,7 +13,7 @@ span.machine-status {
     background-color: theme(colors.fg.semantic.error.1);
   }
 
-  &.out-of-sync > .indicator {
+  &.outOfSync > .indicator {
     background-color: theme(colors.fg.inv.3);
   }
 }
diff --git a/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.tsx b/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.tsx
index 1ce76b4c0..dd06e05ad 100644
--- a/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.tsx
+++ b/pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.tsx
@@ -1,5 +1,4 @@
-import "./MachineStatus.css";
-
+import styles from "./MachineStatus.module.css";
 import { Badge } from "@kobalte/core/badge";
 import cx from "classnames";
 import { Match, Show, Switch } from "solid-js";
@@ -14,8 +13,7 @@ export interface MachineStatusProps {
 }
 
 export const MachineStatus = (props: MachineStatusProps) => {
-  const status = () => props.status;
-
+  // FIXME: this will break i18n in the future
   // remove the '_' from the enum
   // we will use css transform in the typography component to capitalize
   const statusText = () => props.status?.replaceAll("_", " ");
@@ -25,15 +23,17 @@ export const MachineStatus = (props: MachineStatusProps) => {
 
   return (
     <Switch>
-      <Match when={!status()}>
+      <Match when={!props.status}>
         <Loader />
       </Match>
-      <Match when={status()}>
+      <Match when={props.status}>
         <Badge
-          class={cx("machine-status", {
-            "not-installed": status() == "not_installed",
+          class={cx(styles.machineStatus, {
+            [styles.online]: props.status == "online",
+            [styles.offline]: props.status == "offline",
+            [styles.outOfSync]: props.status == "out_of_sync",
           })}
-          textValue={status()}
+          textValue={props.status}
         >
           {props.label && (
             <Typography
@@ -47,10 +47,10 @@ export const MachineStatus = (props: MachineStatusProps) => {
             </Typography>
           )}
           <Show
-            when={status() != "not_installed"}
+            when={props.status != "not_installed"}
             fallback={<Icon icon="Offline" inverted={true} />}
           >
-            <div class="indicator" />
+            <div class={styles.indicator} />
           </Show>
         </Badge>
       </Match>