add hover states to links and buttons

16 files changed, 79 insertions, 55 deletions

diff --git a/src/app.css b/src/app.css
index 12619404..e13bec19 100644
--- a/src/app.css
+++ b/src/app.css
@@ -25,16 +25,17 @@ input {
 }
 
 button.primary {
-	@apply rounded-full border py-2 font-bold my-4 flex px-4 bg-white mx-auto hover:bg-primary;
+	@apply rounded-full border py-2 font-bold my-4 flex px-4 bg-white mx-auto hover:opacity-80;
 }
 
 .select-styles {
 	@apply border rounded-2xl py-4 px-5;
+	cursor: pointer;
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	background: transparent;
 	background-image: url('/icons/down.svg');
 	background-repeat: no-repeat;
-	background-position-x: 100%;
-	background-position-y: 0.7em;
+	background-position-x: 95%;
+	background-position-y: 1em;
 }
diff --git a/src/components/About.svelte b/src/components/About.svelte
index fb459ff8..912a4b83 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -84,7 +84,7 @@
 									href={social.url}
 									target="_blank"
 									rel="noreferrer"
-									class={`rounded-full p-2 ${social.color}`}
+									class={`rounded-full p-2 ${social.color} hover:opacity-80`}
 									><Icon icon={social.type} style="w-6" /></a
 								>
 							{/each}
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 22c18622..1ac72f87 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -42,7 +42,7 @@
 					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
 						.url.pathname === `/${$user.username}/receive`
 						? 'opacity-100'
-						: 'opacity-70'}"
+						: 'opacity-70 hover:opacity-80'}"
 					><Icon icon="numpad" style="mx-auto" />
 				</button>
 			</a>
@@ -51,7 +51,7 @@
 					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
 						.url.pathname === `/${$user.username}/transactions`
 						? 'opacity-100'
-						: 'opacity-70'} relative"
+						: 'opacity-70 hover:opacity-80'} relative"
 					><Icon icon="clock" style="mx-auto" />
 					{#if $newPayment}
 						<span class="absolute top-0 right-0">
@@ -70,7 +70,7 @@
 					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
 						.url.pathname === `/${$user.username}`
 						? 'opacity-100'
-						: 'opacity-70'}"
+						: 'opacity-70 hover:opacity-80'}"
 					><Icon icon="profile" style="mx-auto" />
 				</button>
 			</a>
@@ -82,7 +82,7 @@
 						$page.url.pathname === `/${$user.username}/settings` ||
 						$page.url.pathname === `/${$user.username}/support`
 							? 'opacity-100'
-							: 'opacity-70'}"
+							: `opacity-70 hover:opacity-80 ${showMenu ? 'opacity-80' : ''}`}"
 						on:click={() => (showMenu = !showMenu)}
 						><Icon icon="menu" style="mx-auto" />
 					</button>
