Frame as nudge, not bad

payjoin · Jan 14, 2024 · f0bae4a · f0bae4a
1 parent 2f7f39f
commit f0bae4a
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 6 deletions.
diff --git a/src/components/Icon/icons.ts b/src/components/Icon/icons.ts
@@ -11,6 +11,7 @@ import arrow from './svg/arrow.svg?raw';
 import check from './svg/check.svg?raw';
 import plus from './svg/plus.svg?raw';
 import minus from './svg/minus.svg?raw';
+import megaphone from './svg/megaphone.svg?raw';
 
 const icons = {
 	moon,
@@ -24,7 +25,8 @@ const icons = {
 	arrow,
 	check,
 	plus,
-	minus
+	minus,
+	megaphone
 };
 
 export type IconName = keyof typeof icons;

diff --git a/src/components/Icon/svg/megaphone.svg b/src/components/Icon/svg/megaphone.svg
diff --git a/src/components/LinkTag.svelte b/src/components/LinkTag.svelte
@@ -7,7 +7,7 @@
 <a
 	{href}
 	class={`${
-		bad ? 'bg-red-100' : 'bg-green-100'
+		bad ? 'bg-orange-100 cursor-text' : 'bg-green-100'
 	} no-underline rounded-xl px-3 p-2 hover:scale-105 transition-all duration-200 ease-in-out`}
 	target="_blank"
 	rel="noreferrer noopener"

diff --git a/src/features/WalletCard.svelte b/src/features/WalletCard.svelte
@@ -9,7 +9,7 @@
 <div class="flex-1">
 	<div
 		class={`flex gap-4 p-4 items-center rounded-3xl flex-wrap ${
-			bad ? 'bg-red-300' : 'bg-green-400'
+			bad ? 'bg-orange-300' : 'bg-green-400'
 		}`}
 	>
 		{#each wallets as { name, href }}

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -124,14 +124,14 @@ If there is a wallet you’d like to see adopt payjoin or you are a wallet devel
 	</div>
 	<div class="flex sm:flex-row flex-col gap-8 w-3/4">
 		<div class="flex flex-col gap-2 w-full items-center">
-			<H3 class="flex gap-2 items-center sm:flex-row flex-col"
+			<H3 class="flex gap-4 items-center sm:flex-row flex-col"
 				><Icon name="check" class="text-green-400 w-8 sm:w-4" />Supports Payjoin</H3
 			>
 			<WalletCard wallets={privateWallets} />
 		</div>
 		<div class="flex flex-col gap-2 w-full items-center">
-			<H3 class="flex flex-col sm:flex-row gap-2 items-center"
-				><Icon name="close" class="text-red-300 w-8 sm:w-4" />Needs a nudge</H3
+			<H3 class="flex flex-col sm:flex-row gap-4 items-center"
+				><Icon name="megaphone" class="text-orange-300 w-8 sm:w-4" />Needs a nudge</H3
 			>
 			<WalletCard bad wallets={surveillableWallets} />
 		</div>