Merge branch 'main' into jason/hide-splitting-percent-in-collect-flow

drips-network · Oct 2, 2023 · 0757ba0 · 0757ba0
2 parents caf893d + cf73af7
commit 0757ba0
Show file tree

Hide file tree

Showing 16 changed files with 66 additions and 59 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/components/drip-list-badge/drip-list-badge.svelte b/src/lib/components/drip-list-badge/drip-list-badge.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Ledger from 'radicle-design-system/icons/Ledger.svelte';
+  import DripListIcon from 'radicle-design-system/icons/DripList.svelte';
   import ensStore from '$lib/stores/ens';
   import formatAddress from '$lib/utils/format-address';
 
@@ -25,7 +25,7 @@
 >
   {#if showAvatar}
     <div class="drip-list-icon">
-      <Ledger style="fill: var(--color-primary)" />
+      <DripListIcon style="fill: var(--color-primary)" />
     </div>
   {/if}
   {#if showName}

diff --git a/src/lib/components/drip-list-card/drip-list-card.svelte b/src/lib/components/drip-list-card/drip-list-card.svelte
@@ -172,8 +172,8 @@
 
 <section class="card">
   <header class="px-6 pt-6 flex flex-col gap-4">
-    <div class="flex flex-wrap justify-between">
-      <h1 class="flex-1 min-w-0 truncate">
+    <div class="flex flex-wrap gap-3 justify-between">
+      <h1 class="w-full sm:w-auto sm:flex-1 min-w-0 truncate">
         <a
           href={dripListUrl}
           class="focus-visible:outline-none focus-visible:bg-primary-level-1 rounded"

diff --git a/src/lib/components/drip-list-members-editor/drip-list-members-editor.svelte b/src/lib/components/drip-list-members-editor/drip-list-members-editor.svelte
@@ -45,7 +45,7 @@
   import { verifyRepoExists } from '$lib/utils/github/github';
   import PercentageEditor from '$lib/components/percentage-editor/percentage-editor.svelte';
   import Trash from 'radicle-design-system/icons/Trash.svelte';
-  import Ledger from 'radicle-design-system/icons/Ledger.svelte';
+  import DripListIcon from 'radicle-design-system/icons/DripList.svelte';
   import IdentityBadge from '$lib/components/identity-badge/identity-badge.svelte';
   import ProjectBadge from '$lib/components/project-badge/project-badge.svelte';
   import ethAddressItem from './item-templates/eth-address';
@@ -304,7 +304,7 @@
   {#if isEditable}
     <div class="add-project flex items-center">
       <div class="icon">
-        <Ledger style="fill: var(--color-foreground)" />
+        <DripListIcon style="fill: var(--color-foreground)" />
       </div>
       <input
         bind:this={inputElem}

diff --git a/src/lib/components/drip-lists-section/drip-lists-section.svelte b/src/lib/components/drip-lists-section/drip-lists-section.svelte
@@ -4,7 +4,7 @@
   import DripListService from '$lib/utils/driplist/DripListService';
   import assert from '$lib/utils/assert';
   import { getRepresentationalSplitsForAccount } from '$lib/utils/drips/splits';
-  import Ledger from 'radicle-design-system/icons/Ledger.svelte';
+  import DripListIcon from 'radicle-design-system/icons/DripList.svelte';
   import { goto } from '$app/navigation';
   import DripListCard from '../drip-list-card/drip-list-card.svelte';
   import Plus from 'radicle-design-system/icons/Plus.svelte';
@@ -74,7 +74,7 @@
   bind:collapsed
   bind:collapsable
   header={{
-    icon: Ledger,
+    icon: DripListIcon,
     label: 'Drip List',
     actionsDisabled: !dripLists || dripLists.length > 0,
     actions: isSelf

diff --git a/src/lib/components/identity-card/identity-card.svelte b/src/lib/components/identity-card/identity-card.svelte
@@ -3,7 +3,7 @@
   import IdentityBadge from '../identity-badge/identity-badge.svelte';
   import Spinner from '$lib/components/spinner/spinner.svelte';
   import type { DripList } from '$lib/utils/metadata/types';
-  import Ledger from 'radicle-design-system/icons/Ledger.svelte';
+  import DripListIcon from 'radicle-design-system/icons/DripList.svelte';
 
   // Either pass address or dripList. If neither, it'll say "TBD" as a placeholder.
   export let address: string | undefined = undefined;
@@ -36,7 +36,7 @@
   {:else if dripList}
     <div class="content-container" in:fade|local>
       <div class="icon">
-        <Ledger style="fill: var(--color-background); height: 3rem; width: 3rem;" />
+        <DripListIcon style="fill: var(--color-background); height: 3rem; width: 3rem;" />
       </div>
       <span class="typo-header-3 ellipsis">{dripList.name}</span>
     </div>

diff --git a/src/lib/components/share-button/share-button.svelte b/src/lib/components/share-button/share-button.svelte
@@ -32,7 +32,8 @@
 
 {#if shareSupported}
   <button on:click={handleClick}>
-    <ShareIcon />
+    <ShareIcon style="fill:currentColor" />
+    Share
   </button>
 {:else}
   <button
@@ -43,22 +44,33 @@
     on:click={handleClick}
     class:copy-success={copySuccess}
   >
-    {#if copySuccess}
-      <div transition:fade|local={{ duration: 200 }}>
-        <CheckCircle style="fill: var(--color-positive)" />
-      </div>
-    {:else if hovering}
-      <div transition:fade|local={{ duration: 200 }}>
-        <CopyIcon style="fill: var(--color-primary-level-6)" />
-      </div>
-    {:else}
-      <div transition:fade|local={{ duration: 200 }}><LinkIcon /></div>
-    {/if}
+    <div class="icon">
+      {#if copySuccess}
+        <span transition:fade|local={{ duration: 200 }}>
+          <CheckCircle style="fill: var(--color-positive)" />
+        </span>
+      {:else if hovering}
+        <span transition:fade|local={{ duration: 200 }}>
+          <CopyIcon style="fill: var(--color-primary-level-6)" />
+        </span>
+      {:else}
+        <span transition:fade|local={{ duration: 200 }}
+          ><LinkIcon style="fill: currentColor" /></span
+        >
+      {/if}
+    </div>
+    Copy link
   </button>
 {/if}
 
 <style>
   button {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  button .icon {
     height: 2rem;
     width: 2rem;
     display: inline-flex;
@@ -68,12 +80,12 @@
     border-radius: 1rem;
   }
 
-  button > * {
+  button .icon > * {
     position: absolute;
   }
 
-  button:hover:not(.copy-success),
-  button:focus-visible:not(.copy-success) {
+  button:hover:not(.copy-success) .icon,
+  button:focus-visible:not(.copy-success) .icon {
     background-color: var(--color-primary-level-1);
   }
 </style>
diff --git a/src/lib/components/social-link/social-link.svelte b/src/lib/components/social-link/social-link.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Twitter from 'radicle-design-system/icons/Twitter.svelte';
+  import X from 'radicle-design-system/icons/X.svelte';
   import Web from 'radicle-design-system/icons/Globe.svelte';
   import Ethereum from 'radicle-design-system/icons/Ethereum.svelte';
   import Github from 'radicle-design-system/icons/Github.svelte';
@@ -14,7 +14,7 @@
 
   const icons: { [key in SocialNetwork]: ComponentType } = {
     ethereum: Ethereum,
-    'com.twitter': Twitter,
+    'com.twitter': X,
     'com.github': Github,
     url: Web,
   };

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; conclude: never }>();
+  const dispatch = createEventDispatcher<{ stepChange: never }>();
 
   export let steps: Steps;
   export let context: (() => Writable<unknown>) | undefined = undefined;
@@ -198,8 +198,6 @@
       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/lib/components/table/cells/user-badge.cell.svelte b/src/lib/components/table/cells/user-badge.cell.svelte
@@ -3,7 +3,7 @@
   import IdentityBadge from '$lib/components/identity-badge/identity-badge.svelte';
   import { z } from 'zod';
   import type { AddressDriverAccount, NFTDriverAccount } from '$lib/stores/streams/types';
-  import Ledger from 'radicle-design-system/icons/Ledger.svelte';
+  import DripListIcon from 'radicle-design-system/icons/DripList.svelte';
 
   export let context: CellContext<unknown, unknown>;
 
@@ -33,7 +33,7 @@
   <!-- TODO: Donʼt presume any NFT account is a Drip List. -->
   <div class="drip-list-badge">
     <div class="icon">
-      <Ledger style="fill: var(--color-background); height: 1.25rem;" />
+      <DripListIcon style="fill: var(--color-background); height: 1.25rem;" />
     </div>
     <span class="typo-text">Your Drip List</span>
   </div>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -101,6 +101,7 @@
               href={canSubmitProjectClaim
                 ? buildUrl('/app/claim-project', { projectToAdd: claimProjectInput })
                 : undefined}
+              target="_blank"
               ><Button variant="primary" size="large" disabled={!canSubmitProjectClaim}
                 >Claim project</Button
               ></a
@@ -246,7 +247,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">
+          <a href="/app/funder-onboarding" target="_blank">
             <Button variant="primary" size="large">Create your Drip List</Button>
           </a>
         </div>

diff --git a/src/routes/app/(app)/+layout.svelte b/src/routes/app/(app)/+layout.svelte
@@ -5,7 +5,7 @@
   import Header from '$lib/components/header/header.svelte';
   import Sidenav from '$lib/components/sidenav/sidenav.svelte';
 
-  import Ledger from 'radicle-design-system/icons/Ledger.svelte';
+  import DripListIcon from 'radicle-design-system/icons/DripList.svelte';
   import TokenStreams from 'radicle-design-system/icons/TokenStreams.svelte';
   import InfoCircle from 'radicle-design-system/icons/InfoCircle.svelte';
   import { quintIn, quintOut } from 'svelte/easing';
@@ -50,7 +50,7 @@
           top: [
             { label: 'Streams', href: '/app/streams', icon: TokenStreams },
             { label: 'Projects', href: '/app/projects', icon: Box },
-            { label: 'Drip List', href: '/app/drip-lists', icon: Ledger },
+            { label: 'Drip List', href: '/app/drip-lists', icon: DripListIcon },
             {
               label: 'Profile',
               href: `/app/${$ens[$wallet.address]?.name ?? $wallet.address}`,
@@ -73,7 +73,7 @@
         items={[
           { label: 'Streams', href: '/app/streams', icon: TokenStreams },
           { label: 'Projects', href: '/app/projects', icon: Box },
-          { label: 'Drip List', href: '/app/drip-lists', icon: Ledger },
+          { label: 'Drip List', href: '/app/drip-lists', icon: DripListIcon },
           {
             label: 'Profile',
             href: `/app/${$ens[$wallet.address]?.name ?? $wallet.address}`,

diff --git a/src/routes/app/(app)/drip-lists/+page.svelte b/src/routes/app/(app)/drip-lists/+page.svelte
@@ -7,7 +7,7 @@
   import Button from '$lib/components/button/button.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';
+  import DripListIcon from 'radicle-design-system/icons/DripList.svelte';
 
   const walletInitialized = walletStore.initialized;
 
@@ -37,7 +37,7 @@
       </p>
     </svelte:fragment>
     <svelte:fragment slot="buttons">
-      <Button icon={Ledger} variant="primary" on:click={() => goto('/app/funder-onboarding')}
+      <Button icon={DripListIcon} variant="primary" on:click={() => goto('/app/funder-onboarding')}
         >Create a Drip List</Button
       >
     </svelte:fragment>

diff --git a/src/routes/app/(flows)/funder-onboarding/+page.svelte b/src/routes/app/(flows)/funder-onboarding/+page.svelte
@@ -31,7 +31,6 @@
 <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,7 +8,6 @@
   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>();
 
@@ -29,9 +28,6 @@
     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}

diff --git a/src/routes/app/(flows)/funder-onboarding/steps/review/review.svelte b/src/routes/app/(flows)/funder-onboarding/steps/review/review.svelte
@@ -7,7 +7,7 @@
   import { createEventDispatcher, onMount } from 'svelte';
   import type { StepComponentEvents } from '$lib/components/stepper/types';
   import PenIcon from 'radicle-design-system/icons/Pen.svelte';
-  import ListIcon from 'radicle-design-system/icons/Ledger.svelte';
+  import ListIcon from 'radicle-design-system/icons/DripList.svelte';
   import TransactionsIcon from 'radicle-design-system/icons/Transactions.svelte';
   import type { Writable } from 'svelte/store';
   import unreachable from '$lib/utils/unreachable';
@@ -27,6 +27,7 @@
   import { constants, type DripsSubgraphClient } from 'radicle-drips';
   import { getSubgraphClient } from '$lib/utils/get-drips-clients';
   import streamsStore from '$lib/stores/streams/streams.store';
+  import Pause from 'radicle-design-system/icons/Pause.svelte';
 
   const dispatch = createEventDispatcher<StepComponentEvents>();
 
@@ -209,7 +210,7 @@
           ><span class="typo-text-bold">Add funds</span> (or withdraw any unstreamed funds) from your
           Drips dashboard.</UlIconLi
         >
-        <UlIconLi icon={ListIcon}
+        <UlIconLi icon={Pause}
           ><span class="typo-text-bold">Pause or cancel</span> your support anytime.</UlIconLi
         >
         <UlIconLi icon={PenIcon}