add hover states to links and buttons

6 files changed, 25 insertions, 17 deletions

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>