feat(ui): allow installer splash screens to change modal size

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>();
 

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");

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;