From 8672675a52282d2146f3ee7abfee18963e385b9b Mon Sep 17 00:00:00 2001
From: r-freeman <hello@ryanfreeman.dev>
Date: Thu, 2 Feb 2023 20:57:26 +0000
Subject: [PATCH] Updated styling of icons on projects page

---
 components/SocialLink.tsx | 14 ++++++++++++--
 package-lock.json         | 13 ++++++++++++-
 package.json              |  7 ++++---
 pages/projects.tsx        |  4 ++--
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/components/SocialLink.tsx b/components/SocialLink.tsx
index 1ab7659..c0ae533 100644
--- a/components/SocialLink.tsx
+++ b/components/SocialLink.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import {ElementType} from 'react'
-import clsx from 'clsx'
+import {twMerge} from 'tailwind-merge'
 
 type SocialLink = {
     href: string
@@ -10,10 +10,20 @@ type SocialLink = {
 }
 
 export function SocialLink({icon: Icon, href, ariaLabel, className}: SocialLink) {
+    const iconStyles = twMerge(`
+        w-6 h-6
+        fill-zinc-500
+        transition
+        group-hover:fill-zinc-600
+        dark:fill-zinc-400
+        dark:group-hover:fill-zinc-300
+        ${className ?? ""}
+    `)
+
     return (
         <Link className="group -m-1 p-1" href={href} aria-label={ariaLabel}>
             <Icon
-                className={clsx(className, "w-6 h-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300")}/>
+                className={iconStyles}/>
         </Link>
     )
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e624ce8..3a3df57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,11 +34,12 @@
         "remark-gfm": "^3.0.1",
         "sharp": "^0.31.3",
         "swr": "^2.0.0",
-        "tailwindcss": "^3.2.4"
+        "tailwind-merge": "^1.9.0"
       },
       "devDependencies": {
         "@types/node": "^18.11.18",
         "prisma": "^4.8.1",
+        "tailwindcss": "^3.2.4",
         "ts-node": "^10.9.1",
         "typescript": "4.9.4"
       }
@@ -8637,6 +8638,11 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.9.0.tgz",
+      "integrity": "sha512-coziXxViLHbVtFvD1+jwSu+UmDJSFX4dhj9ZuqHCuhTzu9Wk5wMedAz5AVY3uUYw95TaO7NwgUS/dLGcWvtgqw=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
@@ -16005,6 +16011,11 @@
         "tslib": "^2.4.0"
       }
     },
+    "tailwind-merge": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.9.0.tgz",
+      "integrity": "sha512-coziXxViLHbVtFvD1+jwSu+UmDJSFX4dhj9ZuqHCuhTzu9Wk5wMedAz5AVY3uUYw95TaO7NwgUS/dLGcWvtgqw=="
+    },
     "tailwindcss": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
diff --git a/package.json b/package.json
index b3b25f4..dd20910 100644
--- a/package.json
+++ b/package.json
@@ -35,13 +35,14 @@
     "react-dom": "18.2.0",
     "remark-gfm": "^3.0.1",
     "sharp": "^0.31.3",
-    "swr": "^2.0.0"
+    "swr": "^2.0.0",
+    "tailwind-merge": "^1.9.0"
   },
   "devDependencies": {
     "@types/node": "^18.11.18",
     "prisma": "^4.8.1",
+    "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.1",
-    "typescript": "4.9.4",
-    "tailwindcss": "^3.2.4"
+    "typescript": "4.9.4"
   }
 }
diff --git a/pages/projects.tsx b/pages/projects.tsx
index 2f72e2a..5d20958 100644
--- a/pages/projects.tsx
+++ b/pages/projects.tsx
@@ -58,7 +58,7 @@ export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
                                             href={repo.url}
                                             ariaLabel={`Star ${repo.name} on GitHub`}
                                             icon={StarIcon}
-                                            className={'w-5 h-5'}
+                                            className={'w-5 h-5 group-hover:fill-zinc-500 dark:group-hover:fill-zinc-400'}
                                         />
                                     </p>
                                     <p className="relative z-10 flex items-center">
@@ -67,7 +67,7 @@ export default function Projects({pinnedRepos}: { pinnedRepos: Repo[] }) {
                                             href={repo.url}
                                             ariaLabel={`Fork ${repo.name} on GitHub`}
                                             icon={ForkIcon}
-                                            className={'w-5 h-5'}
+                                            className={'w-5 h-5 group-hover:fill-zinc-500 dark:group-hover:fill-zinc-400'}
                                         />
                                     </p>
                                 </div>