From 25059a06eb98ab155ae03fc7e8f6bf9d22e4e709 Mon Sep 17 00:00:00 2001
From: Mohtasim Alam Sohom <94981761+codeblitz97@users.noreply.github.com>
Date: Mon, 18 Dec 2023 15:09:43 +0600
Subject: [PATCH] Add better hover effect

---
 components/Navbar.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 73acb7e4..59314fb9 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -50,7 +50,9 @@ const Navbar = () => {
           </div>
           {showModal && <Search setShowMainModal={setShowMainModal} showModal={showModal} />}
           <div className="hidden items-end gap-3 lg:flex">
-            <button onClick={handleModal} className="rounded hover:bg-primary-50 sm:bg-primary-25 sm:p-3">
+            <button
+              onClick={handleModal}
+              className="rounded grayscale transition duration-300 hover:bg-primary-50 hover:grayscale-0 sm:bg-primary-25 sm:p-3">
               <span>
                 <MagnifyingGlass size={20} color="#455468" />
               </span>
@@ -58,13 +60,13 @@ const Navbar = () => {
             <a
               href="https://github.com/StaticMania/keep-react"
               target="_blank"
-              className="rounded hover:bg-primary-50 sm:bg-primary-25 sm:p-3">
+              className="rounded grayscale transition duration-300 hover:bg-primary-50 hover:grayscale-0 sm:bg-primary-25 sm:p-3">
               <Image src="/images/icon/github.svg" height={20} width={20} alt="github" />
             </a>
             <a
               href="https://keep-storybook.vercel.app"
               target="_blank"
-              className="rounded hover:bg-primary-50 sm:bg-primary-25 sm:p-3">
+              className="rounded grayscale transition duration-300 hover:bg-primary-50 hover:grayscale-0 sm:bg-primary-25 sm:p-3">
               <svg
                 stroke="#FF4785"
                 fill="#FF4785"
@@ -80,7 +82,7 @@ const Navbar = () => {
             <a
               href="https://discord.gg/fSxDJyvJmr"
               target="_blank"
-              className="rounded hover:bg-primary-50 sm:bg-primary-25 sm:p-3">
+              className="rounded grayscale transition duration-300 hover:bg-primary-50 hover:grayscale-0 sm:bg-primary-25 sm:p-3">
               <Image src="/images/icon/discord.svg" height={20} width={20} alt="github" />
             </a>
             <Link
@@ -90,19 +92,21 @@ const Navbar = () => {
             </Link>
           </div>
           <div className="flex items-center justify-between gap-3 lg:hidden">
-            <button onClick={handleModal} className="sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
+            <button
+              onClick={handleModal}
+              className="grayscale transition duration-300 hover:grayscale-0 sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
               <MagnifyingGlass size={20} color="#455468" />
             </button>
             <a
               href="https://github.com/StaticMania/keep-react"
               target="_blank"
-              className="sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
+              className="grayscale transition duration-300 hover:grayscale-0 sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
               <Image src="/images/icon/github.svg" height={20} width={20} alt="github" />
             </a>
             <a
               href="https://keep-storybook.vercel.app"
               target="_blank"
-              className="sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
+              className="grayscale transition duration-300 hover:grayscale-0 sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
               <svg
                 stroke="#FF4785"
                 fill="#FF4785"
@@ -118,7 +122,7 @@ const Navbar = () => {
             <a
               href="https://discord.com/invite/xsNDwPks"
               target="_blank"
-              className="sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
+              className="grayscale transition duration-300 hover:grayscale-0 sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
               <Image src="/images/icon/discord.svg" height={20} width={20} alt="github" />
             </a>
             <button onClick={() => setActive(!active)}>