From 08cb6993a8ce7795121711100aa039015309e731 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Thu, 14 Aug 2025 16:04:40 +0200
Subject: [PATCH] install/progress: display usb-stick

---
 .../src/workflows/Install/Install.stories.tsx   |  2 +-
 .../workflows/Install/steps/createInstaller.tsx | 17 ++++++++++++++---
 .../workflows/Install/steps/installSteps.tsx    | 13 +++++++++----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx b/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx
index 70e5b45ea..c7f739909 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/Install.stories.tsx
+++ b/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",
     },
diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
index c8fd3ac4d..50bea450d 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
+++ b/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 class="mb-6 flex w-full max-w-md flex-col items-center gap-3 fg-inv-1">
+    <div
+      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}
         >
diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx
index 40d150a96..92fb9e033 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx
+++ b/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="mb-6 flex w-full max-w-md flex-col items-center gap-3 fg-inv-1">
+    <div class="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"