add hover states to links and buttons

8 files changed, 49 insertions, 34 deletions

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>