From d38f273fb967642191fcd7de30cf8925cdf0d3df Mon Sep 17 00:00:00 2001 From: Everett Date: Fri, 26 Apr 2024 14:35:23 +0200 Subject: [PATCH] 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 --- .../project-customizer.svelte | 8 +-- .../components/tabbed-box/tabbed-box.svelte | 6 +- .../create-drip-list-stream-steps.ts | 2 +- .../create-stream-flow/input-details.svelte | 2 +- .../(app)/drip-lists/[listId]/+page.svelte | 2 +- .../project-profile/project-profile.svelte | 56 +++++++++---------- src/styles/app.css | 1 + src/styles/tailwind.css | 4 ++ 8 files changed, 40 insertions(+), 41 deletions(-) diff --git a/src/lib/components/project-customizer/project-customizer.svelte b/src/lib/components/project-customizer/project-customizer.svelte index 010754d3b..732b78742 100644 --- 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 @@ /> - +
diff --git a/src/lib/components/tabbed-box/tabbed-box.svelte b/src/lib/components/tabbed-box/tabbed-box.svelte index 5c02c71fc..ca5c62fa8 100644 --- 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'; -
+
.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 index 7060e7fec..0d6e9364c 100644 --- 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 index 84c50b3b3..dbd03474e 100644 --- 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} /> {#if !nameInputHidden} diff --git a/src/routes/app/(app)/drip-lists/[listId]/+page.svelte b/src/routes/app/(app)/drip-lists/[listId]/+page.svelte index 22d8b4ac1..a327b85ae 100644 --- a/src/routes/app/(app)/drip-lists/[listId]/+page.svelte +++ b/src/routes/app/(app)/drip-lists/[listId]/+page.svelte @@ -106,7 +106,7 @@ 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,12 +380,12 @@ {#await earnedFunds}
@@ -393,7 +393,7 @@ {:then earnedFundsResult}
{#if earnedFundsResult} -
+
@@ -401,7 +401,7 @@ {/if} {#if [project.support].flat().length > 0} - + @@ -409,7 +409,7 @@ {/if} {#if [project.splits.maintainers, project.splits.dependencies].flat().length > 0} - +
-
+
- +
+ +
@@ -582,8 +584,8 @@ .stats { width: calc(100% + 32px); - margin-left: -16px; - padding: 0 16px; + margin: -16px 0 -16px -16px; + padding: 16px; overflow: scroll; white-space: nowrap; } @@ -591,8 +593,6 @@ .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 index 53dca8a8c..8ec35b1c6 100644 --- 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 index c515b0187..ac0f0ec38 100644 --- 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; +}