From e4cd8e5cc1980dca5b271097431aa3a8c1435c97 Mon Sep 17 00:00:00 2001
From: mrmissx <hi@mrmiss.dev>
Date: Thu, 14 Sep 2023 15:55:08 +0700
Subject: [PATCH] fix(navigation): remove tap highligt color

---
 src/app.css                                | 17 +++++++++++++++--
 src/lib/components/HelperButton.svelte     |  2 +-
 src/lib/components/NavigationButton.svelte |  4 ++--
 src/lib/components/ScrollHome.svelte       |  2 +-
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/app.css b/src/app.css
index 18b4b86..ed8dc44 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,9 +1,9 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap");
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap");
+
 html {
   scroll-behavior: smooth;
 }
@@ -19,6 +19,19 @@ html {
     @apply text-zinc-900;
     @apply dark:text-zinc-100;
   }
+
+  .nav-button {
+    -webkit-tap-highlight-color: transparent;
+    @apply hover:scale-125;
+    @apply transform;
+    @apply transition-all;
+    @apply duration-300;
+    @apply ease-in-out;
+    @apply text-zinc-500;
+    @apply dark:text-zinc-400;
+    @apply hover:text-zinc-700;
+    @apply hover:dark:text-zinc-200;
+  }
 }
 
 ::-webkit-scrollbar {
diff --git a/src/lib/components/HelperButton.svelte b/src/lib/components/HelperButton.svelte
index f180358..1a79214 100644
--- a/src/lib/components/HelperButton.svelte
+++ b/src/lib/components/HelperButton.svelte
@@ -31,7 +31,7 @@
 <button
   use:clickOutside={() => (helperActive = false)}
   on:click|preventDefault={() => (helperActive = !helperActive)}
-  class="fixed bottom-5 right-5 text-zinc-500 dark:text-zinc-400 hover:scale-125 transform transition-all duration-200 ease-in-out"
+  class="fixed bottom-5 right-5 nav-button"
   aria-label="more info"
 >
   <svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 24 24">
diff --git a/src/lib/components/NavigationButton.svelte b/src/lib/components/NavigationButton.svelte
index 1213288..d5fa088 100644
--- a/src/lib/components/NavigationButton.svelte
+++ b/src/lib/components/NavigationButton.svelte
@@ -45,7 +45,7 @@
     <button
       disabled={navButtonDisabled[0]}
       id="prev"
-      class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 hover:dark:text-zinc-200 w-7 h-w-7 hover:scale-125 transform transition-all duration-300 ease-in-out"
+      class="w-7 h-w-7 nav-button"
       aria-label="back to top"
       on:click={() => scrollTo("prev")}
     >
@@ -54,7 +54,7 @@
     <button
       disabled={navButtonDisabled[1]}
       id="next"
-      class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 hover:dark:text-zinc-200 w-7 h-w-7 hover:scale-125 transform transition-all duration-300 ease-in-out"
+      class="w-7 h-w-7 nav-button"
       aria-label="back to top"
       on:click={() => scrollTo("next")}
     >
diff --git a/src/lib/components/ScrollHome.svelte b/src/lib/components/ScrollHome.svelte
index 25a06a8..fa9f110 100644
--- a/src/lib/components/ScrollHome.svelte
+++ b/src/lib/components/ScrollHome.svelte
@@ -15,7 +15,7 @@
 
 <button
   class:hidden
-  class="fixed z-50 left-5 bottom-8 w-8 md:w-10 h-8 md:h-10 text-zinc-500 dark:text-zinc-400 hover:scale-125 transform transition-all duration-300 ease-in-out"
+  class="fixed z-50 left-5 bottom-5 w-8 md:w-10 h-8 md:h-10 nav-button"
   aria-label="back to top"
   on:click={redirectHome}
 >