@@ -96,7 +96,7 @@
 							{#each menuButtons as button}
 								<li>
 									<button
-										class="flex justify-center items-center font-semibold text-sm"
+										class="flex justify-center items-center font-semibold text-sm hover:opacity-80"
 										on:click={() => handleMenuItemClick(button.goto)}
 										><Icon icon={button.icon} style="mr-1" /> {$t(button.stringID)}
 									</button>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index a4006dc3..5e0aeb4a 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -21,7 +21,7 @@
 			<a href="/"><Icon icon="logo" style="w-48 mx-auto md:mx-0" /></a>
 		</div>
 		<div class="text-center">
-			<LocaleSelector style="p-2 rounded-md text-center" />
+			<LocaleSelector style="p-2 rounded-md text-center hover:opacity-80 cursor-pointer" />
 		</div>
 	</div>
 
@@ -30,7 +30,9 @@
 		<ul class="mt-5 text-secondary space-y-3 font-medium">
 			{#each followLinks as link}
 				<li>
-					<a href={link.url} target="_blank" rel="noreferrer">{$t('footer.' + link.titleID)}</a>
+					<a href={link.url} target="_blank" rel="noreferrer" class="hover:opacity-80"
+						>{$t('footer.' + link.titleID)}</a
+					>
 				</li>
 			{/each}
 		</ul>
@@ -40,7 +42,7 @@
 		<p class="font-semibold">{$t('footer.company')}</p>
 		<ul class="mt-5 text-secondary space-y-3">
 			{#each companyLinks as link}
-				<li><a href={link.url}>{$t('footer.' + link.titleID)}</a></li>
+				<li><a href={link.url} class="hover:opacity-80">{$t('footer.' + link.titleID)}</a></li>
 			{/each}
 		</ul>
 	</div>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 4508ad25..c979e2c8 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -27,15 +27,19 @@
 
 		<!-- desktop nav -->
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
-			<button on:click={() => scroll(howItWorks)}>{$t('howItWorks.header')}</button>
-			<button on:click={() => scroll(faq)}>{$t('faq.header')}</button>
-			<button on:click={() => scroll(about)}>{$t('about.header')}</button>
+			<button class="hover:opacity-80" on:click={() => scroll(howItWorks)}
+				>{$t('howItWorks.header')}</button
+			>
+			<button class="hover:opacity-80" on:click={() => scroll(faq)}>{$t('faq.header')}</button>
+			<button class="hover:opacity-80" on:click={() => scroll(about)}>{$t('about.header')}</button>
 			{#if !$user}
-				<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
+				<button
+					class="border rounded-full px-6 py-2 font-bold hover:opacity-80"
+					on:click={() => goto('/register')}
 					>{$t('nav.startInSeconds')}
 				</button>
 				<button
-					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
+					class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80"
 					on:click={() => goto('/login')}
 				>
 					{$t('nav.signIn')}
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 1415692e..6fcaf075 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -25,7 +25,7 @@
 		{#if !$user}
 			<div class="flex justify-center">
 				<button
-					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
+					class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80"
 					on:click={() => goto('/register')}
 				>
 					{$t('nav.startInSeconds')}
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index 96c7b02f..b615d42a 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -114,7 +114,9 @@
 					<!-- </div> -->
 				{/if}
 
-				<button type="submit" class="bg-black text-white w-full rounded-2xl p-4 font-semibold"
+				<button
+					type="submit"
+					class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80"
 					>{$t('login.' + pageID)}
 				</button>
 			</form>
@@ -123,7 +125,7 @@
 				{pageID === 'register' ? $t('login.haveAccount') : $t('login.noAccount')}
 				<a
 					href={pageID === 'register' ? '/login' : '/register'}
-					class="block md:inline text-black underline underline-offset-4"
+					class="block md:inline text-black underline underline-offset-4 hover:opacity-80"
 				>
 					{pageID === 'register' ? $t('login.signIn') : $t('login.register')}
 				</a>
diff --git a/src/locales/en.json b/src/locales/en.json
index d2521bbc..60e6b0b4 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -45,7 +45,7 @@
 		},
 		"locations": {
 			"header": "Locations",
-			"description": "These are businesses that are accepting bitcoin with coinos. If you are using our application, please <a href=\"mailto:[email protected]\" class=\"underline underline-offset-4\">let us know!</a>"
+			"description": "These are businesses that are accepting bitcoin with coinos. If you are using our application, please <a href=\"mailto:[email protected]\" class=\"underline underline-offset-4 hover:opacity-80\">let us know!</a>"
 		}
 	},
 	"error": {
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index 6544dc00..b84959f5 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -69,7 +69,7 @@
 					class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
 				>
 					<span>{lightningAddress}</span>
-					<button on:click={() => copy(lightningAddress)}>
+					<button class="hover:opacity-80" on:click={() => copy(lightningAddress)}>
 						<Icon icon="copy" style="ml-2" />
 					</button>
 				</div>
diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index 56c8571f..7e424819 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -70,11 +70,11 @@
 
 			<div class="md:flex md:space-x-5">
 				<button
-					class="rounded-full border py-2 px-5 font-bold mt-4 block md:inline hover:bg-primary"
+					class="rounded-full border py-2 px-5 font-bold mt-4 block md:inline hover:opacity-80"
 					on:click={() => goto(`/${user.username}/receive`)}>{$t('user.dashboard.receive')}</button
 				>
 				<button
-					class="rounded-full border py-2 px-5 font-bold mt-5 md:mt-4 hover:bg-primary"
+					class="rounded-full border py-2 px-5 font-bold mt-5 md:mt-4 hover:opacity-80"
 					on:click={toggle}>{$t('user.dashboard.withdraw')}</button
 				>
 			</div>
@@ -109,7 +109,7 @@
 					disabled={!payreq}
 					class="{!payreq
 						? 'opacity-50'
-						: 'opacity-100'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
+						: 'opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
 					on:click={withdraw}>{$t('user.dashboard.send')}</button
 				>
 			</div>
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index 68cf0d83..6a286071 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -132,7 +132,7 @@
 										: 0;
 							}
 							useFiat = !useFiat;
-						}}><Icon icon="swap" style="inline" /></button
+						}}><Icon icon="swap" style="inline hover:opacity-80" /></button
 					>
 				</div>
 
