ui/alert: migrate to css modules

pkgs/clan-app/ui/src/components/Alert/Alert.module.css

@@ -0,0 +1,46 @@
+.alert {
+  @apply flex flex-row gap-2.5 p-4 rounded-md items-start;
+
+  &.hasIcon {
+    @apply pl-3;
+  }
+
+  &.hasIcon svg.icon {
+    @apply relative top-0.5;
+  }
+
+  &.hasDismiss {
+    @apply pr-3;
+  }
+
+  &.info {
+    @apply bg-semantic-info-1 border border-semantic-info-3 fg-semantic-info-3;
+  }
+  &.error {
+    @apply bg-semantic-error-2 border border-semantic-error-3 fg-semantic-error-3;
+  }
+
+  &.warning {
+    @apply bg-semantic-warning-2 border border-semantic-warning-3 fg-semantic-warning-3;
+  }
+
+  &.success {
+    @apply bg-semantic-success-1 border border-semantic-success-3 fg-semantic-success-3;
+  }
+
+  &.transparent {
+    @apply bg-transparent border-none;
+  }
+
+  &.noPadding {
+    @apply p-0;
+  }
+}
+
+.alertContent {
+  @apply flex flex-col size-full gap-1;
+}
+
+.dismissTrigger {
+  @apply relative top-0.5;
+}

pkgs/clan-app/ui/src/components/Alert/Alert.tsx

@@ -1,10 +1,10 @@
-import "./Alert.css";
 import cx from "classnames";
 import Icon, { IconVariant } from "@/src/components/Icon/Icon";
 import { Typography } from "@/src/components/Typography/Typography";
 import { Button } from "@kobalte/core/button";
 import { Alert as KAlert } from "@kobalte/core/alert";
 import { Show } from "solid-js";
+import styles from "./Alert.module.css";
 
 export interface AlertProps {
   icon?: IconVariant;
@@ -13,6 +13,7 @@ export interface AlertProps {
   title: string;
   onDismiss?: () => void;
   transparent?: boolean;
+  dense?: boolean;
   description?: string;
 }
 
@@ -24,16 +25,17 @@ export const Alert = (props: AlertProps) => {
 
   return (
     <KAlert
-      class={cx("alert", props.type, {
-        "has-icon": props.icon,
-        "has-dismiss": props.onDismiss,
-        transparent: props.transparent,
+      class={cx(styles.alert, styles[props.type], {
+        [styles.hasIcon]: props.icon,
+        [styles.hasDismiss]: props.onDismiss,
+        [styles.transparent]: props.transparent,
+        [styles.noPadding]: props.dense,
       })}
     >
       {props.icon && (
         <Icon icon={props.icon} color="inherit" size={iconSize()} />
       )}
-      <div class="content">
+      <div class={styles.alertContent}>
         <Typography
           hierarchy="body"
           family="condensed"
@@ -57,7 +59,7 @@ export const Alert = (props: AlertProps) => {
       {props.onDismiss && (
         <Button
           name="dismiss-alert"
-          class="dismiss-trigger"
+          class={styles.dismissTrigger}
           onClick={props.onDismiss}
           aria-label={`Dismiss ${props.type} alert`}
         >

pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx

@@ -274,6 +274,8 @@ const ChooseDisk = () => {
               </Field>
               <Alert
                 transparent
+                dense
+                size="s"
                 type="error"
                 icon="Info"
                 title="You're about to format this drive"

pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx

@@ -212,6 +212,7 @@ const CheckHardware = () => {
             <Show when={hardwareQuery.data}>
               {(d) => (
                 <Alert
+                  size="s"
                   icon={reportExists() ? "Checkmark" : "Close"}
                   type={reportExists() ? "info" : "warning"}
                   title={