Fix small issues (#1063)

* style: change project splits section icon (closes #850) * style: align splits lines to project badge in splits section * style: add text-wrap:pretty to * (closes #908) * copy: remove 'Support stream' references (closes #984) * fix: project customizer can filter by emoji character (closes #894) * style: add hover states to project stats (part of #906) --------- Co-authored-by: Jason Efstathiou <[email protected]>
drips-network · Apr 26, 2024 · d38f273 · d38f273
1 parent 6689952
commit d38f273
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 41 deletions.
diff --git a/src/lib/components/project-customizer/project-customizer.svelte b/src/lib/components/project-customizer/project-customizer.svelte
@@ -36,10 +36,10 @@
 
   let searchTerm = '';
   $: filteredEmoji = emoji.filter((e) => {
-    let { tags, description, aliases } = e;
+    let { tags, description, aliases, unicode } = e;
 
-    return [...tags, ...aliases, description].some((a) =>
-      a.toLowerCase().startsWith(searchTerm.toLowerCase()),
+    return [...tags, ...aliases, description, unicode].some((a) =>
+      a.toLowerCase().includes(searchTerm.toLowerCase()),
     );
   });
 
@@ -90,7 +90,7 @@
     />
   </FormField>
 
-  <TabbedBox bind:activeTab ariaLabel="Avatar settings">
+  <TabbedBox bind:activeTab ariaLabel="Avatar settings" border={true}>
     <svelte:fragment slot="tab-1">
       <input class="emoji-search-input" type="text" bind:value={searchTerm} placeholder="Search…" />
       <div class="emojis-container">

diff --git a/src/lib/components/tabbed-box/tabbed-box.svelte b/src/lib/components/tabbed-box/tabbed-box.svelte
@@ -7,11 +7,12 @@
   };
 
   export let ariaLabel: string;
+  export let border = false;
 
   export let activeTab = 'tab-1';
 </script>
 
-<div class="tabbed-box whitespace-nowrap">
+<div class="tabbed-box whitespace-nowrap relative {border ? 'border rounded-drip-lg' : 'border-t'}">
   <div class="tabs">
     <SegmentedControl
       bind:active={activeTab}
@@ -37,10 +38,7 @@
 
 <style>
   .tabbed-box {
-    border-top: 1px solid var(--color-foreground);
-    border-radius: 1rem 0 1rem 1rem;
     margin-top: 21px;
-    position: relative;
   }
 
   .tabs {

diff --git a/src/lib/flows/create-drip-list-stream/create-drip-list-stream-steps.ts b/src/lib/flows/create-drip-list-stream/create-drip-list-stream-steps.ts
@@ -13,7 +13,7 @@ export default (dripListId: string) => ({
       component: SuccessStep,
       props: {
         message:
-          'Your support stream has successfully been created. Please refresh the app to see your changes.',
+          'Your continuous donation was created successfully. Please refresh the app to see your changes.',
       },
     }),
   ],

diff --git a/src/lib/flows/create-stream-flow/input-details.svelte b/src/lib/flows/create-stream-flow/input-details.svelte
@@ -254,7 +254,7 @@
     amountPerSecond={amountValidationState?.type === 'valid' ? amountPerSecond : undefined}
   />
   <StepHeader
-    headline={receiver ? 'Create a Support Stream' : 'Create stream'}
+    headline={receiver ? 'Start a Continuous Donation' : 'Create stream'}
     description="Stream any ERC-20 token from your Drips account."
   />
   {#if !nameInputHidden}

diff --git a/src/routes/app/(app)/drip-lists/[listId]/+page.svelte b/src/routes/app/(app)/drip-lists/[listId]/+page.svelte
@@ -106,7 +106,7 @@
       <Supporters
         accountId={dripList.account.accountId}
         headline="Support"
-        infoTooltip="A Drip List can be supported by one or more support streams by the list's owner. Others can also add a Drip List to their own Drip Lists or project's dependencies, or send a one-time donation."
+        infoTooltip="A Drip List can be supported by continuous donations, one-time donations, or funds split by projects and other Drip Lists."
         forceLoading={!streamsFetched}
         supportStreams={supportStreams || undefined}
         type="dripList"

diff --git a/src/routes/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte b/src/routes/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte
@@ -42,7 +42,6 @@
 <script lang="ts">
   import PrimaryColorThemer from '$lib/components/primary-color-themer/primary-color-themer.svelte';
   import SectionHeader from '$lib/components/section-header/section-header.svelte';
-  import SplitsIcon from '$lib/components/icons/Splits.svelte';
   import SupportCard, {
     SUPPORT_CARD_PROJECT_FRAGMENT,
   } from '$lib/components/support-card/support-card.svelte';
@@ -109,6 +108,7 @@
   import { Forge } from '$lib/graphql/__generated__/base-types';
   import ArrowRight from '$lib/components/icons/ArrowRight.svelte';
   import EyeOpen from '$lib/components/icons/EyeOpen.svelte';
+  import DripList from '$lib/components/icons/DripList.svelte';
 
   interface Amount {
     tokenAddress: string;
@@ -380,36 +380,36 @@
         {#await earnedFunds}
           <div class="flex gap-4">
             <div
-              class="stat border rounded-drip-lg h-[6.125rem] w-[11rem] flex items-center justify-center"
+              class="stat shadow-low rounded-drip-lg h-[6.125rem] w-[11rem] flex items-center justify-center"
             >
               <Spinner />
             </div>
             <div
-              class="stat border rounded-drip-lg h-[6.125rem] w-[11rem] flex items-center justify-center"
+              class="stat shadow-low rounded-drip-lg h-[6.125rem] w-[11rem] flex items-center justify-center"
             >
               <Spinner />
             </div>
           </div>
         {:then earnedFundsResult}
           <div class="stats" in:fade|local={{ duration: 300 }}>
             {#if earnedFundsResult}
-              <div class="stat">
+              <div class="stat shadow-low rounded-drip-lg">
                 <KeyValuePair key="Donations">
                   <AggregateFiatEstimate amounts={earnedFundsResult} />
                 </KeyValuePair>
               </div>
             {/if}
             <!-- ("Supporters" stat) -->
             {#if [project.support].flat().length > 0}
-              <a class="stat" href="#support">
+              <a class="stat btn-theme-outlined" href="#support">
                 <KeyValuePair key="Supporters">
                   <Pile maxItems={4} components={getSupportersPile([project.support ?? []])} />
                 </KeyValuePair>
               </a>
             {/if}
             <!-- ("Splits with" stat) -->
             {#if [project.splits.maintainers, project.splits.dependencies].flat().length > 0}
-              <a class="stat" href="#splits">
+              <a class="stat btn-theme-outlined" href="#splits">
                 <KeyValuePair key="Splits with">
                   <Pile
                     maxItems={4}
@@ -430,7 +430,7 @@
       {#if isClaimed(project)}
         <section id="splits" class="app-section">
           <SectionHeader
-            icon={SplitsIcon}
+            icon={DripList}
             label="Splits"
             actions={isOwnProject
               ? [
@@ -463,22 +463,24 @@
             emptyStateText="This project isnʼt sharing incoming funds with any maintainers or dependencies."
           >
             <div class="card">
-              <div class="outgoing-splits">
+              <div class="p-6">
                 <ProjectBadge {project} />
-                <SplitsComponent
-                  list={[
-                    {
-                      __typename: 'SplitGroup',
-                      name: 'Maintainers',
-                      list: project.splits.maintainers,
-                    },
-                    {
-                      __typename: 'SplitGroup',
-                      name: 'Dependencies',
-                      list: project.splits.dependencies,
-                    },
-                  ]}
-                />
+                <div class="pl-3.5 mt-2.5">
+                  <SplitsComponent
+                    list={[
+                      {
+                        __typename: 'SplitGroup',
+                        name: 'Maintainers',
+                        list: project.splits.maintainers,
+                      },
+                      {
+                        __typename: 'SplitGroup',
+                        name: 'Dependencies',
+                        list: project.splits.dependencies,
+                      },
+                    ]}
+                  />
+                </div>
               </div>
             </div>
           </SectionSkeleton>
@@ -582,17 +584,15 @@
 
   .stats {
     width: calc(100% + 32px);
-    margin-left: -16px;
-    padding: 0 16px;
+    margin: -16px 0 -16px -16px;
+    padding: 16px;
     overflow: scroll;
     white-space: nowrap;
   }
 
   .stats .stat {
     display: inline-flex;
     padding: 1rem;
-    border: 1px solid var(--color-foreground);
-    border-radius: 1rem 0 1rem 1rem;
     min-height: 6.125rem;
   }
   .stats .stat + .stat {
@@ -610,10 +610,6 @@
     overflow: hidden;
   }
 
-  .outgoing-splits {
-    padding: 1.5rem;
-  }
-
   .unclaimed-funds-section {
     display: flex;
     flex-direction: column;

diff --git a/src/styles/app.css b/src/styles/app.css
@@ -16,6 +16,7 @@ body {
 * {
   transition: background-color 0.2s;
   font-feature-settings: 'ss02', 'calt' 0;
+  text-wrap: pretty;
 }
 
 ::selection {

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -14,3 +14,7 @@
 .btn-theme-transparent {
   @apply mouse:hover:bg-foreground-level-1 focus:bg-foreground-level-1 focus:ring-2 focus-visible:outline-none focus-visible:text-foreground focus:ring-foreground-level-4 transition duration-300;
 }
+
+.btn-theme-outlined {
+  @apply shadow-low rounded-drip-lg mouse:hover:shadow-md transform mouse:hover:-translate-y-[3px] transition duration-150 focus-visible:-translate-y-[3px] focus-visible:shadow-md focus-visible:outline-none;
+}