From cae63cc45d95145c07f81fc36483201e6772c3f2 Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Tue, 19 Aug 2025 19:54:52 +0100
Subject: [PATCH 1/3] fix(ui): spelling mistake

---
 pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 41d0511fe..66241a0da 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx
@@ -671,7 +671,7 @@ const InstallProgress = () => {
           weight="bold"
           color="inherit"
         >
-          Machine is beeing installed
+          Machine is being installed
         </Typography>
         <LoadingBar />
         <Typography

From 547ba4276e672943a943deaaebc60301b32ce675 Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Tue, 19 Aug 2025 20:01:23 +0100
Subject: [PATCH 2/3] feat(ui): improve copy in create installer intro

---
 .../src/workflows/Install/steps/createInstaller.tsx   | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

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 9f0e829df..253582b67 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
@@ -56,11 +56,12 @@ const Prose = () => (
               Let's walk through it.
             </Typography>
             <Typography hierarchy="body" size="xs" weight="normal">
-              In the following we will help you to write the clan installer
-              software to a USB-stick. This USB-stick will then be used to set
-              up the new machine. Get a USB-stick with at least 8GB of capacity,
-              and plug it into the machine on which you read this text. Note,
-              all data on the USB-Stick will be lost.
+              We will help you write the Clan Installer to a USB-stick or SD
+              card, which will then be used to set up the new machine.
+            </Typography>
+            <Typography hierarchy="body" size="xs" weight="normal">
+              Get a USB-stick or an SD card with at least 8GB of capacity, and
+              plug it into this machine.
             </Typography>
           </div>
           <div class="flex flex-col gap-1">

From f339ca0d85d4a602e124227a62ad439067e3dfaa Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Tue, 19 Aug 2025 20:52:20 +0100
Subject: [PATCH 3/3] feat(ui): allow installer splash screens to change modal
 size

---
 .../ui/src/components/Modal/Modal.tsx         |  4 ++--
 .../ui/src/workflows/Install/install.tsx      | 23 ++++++++++++++++++-
 .../Install/steps/createInstaller.tsx         | 20 ++++++++--------
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Modal/Modal.tsx b/pkgs/clan-app/ui/src/components/Modal/Modal.tsx
index 86b0af901..cdca5d8c7 100644
--- a/pkgs/clan-app/ui/src/components/Modal/Modal.tsx
+++ b/pkgs/clan-app/ui/src/components/Modal/Modal.tsx
@@ -13,9 +13,9 @@ import Icon from "../Icon/Icon";
 import cx from "classnames";
 import { Dynamic } from "solid-js/web";
 
-export type ModalContextType = {
+export interface ModalContextType {
   portalRef: HTMLDivElement;
-};
+}
 
 const ModalContext = createContext<unknown>();
 
diff --git a/pkgs/clan-app/ui/src/workflows/Install/install.tsx b/pkgs/clan-app/ui/src/workflows/Install/install.tsx
index fccc98c97..3d38096cd 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/install.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/install.tsx
@@ -12,6 +12,8 @@ import { createInstallerSteps } from "./steps/createInstaller";
 import { installSteps } from "./steps/installSteps";
 import { ApiCall } from "@/src/hooks/api";
 
+import cx from "classnames";
+
 interface InstallStepperProps {
   onDone: () => void;
 }
@@ -82,10 +84,29 @@ export const InstallModal = (props: InstallModalProps) => {
 
   set("install", { machineName: props.machineName });
 
+  // allows each step to adjust the size of the modal
+  const sizeClasses = () => {
+    const defaultClass = "max-w-3xl h-[30rem]";
+
+    const currentStep = stepper.currentStep();
+    if (!currentStep) {
+      return defaultClass;
+    }
+
+    switch (currentStep.id) {
+      case "create:progress":
+      case "create:done":
+        return currentStep.class;
+
+      default:
+        return defaultClass;
+    }
+  };
+
   return (
     <StepperProvider stepper={stepper}>
       <Modal
-        class="h-[30rem] w-screen max-w-3xl"
+        class={cx("w-screen", sizeClasses())}
         title="Install machine"
         onClose={() => {
           console.log("Install modal closed");
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 253582b67..512ca5e3d 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
@@ -332,27 +332,27 @@ const FlashProgress = () => {
   return (
     <div
       class={cx(
-        "relative flex size-full flex-col items-center justify-center bg-inv-4",
+        "relative flex size-full flex-col items-center justify-end bg-inv-4",
       )}
     >
       <img
         src="/logos/usb-stick-min.png"
         alt="usb logo"
-        class="absolute top-2 z-0"
+        class="absolute top-4 z-0"
       />
-      <div class="z-10 mb-6 flex w-full max-w-md flex-col items-center gap-3 fg-inv-1">
+      <div class="z-10 mb-6 flex w-full max-w-md flex-col items-center gap-2 fg-inv-1">
         <Typography
           hierarchy="title"
           size="default"
           weight="bold"
           color="inherit"
         >
-          USB stick is being flashed
+          Removable media is being flashed
         </Typography>
         <LoadingBar />
         <Button
           hierarchy="primary"
-          class="mt-3 w-fit"
+          class="mt-2 w-fit"
           size="s"
           onClick={handleCancel}
         >
@@ -365,8 +365,8 @@ const FlashProgress = () => {
 const FlashDone = () => {
   const stepSignal = useStepper<InstallSteps>();
   return (
-    <div class="flex size-full flex-col items-center justify-between bg-inv-4">
-      <div class="flex size-full max-w-md flex-col items-center justify-center gap-3 py-6 fg-inv-1">
+    <div class="flex size-full flex-col items-center justify-end bg-inv-4">
+      <div class="flex size-full max-w-md flex-col items-center justify-center gap-3 pt-6 fg-inv-1">
         <div class="rounded-full bg-semantic-success-4">
           <Icon icon="Checkmark" class="size-9" />
         </div>
@@ -376,7 +376,7 @@ const FlashDone = () => {
           weight="bold"
           color="inherit"
         >
-          USB Stick is ready!
+          Your device has been flashed!
         </Typography>
         <Alert
           type="warning"
@@ -384,7 +384,7 @@ const FlashDone = () => {
           description=""
         />
       </div>
-      <div class="flex w-full justify-end p-6">
+      <div class="flex w-full justify-end px-5 py-4">
         <Button
           hierarchy="primary"
           endIcon="ArrowRight"
@@ -416,10 +416,12 @@ export const createInstallerSteps = [
     id: "create:progress",
     content: FlashProgress,
     isSplash: true,
+    class: "max-w-[30rem] h-[18rem]",
   },
   {
     id: "create:done",
     content: FlashDone,
     isSplash: true,
+    class: "max-w-[30rem] h-[18rem]",
   },
 ] as const;