From 87571a0879fc4f74d829a3058e3d4ad555960e2f Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Fri, 27 Oct 2023 15:59:41 +0800
Subject: [PATCH] chore(core): replace setting-modal sidebar icons (#4742)

---
 .../setting-modal/general-setting/icons.tsx   | 41 +++++++++++++++++++
 .../setting-modal/general-setting/index.tsx   |  7 ++--
 2 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 packages/frontend/core/src/components/affine/setting-modal/general-setting/icons.tsx

diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/icons.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/icons.tsx
new file mode 100644
index 0000000000..8933141a30
--- /dev/null
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/icons.tsx
@@ -0,0 +1,41 @@
+import type { SVGProps } from 'react';
+
+export const UpgradeIcon = ({ width, height }: SVGProps<SVGElement>) => {
+  return (
+    <svg
+      className="icon"
+      width={width || 16}
+      height={height || 16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.5 8C1.5 4.41022 4.41022 1.5 8 1.5C11.5898 1.5 14.5 4.41022 14.5 8C14.5 11.5898 11.5898 14.5 8 14.5C4.41022 14.5 1.5 11.5898 1.5 8ZM8 2.5C4.96251 2.5 2.5 4.96251 2.5 8C2.5 11.0375 4.96251 13.5 8 13.5C11.0375 13.5 13.5 11.0375 13.5 8C13.5 4.96251 11.0375 2.5 8 2.5ZM4.91917 7.64645L7.64645 4.91917C7.84171 4.72391 8.15829 4.72391 8.35355 4.91917L11.0808 7.64645C11.2761 7.84171 11.2761 8.15829 11.0808 8.35355C10.8856 8.54882 10.569 8.54882 10.3737 8.35355L8.5 6.47983V11C8.5 11.2761 8.27614 11.5 8 11.5C7.72386 11.5 7.5 11.2761 7.5 11V6.47983L5.62628 8.35355C5.43102 8.54882 5.11444 8.54882 4.91917 8.35355C4.72391 8.15829 4.72391 7.84171 4.91917 7.64645Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const PaymentIcon = ({ width, height }: SVGProps<SVGElement>) => {
+  return (
+    <svg
+      className="icon"
+      width={width || 16}
+      height={height || 16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.5 4.66634C1.5 3.65382 2.32081 2.83301 3.33333 2.83301H12.6667C13.6792 2.83301 14.5 3.65382 14.5 4.66634V11.333C14.5 12.3455 13.6792 13.1663 12.6667 13.1663H3.33333C2.32081 13.1663 1.5 12.3455 1.5 11.333V4.66634ZM3.33333 3.83301C2.8731 3.83301 2.5 4.2061 2.5 4.66634V5.49967H13.5V4.66634C13.5 4.2061 13.1269 3.83301 12.6667 3.83301H3.33333ZM13.5 6.49967H2.5V11.333C2.5 11.7932 2.8731 12.1663 3.33333 12.1663H12.6667C13.1269 12.1663 13.5 11.7932 13.5 11.333V6.49967ZM9.5 9.99967C9.5 9.72353 9.72386 9.49967 10 9.49967H12C12.2761 9.49967 12.5 9.72353 12.5 9.99967C12.5 10.2758 12.2761 10.4997 12 10.4997H10C9.72386 10.4997 9.5 10.2758 9.5 9.99967Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx
index 241170a1d0..956d99bd5b 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx
@@ -11,6 +11,7 @@ import { useCurrentLoginStatus } from '../../../../hooks/affine/use-current-logi
 import { AboutAffine } from './about';
 import { AppearanceSettings } from './appearance';
 import { BillingSettings } from './billing';
+import { PaymentIcon, UpgradeIcon } from './icons';
 import { AFFiNECloudPlans } from './plans';
 import { Plugins } from './plugins';
 import { Shortcuts } from './shortcuts';
@@ -52,8 +53,7 @@ export const useGeneralSettingList = (): GeneralSettingList => {
     {
       key: 'plans',
       title: t['com.affine.payment.title'](),
-      // TODO: icon
-      icon: KeyboardIcon,
+      icon: UpgradeIcon,
       testId: 'plans-panel-trigger',
     },
 
@@ -75,8 +75,7 @@ export const useGeneralSettingList = (): GeneralSettingList => {
     settings.splice(3, 0, {
       key: 'billing',
       title: t['com.affine.payment.billing-setting.title'](),
-      // TODO: icon
-      icon: KeyboardIcon,
+      icon: PaymentIcon,
       testId: 'billing-panel-trigger',
     });
   }