From 7c85e50c4597f6ed0a19384916ea6ef1bb3974a5 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Tue, 18 Oct 2022 21:22:41 +0800
Subject: [PATCH] fix(console): checkbox styles

---
 .../assets/images/check-box-selected-dark.svg    |  4 ++++
 .../assets/images/check-box-unselected-dark.svg  |  4 +---
 .../check-box-unselected-disabled-dark.svg       | 16 ++++------------
 .../images/check-box-unselected-disabled.svg     |  8 ++------
 .../src/assets/images/check-box-unselected.svg   |  4 +---
 .../console/src/components/Checkbox/Icon.tsx     |  3 ++-
 6 files changed, 14 insertions(+), 25 deletions(-)
 create mode 100644 packages/console/src/assets/images/check-box-selected-dark.svg

diff --git a/packages/console/src/assets/images/check-box-selected-dark.svg b/packages/console/src/assets/images/check-box-selected-dark.svg
new file mode 100644
index 000000000..462af9a6c
--- /dev/null
+++ b/packages/console/src/assets/images/check-box-selected-dark.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.66602" y="1.66663" width="16.6667" height="16.6667" rx="4" fill="#7958FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.31476 13.858L5.13295 10.441C4.95568 10.253 4.95568 9.947 5.13295 9.757L5.77568 9.074C5.95295 8.886 6.24113 8.886 6.4184 9.074L8.63657 11.466L13.5811 6.141C13.7584 5.953 14.0465 5.953 14.2238 6.141L14.8665 6.825C15.0438 7.013 15.0438 7.32 14.8665 7.507L8.95748 13.858C8.78021 14.046 8.49203 14.046 8.31476 13.858Z" fill="white"/>
+</svg>
diff --git a/packages/console/src/assets/images/check-box-unselected-dark.svg b/packages/console/src/assets/images/check-box-unselected-dark.svg
index da9a4cc12..3072054cd 100644
--- a/packages/console/src/assets/images/check-box-unselected-dark.svg
+++ b/packages/console/src/assets/images/check-box-unselected-dark.svg
@@ -1,5 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fillRule="evenodd" clipRule="evenodd"
-    d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z"
-    fill="#A9ACAC" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z" fill="#A9ACAC"/>
 </svg>
diff --git a/packages/console/src/assets/images/check-box-unselected-disabled-dark.svg b/packages/console/src/assets/images/check-box-unselected-disabled-dark.svg
index eedb62d3a..773f24303 100644
--- a/packages/console/src/assets/images/check-box-unselected-disabled-dark.svg
+++ b/packages/console/src/assets/images/check-box-unselected-disabled-dark.svg
@@ -1,14 +1,6 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z"
-    fill="#191C1D" />
-  <path
-    d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z"
-    fill="#C4C7C7" fillOpacity="0.02" />
-  <path
-    d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z"
-    fill="#CABEFF" fillOpacity="0.14" />
-  <path fillRule="evenodd" clipRule="evenodd"
-    d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z"
-    fill="#5C5F60" />
+<path d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z" fill="#191C1D"/>
+<path d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z" fill="#C4C7C7" fill-opacity="0.02"/>
+<path d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z" fill="#CABEFF" fill-opacity="0.14"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z" fill="#5C5F60"/>
 </svg>
diff --git a/packages/console/src/assets/images/check-box-unselected-disabled.svg b/packages/console/src/assets/images/check-box-unselected-disabled.svg
index b3c477b6f..7df385ca1 100644
--- a/packages/console/src/assets/images/check-box-unselected-disabled.svg
+++ b/packages/console/src/assets/images/check-box-unselected-disabled.svg
@@ -1,8 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z"
-    fill="#EFF1F1" />
-  <path fillRule="evenodd" clipRule="evenodd"
-    d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z"
-    fill="#C4C7C7" />
+<path d="M1.66602 4.75305C1.66602 3.04847 3.04785 1.66663 4.75244 1.66663H15.2463C16.9508 1.66663 18.3327 3.04846 18.3327 4.75305V15.2469C18.3327 16.9515 16.9508 18.3333 15.2463 18.3333H4.75244C3.04786 18.3333 1.66602 16.9515 1.66602 15.2469V4.75305Z" fill="#EFF1F1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z" fill="#C4C7C7"/>
 </svg>
diff --git a/packages/console/src/assets/images/check-box-unselected.svg b/packages/console/src/assets/images/check-box-unselected.svg
index ed74428e8..8d961e421 100644
--- a/packages/console/src/assets/images/check-box-unselected.svg
+++ b/packages/console/src/assets/images/check-box-unselected.svg
@@ -1,5 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fillRule="evenodd" clipRule="evenodd"
-    d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z"
-    fill="#747778" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2463 3.20984H4.75244C3.90015 3.20984 3.20923 3.90076 3.20923 4.75305V15.2469C3.20923 16.0992 3.90015 16.7901 4.75244 16.7901H15.2463C16.0986 16.7901 16.7895 16.0992 16.7895 15.2469V4.75305C16.7895 3.90076 16.0986 3.20984 15.2463 3.20984ZM4.75244 1.66663C3.04785 1.66663 1.66602 3.04847 1.66602 4.75305V15.2469C1.66602 16.9515 3.04786 18.3333 4.75244 18.3333H15.2463C16.9508 18.3333 18.3327 16.9515 18.3327 15.2469V4.75305C18.3327 3.04846 16.9508 1.66663 15.2463 1.66663H4.75244Z" fill="#747778"/>
 </svg>
diff --git a/packages/console/src/components/Checkbox/Icon.tsx b/packages/console/src/components/Checkbox/Icon.tsx
index f4f538609..1bd4028a5 100644
--- a/packages/console/src/components/Checkbox/Icon.tsx
+++ b/packages/console/src/components/Checkbox/Icon.tsx
@@ -1,5 +1,6 @@
 import { AppearanceMode } from '@logto/schemas';
 
+import CheckBoxSelectedDark from '@/assets/images/check-box-selected-dark.svg';
 import CheckBoxSelectedDisabledDark from '@/assets/images/check-box-selected-disabled-dark.svg';
 import CheckBoxSelectedDisabled from '@/assets/images/check-box-selected-disabled.svg';
 import CheckBoxSelected from '@/assets/images/check-box-selected.svg';
@@ -19,7 +20,7 @@ const Icon = ({ className }: Props) => {
 
   return (
     <span className={className}>
-      <CheckBoxSelected />
+      {isLightMode ? <CheckBoxSelected /> : <CheckBoxSelectedDark />}
       {isLightMode ? <CheckBoxUnselected /> : <CheckBoxUnselectedDark />}
       {isLightMode ? <CheckBoxSelectedDisabled /> : <CheckBoxSelectedDisabledDark />}
       {isLightMode ? <CheckBoxUnselectedDisabled /> : <CheckBoxUnselectedDisabledDark />}