From 092372258b7d52cbfcb4283039bd1af4f89a3d5c Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Fri, 3 Feb 2023 12:37:06 +0000
Subject: [PATCH] feat: automatically generated hover color

---
 src/components/common/BlockchainInfo.tsx |  2 +-
 src/components/common/ConnectButton.tsx  |  4 ++--
 src/components/site/SiteArchives.tsx     |  4 ++--
 src/components/site/SiteHeader.tsx       | 17 ++++++++++++++---
 src/components/site/SiteHome.tsx         |  4 ++--
 src/css/variables.css                    |  1 +
 tailwind.config.js                       |  1 +
 7 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/common/BlockchainInfo.tsx b/src/components/common/BlockchainInfo.tsx
index f599f578..6cece1cb 100644
--- a/src/components/common/BlockchainInfo.tsx
+++ b/src/components/common/BlockchainInfo.tsx
@@ -17,7 +17,7 @@ export const BlockchainInfo: React.FC<{
         {({ open }: { open: boolean }) => (
           <>
             <Disclosure.Button
-              className="flex w-full justify-between rounded-lg px-4 py-2 text-left text-gray-900 hover:bg-zinc-100 transition-colors md:rounded-xl"
+              className="flex w-full justify-between rounded-lg px-4 py-2 text-left text-gray-900 hover:bg-hover transition-colors md:rounded-xl"
               aria-label="toggle chain info"
             >
               <span>
diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index 8386e8c6..65f22247 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -207,7 +207,7 @@ export const ConnectButton: React.FC<{
                       {InsufficientBalance && (
                         <UniLink
                           href="https://faucet.crossbell.io/"
-                          className="text-red-600 px-4 h-8 flex items-center w-full whitespace-nowrap hover:bg-zinc-100"
+                          className="text-red-600 px-4 h-8 flex items-center w-full whitespace-nowrap hover:bg-hover"
                         >
                           <span className="mr-2 fill-red-600 i-bxs:bell"></span>
                           Insufficient $CSB balance ({balance?.formatted})
@@ -223,7 +223,7 @@ export const ConnectButton: React.FC<{
                               size === "base"
                                 ? "pl-5 pr-6 h-11"
                                 : "pl-4 pr-5 h-9"
-                            } flex items-center w-full whitespace-nowrap hover:bg-zinc-100`}
+                            } flex items-center w-full whitespace-nowrap hover:bg-hover`}
                             aria-label={link.label}
                           >
                             <span className="mr-2 flex justify-center">
diff --git a/src/components/site/SiteArchives.tsx b/src/components/site/SiteArchives.tsx
index b4b16417..20ae89da 100644
--- a/src/components/site/SiteArchives.tsx
+++ b/src/components/site/SiteArchives.tsx
@@ -103,7 +103,7 @@ export const SiteArchives: React.FC<{
                       <Link
                         key={post.id}
                         href={`/${post.slug || post.id}`}
-                        className="flex justify-between items-center p-2 rounded-lg -mx-2 hover:bg-zinc-100"
+                        className="flex justify-between items-center p-2 rounded-lg -mx-2 hover:bg-hover"
                       >
                         <span className="text-zinc-700">{post.title}</span>
                         <span className="text-zinc-400 mr-3 whitespace-nowrap">
@@ -117,7 +117,7 @@ export const SiteArchives: React.FC<{
             })}
             {hasNextPage && (
               <Button
-                className="mt-8 w-full hover:bg-zinc-100 bg-zinc-50 transition-colors text-sm"
+                className="mt-8 w-full hover:bg-hover bg-zinc-50 transition-colors text-sm"
                 variant="text"
                 onClick={fetchNextPage}
                 isLoading={isFetchingNextPage}
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index 52f6bbe2..9ae64423 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -96,14 +96,15 @@ export const SiteHeader: React.FC<{
   const bannerRef = useRef<HTMLImageElement | HTMLVideoElement>(null)
 
   const [averageColor, setAverageColor] = useState<string>()
+  const [hoverColor, setHoverColor] = useState<string>()
 
   useEffect(() => {
     if (bannerRef?.current) {
-      console.log(bannerRef?.current)
       fac
         .getColorAsync(bannerRef.current)
         .then((color) => {
           setAverageColor(chroma(color.hex).hex())
+          setHoverColor(chroma(color.hex).luminance(0.9).hex())
         })
         .catch((e) => {
           console.warn(e)
@@ -113,6 +114,7 @@ export const SiteHeader: React.FC<{
         .getColorAsync(avatarRef.current)
         .then((color) => {
           setAverageColor(chroma(color.hex).luminance(0.95).hex())
+          setHoverColor(chroma(color.hex).luminance(0.9).hex())
         })
         .catch((e) => {
           console.warn(e)
@@ -122,10 +124,19 @@ export const SiteHeader: React.FC<{
 
   return (
     <header className="xlog-header border-b border-zinc-100 relative">
+      {averageColor && (
+        <style jsx global>{`
+          :root {
+            --hover-color: ${hoverColor};
+          }
+        `}</style>
+      )}
       <div
         className="xlog-banner absolute top-0 bottom-0 left-0 right-0 -z-10 overflow-hidden"
         style={{
-          backgroundColor: `var(--banner-bg-color, ${averageColor})`,
+          backgroundColor: averageColor
+            ? `var(--banner-bg-color, ${averageColor})`
+            : undefined,
         }}
       >
         {(() => {
@@ -202,7 +213,7 @@ export const SiteHeader: React.FC<{
                               <UniLink
                                 key={item.text}
                                 href={item.url}
-                                className="h-10 flex w-full space-x-2 items-center px-3 hover:bg-gray-100"
+                                className="h-10 flex w-full space-x-2 items-center px-3 hover:bg-hover"
                               >
                                 <span className="fill-gray-500 flex">
                                   {item.icon}
diff --git a/src/components/site/SiteHome.tsx b/src/components/site/SiteHome.tsx
index ff3f226c..80a5fa3f 100644
--- a/src/components/site/SiteHome.tsx
+++ b/src/components/site/SiteHome.tsx
@@ -38,7 +38,7 @@ export const SiteHome: React.FC<{
                 <Link
                   key={post.id}
                   href={`/${post.slug || post.id}`}
-                  className="xlog-post sm:hover:bg-zinc-100 bg-white transition-colors px-5 py-7 -mx-5 first:-mt-5 sm:rounded-xl flex flex-col sm:flex-row items-center"
+                  className="xlog-post sm:hover:bg-hover bg-white transition-all px-5 py-7 -mx-5 first:-mt-5 sm:rounded-xl flex flex-col sm:flex-row items-center"
                 >
                   <div className="flex-1 flex justify-center flex-col w-full min-w-0">
                     <h3 className="xlog-post-title text-2xl font-bold">
@@ -108,7 +108,7 @@ export const SiteHome: React.FC<{
       )}
       {hasNextPage && (
         <Button
-          className="mt-8 w-full hover:bg-zinc-100 bg-zinc-50 transition-colors text-sm"
+          className="mt-8 w-full hover:bg-hover bg-zinc-50 transition-colors text-sm"
           variant="text"
           onClick={fetchNextPage}
           isLoading={isFetchingNextPage}
diff --git a/src/css/variables.css b/src/css/variables.css
index 58f7e274..2ef0c70f 100644
--- a/src/css/variables.css
+++ b/src/css/variables.css
@@ -8,4 +8,5 @@
   --header-height: auto;
   /* Accent color for form controls */
   accent-color: var(--theme-color);
+  --hover-color: theme("colors.zinc.100");
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 035e543d..f8a119c6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,7 @@ module.exports = {
         border: "var(--border-color)",
         accent: "var(--theme-color)",
         "accent-emphasis": "var(--theme-color-emphasis)",
+        hover: "var(--hover-color)",
       },
       spacing: {
         sidebar: `240px`,