feat: less pink text + don't default animate arrow

payjoin · Nov 22, 2023 · 9e90d3d · 9e90d3d
1 parent 7a65144
commit 9e90d3d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 38 deletions.
diff --git a/src/components/Link.svelte b/src/components/Link.svelte
@@ -5,23 +5,19 @@
 	export let href = '#';
 	export let target = '_self';
 	export let icon: IconName | undefined = undefined;
+	export let textwhite = false;
 	$: rel = target === '_blank' ? 'noopener noreferrer' : '';
+
+	$: clazz = `${
+		textwhite ? 'text-white hover:text-primary' : 'text-primary hover:text-pink-300'
+	} transition-all inline`;
 </script>
 
-<a {href} {target} {rel}>
+<a class={clazz} {href} {target} {rel}>
 	<span class="inline-flex gap-2 items-center">
 		<slot />
 		{#if icon}
 			<Icon name={icon} class="flex h-6" />
 		{/if}
 	</span>
 </a>
-
-<style lang="postcss">
-	a:hover {
-		@apply dark:text-pink-300 text-pink-800 transition-all;
-	}
-	a {
-		@apply text-primary transition-all inline;
-	}
-</style>
diff --git a/src/features/Nav.svelte b/src/features/Nav.svelte
@@ -47,13 +47,13 @@
 		<a class="flex gap-2 items-center" href="/"><Icon name="monad" />Payjoin</a>
 	</h3>
 	<ul class="hidden justify-end gap-4 items-center text-xl md:flex">
-		<li><Link href="#why">Why</Link></li>
-		<li><Link href="#ux">Demo</Link></li>
-		<li><Link href="#privacy">Privacy</Link></li>
-		<li><Link href="#how-to">How to</Link></li>
-		<li><Link href="#adoption">Supporting Wallets</Link></li>
-		<li><Link href="#future-plans">Future Plans</Link></li>
-		<li><Link href="#get-involved">Get Involved</Link></li>
+		<li><Link textwhite href="#why">Why</Link></li>
+		<li><Link textwhite href="#ux">Demo</Link></li>
+		<li><Link textwhite href="#privacy">Privacy</Link></li>
+		<li><Link textwhite href="#how-to">How to</Link></li>
+		<li><Link textwhite href="#adoption">Supporting Wallets</Link></li>
+		<li><Link textwhite href="#future-plans">Future Plans</Link></li>
+		<li><Link textwhite href="#get-involved">Get Involved</Link></li>
 		<!-- TODO: light mode styling -->
 		<!-- <li><button on:click={toggleDarkMode}><Icon name="moon" /></button></li> -->
 	</ul>

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

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -36,7 +36,10 @@
 			</H5>
 		</div>
 
-		<a href="#why" class="flex flex-col gap-4 justify-center animate-smooth-bounce">
+		<a
+			href="#why"
+			class="flex flex-col gap-4 justify-center hover:translate-y-2 duration-200 transition-all"
+		>
 			<p class="text-primary">Why Payjoin?</p>
 			<Icon class="h-20 flex justify-center " name="arrowJoin" />
 		</a>
@@ -78,10 +81,10 @@
 				</div>
 			</div>
 		</div>
-		<div class="flex flex-col text-primary gap-4">
+		<div class="flex flex-col gap-4">
 			<div class="flex gap-2 items-center">
-				<Icon class="flex h-10 " name="monad" />
-				<H2 colorClass="text-primary">The Solution</H2>
+				<Icon class="flex h-10 text-primary" name="monad" />
+				<H2>The Solution</H2>
 			</div>
 			<p>
 				Payjoin joins sender and receiver inputs in the one transaction. Batching like this reduces
@@ -95,21 +98,21 @@
 			</p>
 			<div class="flex flex-col md:grid grid-cols-3 gap-8">
 				<div>
-					<H3 colorClass="text-primary">Privacy Enhanced</H3>
+					<H3>Privacy Enhanced</H3>
 					<p>
 						By cleverly taking advantage of transaction structure, payjoin allows for enhanced
 						privacy for everyone ― even for those who don’t use it ― foiling chain surveillance.
 					</p>
 				</div>
 				<div>
-					<H3 colorClass="text-primary">Scaling Upgraded</H3>
+					<H3>Scaling Upgraded</H3>
 					<p>
 						Payjoin settles many transfers together in one transaction, saving time spent waiting
 						for block confirmations and enabling higher throughput.
 					</p>
 				</div>
 				<div>
-					<H3 colorClass="text-primary">Fees Saved</H3>
+					<H3>Fees Saved</H3>
 					<p>
 						As a byproduct of the scaling improvements, the many transfers inside each payjoin share
 						the fees of a single transaction.
@@ -119,8 +122,8 @@
 		</div>
 		<div>
 			<H2 class="inline-flex items-end gap-2"
-				>Lightning Compatible <Icon name="lightning" class="flex w-8 text-primary" /></H2
-			>
+				><Icon name="lightning" class="flex w-8 text-primary" /> Lightning Compatible
+			</H2>
 			<H3><i>Open all your channels at once</i></H3>
 			<p>Combining payjoin with the Lightning Network opens up new possibilities for bitcoin.</p>
 			<p>With payjoin, lightning nodes could:</p>
@@ -134,17 +137,6 @@
 			> project for an example.
 		</div>
 	</section>
-	<!-- <section>
-		<H2>How to Payjoin</H2>
-		<H3>Scan a Unified QR Code</H3>
-		<p>
-			This is a <Link href="https://bitcoinqr.dev/" target="_blank">BIP21 unified URI</Link> with a payjoin
-			parameter. Even if a wallet does not support payjoin, it can still fall back to the address to
-			make a successful transfer. This particular BIP21 will go to to payjoin.org’s cold wallet. By using
-			payjoin, you can get a unique address for your support to keep that private. Yes, even though we
-			use a cold wallet. Cool ❄️!
-		</p>
-	</section> -->
 	<section id="ux" class="flex gap-4 flex-col pt-24">
 		<div>
 			<div class="flex-1">