From eaca25bd81039a9bfc6189928771543bebf9b778 Mon Sep 17 00:00:00 2001
From: Arne Pedersen <arne.lamo@gmail.com>
Date: Wed, 28 Dec 2022 15:03:00 +0100
Subject: [PATCH] Add icon hover color.

---
 src/components/header/index.tsx | 8 ++++----
 src/styles/global.css           | 4 ++++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index 155345c..c5982de 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -19,7 +19,7 @@ export function Header() {
 
     if (currentTheme === "dark") {
       return (
-        <button onClick={() => setTheme("light")}>
+        <button onClick={() => setTheme("light")} className="icon-hover">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -37,7 +37,7 @@ export function Header() {
       )
     } else {
       return (
-        <button onClick={() => setTheme("dark")}>
+        <button onClick={() => setTheme("dark")} className="icon-hover">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -65,11 +65,11 @@ export function Header() {
         >FAQ
         </Link> */}
           <a href="https://github.com/vilm3r/sendstr-web">
-            <DiGithubBadge className="inline text-3xl" title="Github" />
+            <DiGithubBadge className="inline text-3xl icon-hover" title="Github" />
           </a>
           <Link href="/settings">
             <div className="cursor-pointer">
-              <MdSettings className="inline text-2xl" title="Settings" />
+              <MdSettings className="inline text-2xl icon-hover" title="Settings" />
             </div>
           </Link>
           {renderThemeToggle()}
diff --git a/src/styles/global.css b/src/styles/global.css
index 419062a..8cf4f98 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -33,4 +33,8 @@
     .btn-main {
       @apply bg-primary rounded-md px-6 py-3 w-full h-full shadow text-gray-100 dark:text-gray-900 font-semibold
     }
+
+    .icon-hover {
+        @apply transition duration-300 hover:text-primary
+    }
   }