From b495d1aa1b7a3f7f4d07298f4ebb4bec7d7c8abc Mon Sep 17 00:00:00 2001
From: Daniel Chew <cctdaniel@outlook.com>
Date: Thu, 27 Jun 2024 12:36:27 +0800
Subject: [PATCH 1/3] fix: hover not showing the right theme when on light mode

---
 components/CopyAddress.tsx |  7 ++++++-
 hooks/useTheme.ts          | 24 ++++++++++++++++++++++++
 styles/styles.css          |  8 ++++++++
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 hooks/useTheme.ts

diff --git a/components/CopyAddress.tsx b/components/CopyAddress.tsx
index b87b56c0..2f643133 100644
--- a/components/CopyAddress.tsx
+++ b/components/CopyAddress.tsx
@@ -1,10 +1,15 @@
 import copy from "copy-to-clipboard";
 import CopyIcon from "./icons/CopyIcon";
+import useTheme from "../hooks/useTheme";
 
 const CopyAddress = ({ address, url }: { address: string; url?: string }) => {
+  const isDarkMode = useTheme();
+
   return (
     <div
-      className="-ml-1 inline-flex cursor-pointer items-center px-1 font-mono hover:bg-dark hover:text-white active:bg-darkGray3"
+      className={`-ml-1 inline-flex cursor-pointer items-center px-1 font-mono ${
+        isDarkMode ? "hover-dark" : "hover-light"
+      }`}
       onClick={() => {
         copy(address);
       }}
diff --git a/hooks/useTheme.ts b/hooks/useTheme.ts
new file mode 100644
index 00000000..2d3feb2b
--- /dev/null
+++ b/hooks/useTheme.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+const useTheme = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    const htmlElement = document.documentElement;
+    const checkDarkMode = () =>
+      setIsDarkMode(htmlElement.classList.contains("dark"));
+
+    checkDarkMode(); // Initial check
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(htmlElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return isDarkMode;
+};
+
+export default useTheme;
diff --git a/styles/styles.css b/styles/styles.css
index 631807b7..2163105e 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -77,6 +77,14 @@
     @apply text-light !important;
   }
 
+  .hover-light {
+    @apply hover:bg-light hover:text-dark !important;
+  }
+
+  .hover-dark {
+    @apply hover:bg-dark hover:text-light !important;
+  }
+
   html[class~="dark"] {
     p,
     ul,

From d82bcbe7d5a25045501cca39a3d809d2e11d6c8b Mon Sep 17 00:00:00 2001
From: Daniel Chew <cctdaniel@outlook.com>
Date: Thu, 27 Jun 2024 12:47:46 +0800
Subject: [PATCH 2/3] address comments

---
 components/CopyAddress.tsx |  7 +------
 hooks/useTheme.ts          | 24 ------------------------
 2 files changed, 1 insertion(+), 30 deletions(-)
 delete mode 100644 hooks/useTheme.ts

diff --git a/components/CopyAddress.tsx b/components/CopyAddress.tsx
index 2f643133..955c6a82 100644
--- a/components/CopyAddress.tsx
+++ b/components/CopyAddress.tsx
@@ -1,15 +1,10 @@
 import copy from "copy-to-clipboard";
 import CopyIcon from "./icons/CopyIcon";
-import useTheme from "../hooks/useTheme";
 
 const CopyAddress = ({ address, url }: { address: string; url?: string }) => {
-  const isDarkMode = useTheme();
-
   return (
     <div
-      className={`-ml-1 inline-flex cursor-pointer items-center px-1 font-mono ${
-        isDarkMode ? "hover-dark" : "hover-light"
-      }`}
+      className="-ml-1 inline-flex cursor-pointer items-center px-1 font-mono hover-light dark:hover-dark"
       onClick={() => {
         copy(address);
       }}
diff --git a/hooks/useTheme.ts b/hooks/useTheme.ts
deleted file mode 100644
index 2d3feb2b..00000000
--- a/hooks/useTheme.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useEffect, useState } from "react";
-
-const useTheme = () => {
-  const [isDarkMode, setIsDarkMode] = useState(false);
-
-  useEffect(() => {
-    const htmlElement = document.documentElement;
-    const checkDarkMode = () =>
-      setIsDarkMode(htmlElement.classList.contains("dark"));
-
-    checkDarkMode(); // Initial check
-    const observer = new MutationObserver(checkDarkMode);
-    observer.observe(htmlElement, {
-      attributes: true,
-      attributeFilter: ["class"],
-    });
-
-    return () => observer.disconnect();
-  }, []);
-
-  return isDarkMode;
-};
-
-export default useTheme;

From c5e8b9cd5d5e313eb3f123780b6c61925ece8b86 Mon Sep 17 00:00:00 2001
From: Daniel Chew <cctdaniel@outlook.com>
Date: Thu, 27 Jun 2024 12:50:10 +0800
Subject: [PATCH 3/3] address comments

---
 components/CopyAddress.tsx | 2 +-
 styles/styles.css          | 8 --------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/components/CopyAddress.tsx b/components/CopyAddress.tsx
index 955c6a82..ce643cb5 100644
--- a/components/CopyAddress.tsx
+++ b/components/CopyAddress.tsx
@@ -4,7 +4,7 @@ import CopyIcon from "./icons/CopyIcon";
 const CopyAddress = ({ address, url }: { address: string; url?: string }) => {
   return (
     <div
-      className="-ml-1 inline-flex cursor-pointer items-center px-1 font-mono hover-light dark:hover-dark"
+      className="-ml-1 inline-flex cursor-pointer items-center px-1 font-mono hover:bg-light hover:text-dark dark:hover:bg-dark dark:hover:text-light"
       onClick={() => {
         copy(address);
       }}
diff --git a/styles/styles.css b/styles/styles.css
index 2163105e..631807b7 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -77,14 +77,6 @@
     @apply text-light !important;
   }
 
-  .hover-light {
-    @apply hover:bg-light hover:text-dark !important;
-  }
-
-  .hover-dark {
-    @apply hover:bg-dark hover:text-light !important;
-  }
-
   html[class~="dark"] {
     p,
     ul,