From b9c0119d2ce74a810612197f6dc1080839797958 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Mon, 29 Jul 2024 07:15:16 +0000
Subject: [PATCH] fix(core): adjust believer card dark mode style (#7623)

---
 .../general-setting/plans/lifetime/assets.ts  | 66 ++++++++++++-------
 .../plans/lifetime/believer-card.css.ts       | 37 +++++++----
 2 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/lifetime/assets.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/lifetime/assets.ts
index cd4856228e..a993f91287 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/lifetime/assets.ts
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/lifetime/assets.ts
@@ -1,3 +1,8 @@
+import {
+  affineIconGradientStart,
+  affineIconGradientStop,
+} from './believer-card.css';
+
 export const bgAFFiNERaw = `<svg 
   width="352" 
   height="320" 
@@ -8,7 +13,7 @@ export const bgAFFiNERaw = `<svg
 >
   <g filter="url(#filter0_dddd_782_4147)">
     <path 
-      fill="currentColor"
+      fill="url(#believerAffineIconGradient)"
       class="affine"
       fill-rule="evenodd" 
       clip-rule="evenodd" 
@@ -16,30 +21,41 @@ export const bgAFFiNERaw = `<svg
     />
   </g>
   <defs>
-  <filter id="filter0_dddd_782_4147" x="0" y="0" width="351.209" height="319.144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-  <feOffset dx="4" dy="3"/>
-  <feGaussianBlur stdDeviation="5.5"/>
-  <feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.1 0"/>
-  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_782_4147"/>
-  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-  <feOffset dx="14" dy="14"/>
-  <feGaussianBlur stdDeviation="10"/>
-  <feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.09 0"/>
-  <feBlend mode="normal" in2="effect1_dropShadow_782_4147" result="effect2_dropShadow_782_4147"/>
-  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-  <feOffset dx="32" dy="30"/>
-  <feGaussianBlur stdDeviation="13.5"/>
-  <feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.05 0"/>
-  <feBlend mode="normal" in2="effect2_dropShadow_782_4147" result="effect3_dropShadow_782_4147"/>
-  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-  <feOffset dx="58" dy="54"/>
-  <feGaussianBlur stdDeviation="16"/>
-  <feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.01 0"/>
-  <feBlend mode="normal" in2="effect3_dropShadow_782_4147" result="effect4_dropShadow_782_4147"/>
-  <feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_782_4147" result="shape"/>
-  </filter>
+    <linearGradient 
+      id="believerAffineIconGradient" 
+      x1="0" 
+      y1="0" 
+      x2="352" 
+      y2="320" 
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color="${affineIconGradientStart}"/>
+      <stop offset="1" stop-color="${affineIconGradientStop}"/>
+    </linearGradient>
+    <filter id="filter0_dddd_782_4147" x="0" y="0" width="351.209" height="319.144" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="4" dy="3"/>
+      <feGaussianBlur stdDeviation="5.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_782_4147"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="14" dy="14"/>
+      <feGaussianBlur stdDeviation="10"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.09 0"/>
+      <feBlend mode="normal" in2="effect1_dropShadow_782_4147" result="effect2_dropShadow_782_4147"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="32" dy="30"/>
+      <feGaussianBlur stdDeviation="13.5"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.05 0"/>
+      <feBlend mode="normal" in2="effect2_dropShadow_782_4147" result="effect3_dropShadow_782_4147"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="58" dy="54"/>
+      <feGaussianBlur stdDeviation="16"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0 0.34902 0 0 0 0.01 0"/>
+      <feBlend mode="normal" in2="effect3_dropShadow_782_4147" result="effect4_dropShadow_782_4147"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_782_4147" result="shape"/>
+    </filter>
   </defs>
 </svg>
 `;
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/lifetime/believer-card.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/lifetime/believer-card.css.ts
index def0d586c6..3f8126fee9 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/lifetime/believer-card.css.ts
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/lifetime/believer-card.css.ts
@@ -1,16 +1,25 @@
 import { cssVar } from '@toeverything/theme';
-import { globalStyle, style } from '@vanilla-extract/css';
+import { createVar, globalStyle, style } from '@vanilla-extract/css';
+
+export const affineIconGradientStart = createVar();
+export const affineIconGradientStop = createVar();
 
 const colorSchemes = {
   light: {
     dot: '#E0E0E0',
-    affine: '#fff',
+    affine: {
+      start: '#fff',
+      stop: '#fff',
+    },
     icon: 'rgba(0,0,0,0.1)',
   },
   dark: {
-    dot: '#333',
-    affine: cssVar('backgroundPrimaryColor'),
-    icon: 'rgba(255,255,255,0.1)',
+    dot: 'rgba(255,255,255,0.1)',
+    affine: {
+      start: '#8C8C8C',
+      stop: '#262626',
+    },
+    icon: 'transparent',
   },
 };
 
@@ -22,6 +31,7 @@ export const card = style({
   padding: '20px 24px',
   border: `1px solid ${cssVar('borderColor')}`,
   overflow: 'hidden',
+  background: cssVar('white'),
 });
 
 export const content = style({
@@ -35,7 +45,6 @@ export const bg = style({
   },
   width: '100%',
   height: '100%',
-  maxHeight: 320,
   position: 'absolute',
   top: 0,
   left: 0,
@@ -52,10 +61,10 @@ export const bg = style({
     },
 
     [`${card}[data-type="1"] &::after`]: {
-      background: `linear-gradient(231deg, transparent 0%, ${cssVar('backgroundOverlayPanelColor')} 80%)`,
+      background: `linear-gradient(231deg, transparent 0%, ${cssVar('white')} 80%)`,
     },
     [`${card}[data-type="2"] &::after`]: {
-      background: `linear-gradient(290deg, transparent 0%, ${cssVar('backgroundOverlayPanelColor')} 30%)`,
+      background: `linear-gradient(290deg, transparent 0%, ${cssVar('white')} 40%)`,
     },
   },
 
@@ -71,12 +80,18 @@ export const bg = style({
   },
 });
 globalStyle(`.${bg} > svg.affine-svg`, {
-  color: colorSchemes.light.affine,
+  vars: {
+    [affineIconGradientStart]: colorSchemes.light.affine.start,
+    [affineIconGradientStop]: colorSchemes.light.affine.stop,
+  },
   position: 'absolute',
   zIndex: 0,
 });
-globalStyle(`[data-theme='dark'].${bg} > svg.affine-svg`, {
-  color: colorSchemes.dark.affine,
+globalStyle(`[data-theme='dark'] .${bg} > svg.affine-svg`, {
+  vars: {
+    [affineIconGradientStart]: colorSchemes.dark.affine.start,
+    [affineIconGradientStop]: colorSchemes.dark.affine.stop,
+  },
 });
 globalStyle(` .${bg} > svg.icons-svg`, {
   color: colorSchemes.light.icon,