Ev/iss629 (#641)

* style: left-apostrophe in /streams 'getting-started'

* style: carousel-edu-card: rmv X, add Dismiss button

* style: chevron-right-cell = foreground color

* style: show Outgoing table header only if there's also Incoming

* style: reduce <Section> padding-top to match figma (24px)

* style: fix 0x showing as '0 x 3' multiplication

* style: dropdown has foreground color chevron

* style: cancel button is ghost variant in modals

* style: list-select small text is gray-4

* style: list-select placeholder is 'search tokens' for token search

* style: fix caps in add token modal

* style: change to 'Go back' to 'Back' in all modals

* style: stream page status next to title

* style: stream page, all headings foreground

* style: stream page copy

* style: create-stream copy: remove hyphen

* style: profile metadata icons are foreground

* style: account dropdown: disconnect ghost, dividers foreground

* style: change all occurences to 'confirm changes in *your* wallet'

* test: fix streams section test (Outgoin conditional visible)

* test: fix stpper test from copy change

* test: fix unit tests copy

* style: textarea initial height matches input (max 200px high)

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

* chore: remove css, fix tests

src/e2e-tests/top-up-create-stream.e2e.test.ts

@@ -168,7 +168,6 @@ describe('app', async () => {
       it('displays the original users outgoing stream on their profile', async () => {
         await page.goto('http://127.0.0.1:3000/app/0x433220a86126eFe2b8C98a723E73eBAd2D0CbaDc');
 
-        await expect(page.locator('text=↑ Outgoing')).toHaveCount(1);
         await expect(page.locator('text=E2E Test Stream')).toHaveCount(1);
       });
 
@@ -420,7 +419,7 @@ describe('app', async () => {
       await page.locator('div[data-testid="sidenav"] a:text("Drip List")').click();
 
       await expect(
-        page.locator('text=Fund your dependencies by creating your Drip List'),
+        page.locator('text=Fund all your dependencies at once with a Drip List'),
       ).toHaveCount(1);
     });
 
@@ -536,7 +535,7 @@ describe('app', async () => {
     });
 
     it('advances the flow', async () => {
-      await page.locator('button', { hasText: 'Confirm changes in wallet' }).click();
+      await page.locator('button', { hasText: 'Confirm changes in your wallet' }).click();
       await page.locator('button', { hasText: 'Got it' }).click();
     });
 

src/lib/components/account-menu/account-menu.svelte

@@ -1,8 +1,6 @@
 <script>
   import wallet from '$lib/stores/wallet/wallet.store';
   import UserIcon from 'radicle-design-system/icons/User.svelte';
-
-  import CrossIcon from 'radicle-design-system/icons/CrossSmall.svelte';
   import Button from '../button/button.svelte';
   import IdentityBadge from '../identity-badge/identity-badge.svelte';
   import AccountMenuItem from './components/account-menu-item.svelte';
@@ -43,7 +41,7 @@
       <svelte:fragment slot="right"
         ><Button
           disabled={safeAppMode}
-          icon={CrossIcon}
+          variant="ghost"
           on:click={() => {
             cupertinoPaneStore.closeSheet();
             wallet.disconnect();

src/lib/components/carousel/items/carousel-edu-card.svelte

@@ -2,7 +2,6 @@
   import Button from '$lib/components/button/button.svelte';
   import dismissablesStore from '$lib/stores/dismissables/dismissables.store';
   import type { ComponentType } from 'svelte';
-  import CrossSmall from 'radicle-design-system/icons/CrossSmall.svelte';
 
   export let id: string;
   export let title: string;
@@ -17,9 +16,6 @@
 </script>
 
 <div class="edu-card">
-  <button class="close-button" on:click={() => dismissablesStore.dismiss(id)}>
-    <CrossSmall />
-  </button>
   <div class="illustration-outer">
     <div class="illustration">
       <svelte:component this={illustration} />
@@ -30,7 +26,8 @@
       <h3 class="pixelated">{title}</h3>
       <p>{description}</p>
     </div>
-    <div class="actions">
+    <div class="actions gap-1">
+      <Button variant="ghost" on:click={() => dismissablesStore.dismiss(id)}>Dismiss</Button>
       {#each actions as action}
         <Button
           icon={action.icon}
@@ -92,22 +89,6 @@
     margin-right: 1.5rem;
   }
 
-  .close-button {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-    transition: background-color 0.3s;
-    border-radius: 1rem;
-  }
-
-  .close-button:hover {
-    background-color: var(--color-foreground-level-1);
-  }
-
-  .close-button:focus {
-    background-color: var(--color-foreground-level-2);
-  }
-
   @media (max-width: 768px) {
     .edu-card {
       flex-direction: column;

src/lib/components/divider/divider.svelte

@@ -8,6 +8,6 @@
   .divider {
     height: 1px;
     border-radius: 0.25rem;
-    background-color: var(--color-foreground-level-3);
+    background-color: var(--color-foreground);
   }
 </style>

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"

src/lib/components/dropdown/dropdown.svelte

@@ -118,7 +118,7 @@
         {selectedOption.title}
       </span>
     </div>
-    <div class="chevron" class:expanded><ChevronDown /></div>
+    <div class="chevron" class:expanded><ChevronDown style="fill: var(--foreground)" /></div>
   </div>
 
   {#if expanded}

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>
@@ -51,24 +54,6 @@
     align-items: center;
   }
 
-  .edu-card button {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    right: 1rem;
-    top: 1rem;
-    border-radius: 50%;
-    height: 2rem;
-    width: 2rem;
-    z-index: 1;
-    background-color: var(--color-background);
-  }
-
-  .edu-card button:focus-visible {
-    background-color: var(--color-foreground-level-2);
-  }
-
   @media (max-width: 768px) {
     .edu-card {
       flex-direction: column-reverse;

src/lib/components/list-select/list-select.svelte

@@ -6,7 +6,7 @@
   import PercentageEditor from '$lib/components/percentage-editor/percentage-editor.svelte';
 
   export let items: Items;
-
+  export let type: 'tokens' | 'generic' = 'generic';
   export let searchable = true;
   export let multiselect = false;
   export let blockInteraction = false;
@@ -178,7 +178,7 @@
         class="typo-text"
         bind:this={searchBarElem}
         bind:value={searchString}
-        placeholder="Search…"
+        placeholder={type === 'tokens' ? 'Search tokens' : 'Search'}
       />
     </div>
   {/if}
@@ -279,7 +279,7 @@
     border-bottom: 1px solid var(--color-foreground);
     display: flex;
     gap: 0.5rem;
-    color: var(--color-foreground);
+    /* color: var(--color-foreground); */
   }
 
   .item:last-child {
@@ -358,7 +358,7 @@
   }
 
   .item .content .text {
-    color: var(--color-foreground);
+    color: var(--color-foreground-level-4);
     flex-shrink: 0;
   }
 

src/lib/components/list-select/list-select.unit.test.ts

@@ -38,7 +38,7 @@ describe('list-select.svelte', async () => {
       },
     });
 
-    screen.getByPlaceholderText('Search…');
+    screen.getByPlaceholderText('Search');
   });
 
   it('doesnʼt show a searchbar if searchable is false', () => {
@@ -49,7 +49,7 @@ describe('list-select.svelte', async () => {
       },
     });
 
-    const searchBar = screen.queryByPlaceholderText('Search…');
+    const searchBar = screen.queryByPlaceholderText('Search');
     expect(searchBar).not.toBeInTheDocument();
   });
 
@@ -60,7 +60,7 @@ describe('list-select.svelte', async () => {
       },
     });
 
-    const searchBar = screen.getByPlaceholderText('Search…');
+    const searchBar = screen.getByPlaceholderText('Search');
 
     await userEvent.type(searchBar, 'test-item-1');
 
@@ -98,7 +98,7 @@ describe('list-select.svelte', async () => {
 
     await userEvent.tab();
 
-    const searchBar = screen.getByPlaceholderText('Search…');
+    const searchBar = screen.getByPlaceholderText('Search');
     expect(searchBar).toHaveFocus();
 
     await userEvent.tab();

src/lib/components/section/section.svelte

@@ -32,6 +32,6 @@
   }
 
   .content {
-    padding-top: 2rem;
+    padding-top: 1.5rem;
   }
 </style>

src/lib/components/social-link/social-link.svelte

@@ -34,7 +34,7 @@
 </script>
 
 <div class="social-link">
-  <svelte:component this={icon} />
+  <svelte:component this={icon} style="fill: var(--foreground)" />
   {#if prefix !== undefined}
     <a target="_blank" rel="noreferrer" class="typo-text" href={url}
       >{value.replaceAll('http://', '').replaceAll('https://', '')}</a

src/lib/components/stepper/__test__/stepper.unit.test.ts

@@ -44,7 +44,7 @@ describe('stepper.svelte', () => {
 
     screen.getByText('Step 1');
     screen.getByText('Continue');
-    screen.getByText('Go back');
+    screen.getByText('Back');
   });
 
   it('allows moving forward and backward', async () => {
@@ -76,7 +76,7 @@ describe('stepper.svelte', () => {
     screen.getByText('Step 1');
 
     const forwardButton = screen.getByText('Continue');
-    const backwardButton = screen.getByText('Go back');
+    const backwardButton = screen.getByText('Back');
 
     userEvent.click(forwardButton);
 
@@ -138,7 +138,7 @@ describe('stepper.svelte', () => {
     // Ensure the success step is displayed
     await screen.findByText('Await successful');
 
-    const backwardButton = screen.getByText('Go back');
+    const backwardButton = screen.getByText('Back');
 
     userEvent.click(backwardButton);
 

src/lib/components/stepper/__test__/test-steps/only-text.svelte

@@ -10,4 +10,4 @@
 
 {text}
 <Button on:click={() => dispatch('goForward')}>Continue</Button>
-<Button on:click={() => dispatch('goBackward')}>Go back</Button>
+<Button on:click={() => dispatch('goBackward')}>Back</Button>

src/lib/components/stepper/components/await-error-step.svelte

@@ -19,7 +19,7 @@
   <p class="codeblock typo-text-mono">
     {message}
   </p>
-  <Button on:click={() => dispatch('retry')}>Go back</Button>
+  <Button on:click={() => dispatch('retry')}>Back</Button>
   <a class="typo-text-small" target="_blank" href="https://discord.gg/BakDKKDpHF"
     >Ask for help on Discord ↗</a
   >

src/lib/components/support-stream-editor/support-stream-editor.svelte

@@ -255,6 +255,7 @@
   <FormField type="div" disabled={currentStage < 1} title="Select a token to stream">
     <div class="list-container">
       <ListSelect
+        type="tokens"
         blockInteraction={currentStage < 1}
         bind:selected={tokenListSelected}
         items={tokenList}

src/lib/components/table/cells/chevron-right-cell.svelte

@@ -3,5 +3,5 @@
 </script>
 
 <div class="flex w-full justify-end pr-3">
-  <ChevronRight />
+  <ChevronRight style="fill: var(--color-foreground)" />
 </div>

src/lib/components/text-area/text-area.svelte

@@ -2,6 +2,7 @@
 <script lang="ts">
   import type { TextInputValidationState } from 'radicle-design-system/TextInput';
   import ExclamationCircle from 'radicle-design-system/icons/ExclamationCircle.svelte';
+  import { onMount } from 'svelte';
 
   export let resizable = false;
 
@@ -30,6 +31,12 @@
 
     textareaElement.style.height = `${textareaElement.scrollHeight}px`;
   }
+
+  onMount(() => {
+    if (textareaElement && resizable && value?.length) {
+      textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, 200)}px`;
+    }
+  });
 </script>
 
 <div class="container">

src/lib/flows/add-custom-token/enter-details.svelte

@@ -114,7 +114,7 @@
     <TextInput placeholder="https://foo.com/token.png" bind:value={tokenLogoUrl} />
   </FormField>
   <svelte:fragment slot="actions">
-    <Button on:click={() => dispatch('conclude')}>Cancel</Button>
+    <Button on:click={() => dispatch('conclude')} variant="ghost">Cancel</Button>
     <Button variant="primary" disabled={!formValid} on:click={submit}>Add custom token</Button>
   </svelte:fragment>
 </StepLayout>

src/lib/flows/collect-flow/select-token.svelte

@@ -68,11 +68,11 @@
   />
   <FormField title="Token">
     <div class="list-container">
-      <ListSelect bind:selected items={tokenList} />
+      <ListSelect bind:selected items={tokenList} type="tokens" />
     </div>
   </FormField>
   <svelte:fragment slot="actions">
-    <Button on:click={() => dispatch('conclude')}>Cancel</Button>
+    <Button on:click={() => dispatch('conclude')} variant="ghost">Cancel</Button>
     <Button variant="primary" disabled={selected.length !== 1} on:click={submit}
       >Select {selectedToken?.info.name ?? ''}</Button
     >

src/lib/flows/create-stream-flow/input-details.svelte

@@ -236,6 +236,7 @@
         items={tokenList}
         searchable={Object.keys(tokenList).length > 5}
         emptyStateText={'No tokens available to stream. Add one first by clicking "Add funds" on your Dashboard.'}
+        type="tokens"
       />
     </div>
   </FormField>
@@ -285,7 +286,7 @@
       />
     </FormField>
   </div>
-  <Toggleable bind:toggled={setStartAndEndDate} label="Specify start- and end dates">
+  <Toggleable bind:toggled={setStartAndEndDate} label="Specify start and end dates">
     <div class="start-end-date">
       <p>
         Be aware that if your transaction is confirmed after the configured start date, your stream
@@ -327,7 +328,7 @@
   </Toggleable>
   <SafeAppDisclaimer disclaimerType="drips" />
   <svelte:fragment slot="actions">
-    <Button on:click={() => dispatch('conclude')}>Cancel</Button>
+    <Button on:click={() => dispatch('conclude')} variant="ghost">Cancel</Button>
     <Button variant="primary" on:click={submit} disabled={!formValid}>Create stream</Button>
   </svelte:fragment>
 </StepLayout>