@@ -141,7 +141,7 @@
 					{#each numPad as value}
 						{#if value === '<'}
 							<button
-								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center"
+								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
 								on:click={() => handleInput(value)}
 							>
 								<svg
@@ -163,7 +163,7 @@
 							</button>
 						{:else}
 							<button
-								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white"
+								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
 								on:click={() => handleInput(value)}>{value}</button
 							>
 						{/if}
@@ -175,7 +175,7 @@
 						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
 							0 || loading
 							? 'opacity-50'
-							: 'opacity-100'}"
+							: 'opacity-100 hover:opacity-80'}"
 						on:click={submit}
 						disabled={$invoiceAmount === 0 || loading}
 					>
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index 4821d50a..e3acc93c 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -45,8 +45,10 @@
 
 		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
 			{#each tabs as { name, key }}
-				<button class:text-black={tab === name} on:click|preventDefault={() => (tab = name)}
-					>{$t(`user.settings.${key}`)}</button
+				<button
+					class="hover:opacity-80"
+					class:text-black={tab === name}
+					on:click|preventDefault={() => (tab = name)}>{$t(`user.settings.${key}`)}</button
 				>
 			{/each}
 		</div>
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index 8b9eeec5..dbaea87e 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -124,14 +124,20 @@
 	<span class="font-bold">{$t('user.settings.profileImage')}</span>
 	<div class="flex">
 		{#if profile}
-			<div class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto">
+			<div
+				class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
+				on:click={() => select('profile')}
+			>
 				<img
 					src={profile}
 					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
 				/>
 			</div>
 		{:else if $user.profile}
-			<div class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto">
+			<div
+				class="relative rounded-full overflow-hidden text-center w-20 h-20 my-auto hover:opacity-80 cursor-pointer"
+				on:click={() => select('profile')}
+			>
 				<img
 					src={`/api/public/${$user.username}-profile.png`}
 					class="absolute w-full h-full object-cover object-center visible overflow-hidden"
@@ -139,7 +145,8 @@
 			</div>
 		{:else}
 			<div
-				class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto"
+				class="rounded-full border-4 border-white p-4 bg-gradient-to-r {$colorTheme} w-24 my-auto hover:opacity-80 cursor-pointer"
+				on:click={() => select('profile')}
 			>
 				<Icon icon="logo-symbol-white" style="mx-auto" />
 			</div>
@@ -148,7 +155,7 @@
 			<!-- found missing translation -->
 			<button
 				type="button"
-				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary"
+				class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
 				on:click={() => select('profile')}>Select</button
 			>
 			<input
@@ -169,17 +176,22 @@
 		<span class="font-bold">{$t('user.settings.bannerImage')}</span>
 	</div>
 	<!-- found missing translation -->
-	<p class="text-secondary mb-4">Recommended size: 1920x175px</p>
+
 	{#if banner}
-		<img src={banner} class="w-full object-cover object-center visible overflow-hidden h-48 mb-4" />
+		<img
+			src={banner}
+			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
+			on:click={() => select('banner')}
+		/>
 	{:else if $user.banner}
 		<img
 			src={`/api/public/${$user.username}-banner.png`}
-			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4"
+			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
+			on:click={() => select('banner')}
 		/>
 	{:else}
 		<div
-			class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer"
+			class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer hover:opacity-80"
 			on:click={() => select('banner')}
 		/>
 	{/if}
@@ -187,7 +199,7 @@
 	<!-- found missing translation -->
 	<button
 		type="button"
-		class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:bg-primary"
+		class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
 		on:click={() => select('banner')}>Select</button
 	>
 	<input
@@ -207,7 +219,7 @@
 	{#each colorThemes as colors}
 		<button
 			type="button"
-			class="mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
+			class="hover:opacity-80 mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
 			colors.theme
 				? 'border-black'
 				: ''}"
diff --git a/src/routes/[username]/support/+page.svelte b/src/routes/[username]/support/+page.svelte
index e7341806..acaa8d2b 100644
--- a/src/routes/[username]/support/+page.svelte
+++ b/src/routes/[username]/support/+page.svelte
@@ -55,8 +55,10 @@
 				disabled={!email || !message}
 				class="{!email || !message
 					? 'opacity-50'
-					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto"
-				>{$t('user.support.send')}</button
+					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto {email &&
+				message
+					? 'hover:opacity-80'
+					: ''}">{$t('user.support.send')}</button
 			>
 		</form>
 	</div>
diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte
index d1480971..2e9cb70e 100644
--- a/src/routes/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/[username]/transactions/[...page]/+page.svelte
@@ -27,7 +27,7 @@
 			{#if pages.length > 1}
 				{#each pages as _, i}
 					<a href={`/${user.username}/transactions/${i + 1}`} class:active={page === i + 1}>
-						<div class="border py-2 px-4 border-r-0 last:border-r hover:bg-primary">
+						<div class="border py-2 px-4 border-r-0 last:border-r hover:opacity-80">
 							{i + 1}
 						</div>
 					</a>
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index d5c0282f..67cd8efa 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -157,7 +157,7 @@
 {#if $invoices[id]?.status !== 'paid'}
 	<div class:full-shadow={showMobileTip}>
 		<button
-			class="ml-5 md:ml-20 mt-5 md:mt-10"
+			class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80"
 			class:invisible={!$user}
 			disabled={showMobileTip}
 			on:click={handleBackButton}
@@ -233,14 +233,10 @@
 									placeholder="Other"
 								/>
 								<button
-									class="w-full mt-2 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
-										? !customTipAmount && !tipAmount
-											? 'opacity-50'
-											: 'opacity-100'
-										: !customTipAmount
+									class="w-full mt-2 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount
 										? 'opacity-50'
-										: 'opacity-100'}"
-									disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
+										: 'opacity-100 hover:opacity-80'}"
+									disabled={!customTipAmount}
 									on:click={apply}>Apply</button
 								>
 								<!-- found missing translation --->
@@ -300,11 +296,11 @@
 
 					<div>
 						<button
-							class="border border-lightgrey rounded-md p-2 mx-2 hover:bg-primary"
+							class="border border-lightgrey rounded-md p-2 mx-2 hover:opacity-80"
 							on:click={toggleFullscreen}><Icon icon="expand" /></button
 						>
 						<button
-							class="border border-lightgrey rounded-md p-2 mx-2 hover:bg-primary"
+							class="border border-lightgrey rounded-md p-2 mx-2 hover:opacity-80"
 							on:click={() => copy(text)}><Icon icon="copy" /></button
 						>
 					</div>
@@ -360,7 +356,10 @@
 			{totalAmountFormatted}
 		</h2>
 		<h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SAT)</h3>
-		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold" on:click={handleDoneClick}>
+		<button
+			class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
+			on:click={handleDoneClick}
+		>
 			{$t('invoice.done')}
 		</button>
 	</div>