fix: changed position of progress bar from top to in b/w footer and modal

src/app/components/KeyDownload.svelte

@@ -112,9 +112,6 @@
 
 <Modal tag="form" onsubmit={preventDefault(next)}>
   <ModalBody>
-    {#if step && totalSteps}
-      <ProgressBar current={step} total={totalSteps} />
-    {/if}
     <ModalHeader>
       <ModalTitle>Your Keys are Ready!</ModalTitle>
     </ModalHeader>
@@ -156,6 +153,9 @@
       </Button>
     </div>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />

src/app/components/ProfileEditForm.svelte

@@ -23,9 +23,10 @@
     onsubmit: (values: Values) => void
     isSignup?: boolean
     footer: Snippet
+    progressBar?: Snippet
   }
 
-  const {initialValues, isSignup, onsubmit, footer}: Props = $props()
+  const {initialValues, isSignup, onsubmit, footer, progressBar}: Props = $props()
 
   const values = $state(initialValues)
 
@@ -103,6 +104,9 @@
       </Field>
     {/if}
   </ModalBody>
+  {#if progressBar}
+    {@render progressBar()}
+  {/if}
   <ModalFooter>
     {@render footer()}
   </ModalFooter>

src/app/components/ProgressBar.svelte

@@ -2,12 +2,8 @@
   const {current, total}: {current: number; total: number} = $props()
 </script>
 
-<div class="flex gap-2 w-full px-4 pt-2">
+<div class="flex w-full">
   {#each Array(total) as _, i}
-    <div
+    <div class="h-1 flex-1 transition-colors {i < current ? 'bg-primary' : 'bg-base-300'}"></div>
-      class="h-1 flex-1 rounded-full transition-colors {i < current
-        ? 'bg-primary'
-        : 'bg-base-300'}">
-    </div>
   {/each}
 </div>

src/app/components/SignUpComplete.svelte

@@ -24,9 +24,6 @@
 
 <Modal tag="form" onsubmit={preventDefault(next)}>
   <ModalBody>
-    {#if step && totalSteps}
-      <ProgressBar current={step} total={totalSteps} />
-    {/if}
     <ModalHeader>
       <ModalTitle>You're all set!</ModalTitle>
     </ModalHeader>
@@ -39,6 +36,9 @@
       on groups you've already joined. Click below to get started!
     </p>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />

src/app/components/SignUpEmail.svelte

@@ -104,9 +104,6 @@
 
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
-    {#if step && totalSteps}
-      <ProgressBar current={step} total={totalSteps} />
-    {/if}
     <ModalHeader>
       <ModalTitle>Sign up with Email</ModalTitle>
       <ModalSubtitle>Keep your keys safe using multi-signer key sharing</ModalSubtitle>
@@ -145,6 +142,9 @@
       {/snippet}
     </FieldInline>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />

src/app/components/SignUpEmailConfirm.svelte

@@ -44,9 +44,6 @@
 
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
-    {#if step && totalSteps}
-      <ProgressBar current={step} total={totalSteps} />
-    {/if}
     <ModalHeader>
       <ModalTitle>Verify your Email Address</ModalTitle>
       <ModalSubtitle>Enter the one-time confirmation code sent to your email</ModalSubtitle>
@@ -67,6 +64,9 @@
       above.
     </p>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />

src/app/components/SignUpProfile.svelte

@@ -5,8 +5,6 @@
   import {getKey, setKey} from "@lib/implicit"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components/ModalBody.svelte"
   import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
   import ProgressBar from "@app/components/ProgressBar.svelte"
 
@@ -30,22 +28,20 @@
   }
 </script>
 
-<Modal>
+<ProfileEditForm isSignup {initialValues} {onsubmit}>
-  <ModalBody>
+  {#snippet footer()}
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" type="submit">
+      Create Account
+      <Icon icon={AltArrowRight} />
+    </Button>
+  {/snippet}
+  {#snippet progressBar()}
     {#if step && totalSteps}
       <ProgressBar current={step} total={totalSteps} />
     {/if}
-    <ProfileEditForm isSignup {initialValues} {onsubmit}>
+  {/snippet}
-      {#snippet footer()}
+</ProfileEditForm>
-        <Button class="btn btn-link" onclick={back}>
-          <Icon icon={AltArrowLeft} />
-          Go back
-        </Button>
-        <Button class="btn btn-primary" type="submit">
-          Create Account
-          <Icon icon={AltArrowRight} />
-        </Button>
-      {/snippet}
-    </ProfileEditForm>
-  </ModalBody>
-</Modal>