style: drip-list edu card has dismiss button, new copy

drips-network · Sep 7, 2023 · 14a679d · 14a679d
1 parent 0557fc8
commit 14a679d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 21 deletions.
diff --git a/src/lib/components/drip-lists-section/drip-lists-section.svelte b/src/lib/components/drip-lists-section/drip-lists-section.svelte
@@ -115,7 +115,7 @@
   {/if}
 </Section>
 
-{#if showSupportersSection}
+{#if showSupportersSection && dripLists?.length}
   <Supporters
     type="dripList"
     headline="Support"

diff --git a/src/lib/components/edu-card/edu-card.svelte b/src/lib/components/edu-card/edu-card.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import dismissablesStore from '$lib/stores/dismissables/dismissables.store';
   import { fade } from 'svelte/transition';
-  import Cross from 'radicle-design-system/icons/Cross.svelte';
   import TransitionedHeight from '../transitioned-height/transitioned-height.svelte';
+  import Button from '../button/button.svelte';
 
   export let dimissableId: string;
   export let negativeMarginWhileCollapsed: string | undefined = undefined;
@@ -13,13 +13,16 @@
     <div out:fade|local={{ duration: 300 }} class="edu-card">
       <div class="text">
         <slot name="text" />
+        <div class="flex gap-1">
+          <slot name="buttons" />
+          <Button variant="ghost" on:click={() => dismissablesStore.dismiss(dimissableId)}
+            >Dismiss</Button
+          >
+        </div>
       </div>
       <div class="illustration">
         <slot name="illustration" />
       </div>
-      <button on:click={() => dismissablesStore.dismiss(dimissableId)} class="close-button">
-        <Cross />
-      </button>
     </div>
   {/if}
 </TransitionedHeight>

diff --git a/src/routes/app/(app)/drip-lists/+page.svelte b/src/routes/app/(app)/drip-lists/+page.svelte
@@ -5,8 +5,9 @@
   import HeadMeta from '$lib/components/head-meta/head-meta.svelte';
   import DripList from '$lib/components/illustrations/drip-list.svelte';
   import Button from '$lib/components/button/button.svelte';
-  import ArrowBoxUpRight from 'radicle-design-system/icons/ArrowBoxUpRight.svelte';
   import EduCard from '$lib/components/edu-card/edu-card.svelte';
+  import { goto } from '$app/navigation';
+  import Ledger from 'radicle-design-system/icons/Ledger.svelte';
 
   const walletInitialized = walletStore.initialized;
 
@@ -25,18 +26,20 @@
 <div class="page">
   <EduCard dimissableId="drip-lists-page-intro" negativeMarginWhileCollapsed="-4rem">
     <svelte:fragment slot="text">
-      <h2 class="pixelated">Fund your dependencies by creating your Drip List</h2>
+      <h2 class="pixelated">Fund all your dependencies at once with a&nbsp;Drip&nbsp;List</h2>
       <p>
-        Your Drip List is a list of projects and individuals that you can flexibly support by
-        streaming any ERC-20.
+        Stream any ERC-20 token to a list of individuals, Git projects, or other Drip
+        Lists&mdash;weighted by their importance to you. <a
+          href="https://docs.drips.network/docs/for-funders/fund-your-dependencies"
+          class="text-foreground-level-5 hover:text-foreground hover:underline transition duration-150 focus-visible:bg-primary-level-1 focus-visible:text-foreground focus-visible:underline px-1 py-0.5 -mx-1 rounded focus:outline-none"
+          >Learn&nbsp;more</a
+        >
       </p>
-      <a
-        tabindex="-1"
-        style:width="fit-content"
-        href="https://docs.drips.network/docs/for-funders/fund-your-dependencies"
+    </svelte:fragment>
+    <svelte:fragment slot="buttons">
+      <Button icon={Ledger} variant="primary" on:click={() => goto('/app/funder-onboarding')}
+        >Create a Drip List</Button
       >
-        <Button icon={ArrowBoxUpRight}>Learn more</Button>
-      </a>
     </svelte:fragment>
     <svelte:fragment slot="illustration">
       <div class="edu-card-illustration-bg" />

diff --git a/src/routes/app/(app)/streams/+page.svelte b/src/routes/app/(app)/streams/+page.svelte
@@ -5,7 +5,7 @@
   import wallet from '$lib/stores/wallet/wallet.store';
   import guardConnected from '$lib/utils/guard-connected';
   import Carousel, { makeCarouselItem } from '$lib/components/carousel/carousel.svelte';
-  import EduCard from '$lib/components/carousel/items/carousel-edu-card.svelte';
+  import CarouselEduCard from '$lib/components/carousel/items/carousel-edu-card.svelte';
   import dismissablesStore from '$lib/stores/dismissables/dismissables.store';
   import ArrowUp from 'radicle-design-system/icons/ArrowBoxUpRight.svelte';
   import OneContract from '$lib/components/illustrations/one-contract.svelte';
@@ -31,7 +31,7 @@
   $: eduCarouselItems = [
     makeCarouselItem({
       id: 'create-a-drip-list',
-      component: EduCard,
+      component: CarouselEduCard,
       props: {
         id: 'create-a-drip-list',
         title: 'Support Open-Source Software',
@@ -55,7 +55,7 @@
     }),
     makeCarouselItem({
       id: 'claim-a-project',
-      component: EduCard,
+      component: CarouselEduCard,
       props: {
         id: 'claim-a-project',
         title: 'Raise funds for your project',
@@ -79,7 +79,7 @@
     }),
     makeCarouselItem({
       id: 'set-up-first-stream',
-      component: EduCard,
+      component: CarouselEduCard,
       props: {
         id: 'set-up-first-stream',
         title: 'Create your first stream',
@@ -103,7 +103,7 @@
     }),
     makeCarouselItem({
       id: 'collect-earnings',
-      component: EduCard,
+      component: CarouselEduCard,
       props: {
         id: 'collect-earnings',
         title: 'Collect earnings',
@@ -127,7 +127,7 @@
     }),
     makeCarouselItem({
       id: 'explore-the-network',
-      component: EduCard,
+      component: CarouselEduCard,
       props: {
         id: 'explore-the-network',
         title: 'Explore the network',