fix: add back button to funder flow, first step

drips-network · Sep 12, 2023 · 529f916 · 529f916
1 parent e4c2977
commit 529f916
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/src/lib/components/stepper/stepper.svelte b/src/lib/components/stepper/stepper.svelte
@@ -10,7 +10,7 @@
   import modal from '$lib/stores/modal';
   import { browser } from '$app/environment';
 
-  const dispatch = createEventDispatcher<{ stepChange: never }>();
+  const dispatch = createEventDispatcher<{ stepChange: never; conclude: never }>();
 
   export let steps: Steps;
   export let context: (() => Writable<unknown>) | undefined = undefined;
@@ -198,6 +198,8 @@
       disableTransitions = false;
     } else {
       modal.hide();
+      // dispatch in case Stepper is being used in a standalone page (like /funder-onboarding)
+      dispatch('conclude');
     }
   }
 

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -101,7 +101,6 @@
               href={canSubmitProjectClaim
                 ? buildUrl('/app/claim-project', { projectToAdd: claimProjectInput })
                 : undefined}
-              target="_blank"
               ><Button variant="primary" size="large" disabled={!canSubmitProjectClaim}
                 >Claim project</Button
               ></a
@@ -247,7 +246,7 @@
         <div class="text">
           <h3>Start your Drip List</h3>
           <p>Give to a personalized list of GitHub projects or Ethereum addresses.</p>
-          <a href="/app/funder-onboarding" target="_blank">
+          <a href="/app/funder-onboarding">
             <Button variant="primary" size="large">Create your Drip List</Button>
           </a>
         </div>

diff --git a/src/routes/app/(flows)/funder-onboarding/+page.svelte b/src/routes/app/(flows)/funder-onboarding/+page.svelte
@@ -31,6 +31,7 @@
 <Stepper
   bind:currentStepIndex
   on:stepChange={() => window.scrollTo({ top: 0 })}
+  on:conclude={() => window.history.back()}
   context={() => state}
   steps={steps()}
   minHeightPx={512}

diff --git a/src/routes/app/(flows)/funder-onboarding/steps/build-list/build-list.svelte b/src/routes/app/(flows)/funder-onboarding/steps/build-list/build-list.svelte
@@ -8,6 +8,7 @@
   import type { State } from '../../funder-onboarding-flow';
   import { page } from '$app/stores';
   import DripListEditor from '$lib/components/drip-list-editor/drip-list-editor.svelte';
+  import ArrowLeft from 'radicle-design-system/icons/ArrowLeft.svelte';
 
   const dispatch = createEventDispatcher<StepComponentEvents>();
 
@@ -28,6 +29,9 @@
     showListFirst={true}
     {projectUrlToAdd}
   />
+  <svelte:fragment slot="left-actions">
+    <Button icon={ArrowLeft} on:click={() => dispatch('conclude')}>Back</Button>
+  </svelte:fragment>
   <svelte:fragment slot="actions">
     <Button
       disabled={!isValid}