install/progress: display usb-stick

pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx

@@ -127,7 +127,7 @@ const mockFetcher: Fetcher = <K extends OperationNames>(
         ],
       },
     ],
-    run_generators: true,
+    run_generators: null,
     get_machine_hardware_summary: {
       hardware_config: "nixos-facter",
     },

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

@@ -19,6 +19,7 @@ import Icon from "@/src/components/Icon/Icon";
 import { useSystemStorageOptions } from "@/src/hooks/queries";
 import { useApiClient } from "@/src/hooks/ApiClient";
 import { onMount } from "solid-js";
+import cx from "classnames";
 
 const Prose = () => (
   <StepLayout
@@ -272,6 +273,7 @@ const ChooseDisk = () => {
                 )}
               </Field>
               <Alert
+                transparent
                 type="error"
                 icon="Info"
                 title="You're about to format this drive"
@@ -314,8 +316,17 @@ const FlashProgress = () => {
   };
 
   return (
-    <div class="flex size-full flex-col items-center justify-center bg-inv-4">
+    <div
-      <div class="mb-6 flex w-full max-w-md flex-col items-center gap-3 fg-inv-1">
+      class={cx(
+        "relative flex size-full flex-col items-center justify-center bg-inv-4",
+      )}
+    >
+      <img
+        src="/logos/usb-stick-min.png"
+        alt="usb logo"
+        class="absolute z-0 top-2"
+      />
+      <div class="mb-6 flex w-full max-w-md flex-col items-center gap-3 fg-inv-1 z-10">
         <Typography
           hierarchy="title"
           size="default"
@@ -327,7 +338,7 @@ const FlashProgress = () => {
         <LoadingBar />
         <Button
           hierarchy="primary"
-          class="w-fit"
+          class="w-fit mt-3"
           size="s"
           onClick={handleCancel}
         >

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

@@ -439,7 +439,7 @@ const PromptsFields = (props: PromptsFieldsProps) => {
   };
 
   return (
-    <Form onSubmit={handleSubmit} class="h-full">
+    <Form onSubmit={handleSubmit}>
       <StepLayout
         body={
           <div class="flex flex-col gap-2">
@@ -584,7 +584,7 @@ const InstallSummary = () => {
       progress: runInstall,
     }));
 
-    await runInstall.result; // Wait for the installation to finish
+    await runInstall.result;
 
     stepSignal.setActiveStep("install:done");
   };
@@ -649,8 +649,13 @@ const InstallProgress = () => {
   );
 
   return (
-    <div class="flex size-full flex-col items-center justify-center bg-inv-4">
+    <div class="relative flex size-full flex-col items-center justify-center bg-inv-4">
-      <div class="mb-6 flex w-full max-w-md flex-col items-center gap-3 fg-inv-1">
+      <img
+        src="/logos/usb-stick-min.png"
+        alt="usb logo"
+        class="absolute z-0 top-2"
+      />
+      <div class="mb-6 flex w-full max-w-md flex-col items-center gap-3 fg-inv-1 z-10">
         <Typography
           hierarchy="title"
           size="default"