From 55f3cd649f9e89d374fa36f008220453bb3fc7e0 Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Fri, 17 Feb 2023 10:52:42 -0600
Subject: [PATCH] Fix Grommet Icons stroke not being provided by currentColor

- Improve dark-mode placeholder text color
---
 src/components/render/DisplayIconSingle.tsx | 4 ++--
 src/pages/index.tsx                         | 2 +-
 src/styles/globals.scss                     | 6 ++++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/render/DisplayIconSingle.tsx b/src/components/render/DisplayIconSingle.tsx
index 4753761..a2c6eff 100644
--- a/src/components/render/DisplayIconSingle.tsx
+++ b/src/components/render/DisplayIconSingle.tsx
@@ -32,7 +32,7 @@ const IconInternal: FunctionComponent<IconInternalProps> = ({label, children, on
 const DisplayIconSingle: FunctionComponent<DisplayIconSingleProps> = ({setId, id}) => {
     // eslint-disable-next-line
     const IconSet = loadable.lib(() => getIcons(setId));
-    const iconClass = "text-slate-700 dark:text-slate-200 group-hover:text-slate-900 group-hover:scale-125 transition-transform w-8 h-8";
+    const iconClass = "text-slate-700 stroke-slate-700 dark:text-slate-200 dark:stroke-slate-200 group-hover:text-slate-900 group-hover:scale-125 transition-transform w-8 h-8";
 
     return <IconSet fallback={<IconInternal label="...">
         <BsQuestionCircle className={iconClass}/>
@@ -42,7 +42,7 @@ const DisplayIconSingle: FunctionComponent<DisplayIconSingleProps> = ({setId, id
             return <IconInternal label={id} onClick={() => {
                 void navigator.clipboard.writeText(`import {${id}} from "react-icons/${setId}";`)
             }}>
-                <Icon className={iconClass}/>
+                <Icon className={classNames(iconClass, setId === 'gr' ? 'forceStroke' : null)}/>
             </IconInternal>
 
         }}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 153bc89..487bc4c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -75,7 +75,7 @@ const Home: NextPage = () => {
                     <input
                         ref={searchRef}
                         autoFocus
-                        className="placeholder:text-zinc-400 dark:text-zinc-200 dark:placeholder:text-zinc-300 grow bg-transparent ring-0 outline-none text-xl"
+                        className="placeholder:text-zinc-400 dark:text-zinc-200 dark:placeholder:text-zinc-400 grow bg-transparent ring-0 outline-none text-xl"
                         placeholder="Search for an icon..."
                         onChange={({target: {value}}) => setQuery(value)}
                         value={query}
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 4b71430..9b6fe92 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -14,4 +14,10 @@ html {
 code {
     font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
     Bitstream Vera Sans Mono, Courier New, monospace;
+}
+
+.forceStroke {
+    > path, g {
+        stroke: currentColor;
+    }
 }
\ No newline at end of file