From 39f664fe638855256e23284c8a2ca10b6a5ee6ae Mon Sep 17 00:00:00 2001
From: yyb <yyb1033@icloud.com>
Date: Wed, 14 Aug 2024 23:42:25 +0800
Subject: [PATCH] fix: remove label & radio from color-select

---
 src/lib/Dark.tsx                      |  4 ++--
 src/pages/reader/tools/PenPanel.tsx   | 21 ++++++++-------------
 src/pages/reader/tools/pen-panel.sass |  9 +++------
 3 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/src/lib/Dark.tsx b/src/lib/Dark.tsx
index 2b695fd..2f7ceba 100644
--- a/src/lib/Dark.tsx
+++ b/src/lib/Dark.tsx
@@ -15,14 +15,14 @@ export const loadDarkMode = async () => {
     { brightness: 100, contrast: 100 },
     {
       ignoreInlineStyle: [
-        "label .circle",
+        ".color-select .circle",
         ".color-circle",
         ".pen-icon path",
         ".text-color-icon",
       ],
       invert: [
         // ".page-wrapper[data-preview=true] .draw-canvas",
-        "label .circle",
+        ".color-select .circle",
         ".width-circle.lineWidth",
         ".pen-icon",
         ".text-color-icon",
diff --git a/src/pages/reader/tools/PenPanel.tsx b/src/pages/reader/tools/PenPanel.tsx
index 7cf3b73..547fb10 100644
--- a/src/pages/reader/tools/PenPanel.tsx
+++ b/src/pages/reader/tools/PenPanel.tsx
@@ -155,19 +155,14 @@ export const ColorSelect: FC<{
 }> = ({ setColor, color }) => (
   <div className="color-select">
     {allColors.map((c) => (
-      <label key={c}>
-        <input
-          checked={color === c}
-          type="radio"
-          name="color"
-          onChange={(e) => e.target.checked && setColor(c)}
-        />
-        <div
-          data-color={c}
-          className="circle"
-          style={{ backgroundColor: c, borderColor: c }}
-        />
-      </label>
+      <div
+        key={c}
+        data-color={c}
+        data-selected={color === c}
+        className="circle"
+        style={{ backgroundColor: c, borderColor: c }}
+        onClick={() => setColor(c)}
+      />
     ))}
   </div>
 );
diff --git a/src/pages/reader/tools/pen-panel.sass b/src/pages/reader/tools/pen-panel.sass
index be3ac13..4b37cc2 100644
--- a/src/pages/reader/tools/pen-panel.sass
+++ b/src/pages/reader/tools/pen-panel.sass
@@ -90,12 +90,6 @@
   grid-template-columns: repeat(4, 1fr)
   gap: 10px 0
   place-items: center
-  input[type="radio"]
-    display: none
-    &:checked + .circle
-      border-width: 6px
-      // checked circle ring
-      background-color: #0000 !important
   .circle
     cursor: pointer
     width: 30px
@@ -105,6 +99,9 @@
     transition: all 0.2s
     &[data-color="#000000"]
       box-shadow: 0 0 0 1px #ddd
+    &[data-selected=true]
+      border-width: 6px
+      background-color: #0000 !important
 
 @media (prefers-color-scheme: dark)
   .ant-segmented-item-selected, .ant-segmented-thumb