UI: flash installer layout consistent

pkgs/webview-ui/app/src/routes/flash/view.tsx

@@ -4,6 +4,8 @@ import { FileInput } from "@/src/components/FileInput";
 import Icon from "@/src/components/icon";
 import { SelectInput } from "@/src/components/SelectInput";
 import { TextInput } from "@/src/components/TextInput";
+import { Typography } from "@/src/components/Typography";
+import { Header } from "@/src/layout/header";
 import {
   createForm,
   required,
@@ -169,7 +171,16 @@ export const Flash = () => {
   };
 
   return (
-    <div class="m-4 rounded-lg bg-slate-50 p-4 pt-8 shadow-sm shadow-slate-400">
+    <>
+      <Header title="Flash installer" />
+      <div class="p-4">
+        <Typography tag="p" hierarchy="body" size="default" color="secondary">
+          USB Utility image.
+        </Typography>
+        <Typography tag="p" hierarchy="body" size="default" color="secondary">
+          This will make bootstrapping a new machine easier by providing secure
+          remote connection to any machine when plugged in.
+        </Typography>
         <Form onSubmit={handleSubmit}>
           <div class="my-4">
             <Field name="sshKeys" type="File[]">
@@ -217,7 +228,7 @@ export const Flash = () => {
                       e.preventDefault();
                       deviceQuery.refetch();
                     }}
-                  startIcon={<Icon icon="Reload" />}
+                    startIcon={<Icon icon="Update" />}
                   ></Button>
                 }
                 formStore={formStore}
@@ -290,7 +301,9 @@ export const Flash = () => {
                                 variant="light"
                                 type="button"
                                 class="flex justify-center opacity-70"
-                              onClick={() => togglePasswordVisibility(index())}
+                                onClick={() =>
+                                  togglePasswordVisibility(index())
+                                }
                                 startIcon={
                                   passwordVisibility()[index()] ? (
                                     <Icon icon="EyeClose" />
@@ -333,7 +346,9 @@ export const Flash = () => {
 
           <div class="collapse collapse-arrow" tabindex="0">
             <input type="checkbox" />
-          <div class="collapse-title link font-medium ">Advanced Settings</div>
+            <div class="collapse-title link font-medium ">
+              Advanced Settings
+            </div>
             <div class="collapse-content">
               <Field
                 name="machine.flake"
@@ -426,7 +441,9 @@ export const Flash = () => {
                         <>
                           <option value={"en"}>{"en"}</option>
                           <For each={keymapQuery.data}>
-                          {(keymap) => <option value={keymap}>{keymap}</option>}
+                            {(keymap) => (
+                              <option value={keymap}>{keymap}</option>
+                            )}
                           </For>
                         </>
                       }
@@ -456,5 +473,6 @@ export const Flash = () => {
           </div>
         </Form>
       </div>
+    </>
   );
 };