From 03fd23de399e43928cbed9153e8ce3856f4c8fcf Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Thu, 8 Aug 2024 08:43:05 +0000
Subject: [PATCH] fix(core): cloud s subscription resume button's content is
 blank (#7783)

---
 .../general-setting/plans/plan-card.tsx         | 17 +++++++----------
 .../general-setting/plans/style.css.ts          | 16 +++++++++-------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
index d2e88f2670..6f6ab261bd 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/plan-card.tsx
@@ -10,7 +10,6 @@ import { SubscriptionPlan, SubscriptionStatus } from '@affine/graphql';
 import { Trans, useI18n } from '@affine/i18n';
 import { DoneIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { useSetAtom } from 'jotai';
 import { nanoid } from 'nanoid';
@@ -424,15 +423,13 @@ const ResumeButton = () => {
 
   return (
     <ResumeAction open={open} onOpenChange={setOpen}>
-      <Button
-        className={styles.resumeAction}
-        onClick={handleClick}
-        style={assignInlineVars({
-          '--default-content': t['com.affine.payment.current-plan'](),
-          '--hover-content': t['com.affine.payment.resume-renewal'](),
-        })}
-      >
-        <span className={styles.resumeActionContent} />
+      <Button className={styles.resumeAction} onClick={handleClick}>
+        <span data-show-hover="true" className={clsx(styles.resumeContent)}>
+          {t['com.affine.payment.resume-renewal']()}
+        </span>
+        <span data-show-hover="false" className={clsx(styles.resumeContent)}>
+          {t['com.affine.payment.current-plan']()}
+        </span>
       </Button>
     </ResumeAction>
   );
diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts
index e6967100bd..634b91108f 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/plans/style.css.ts
@@ -179,14 +179,16 @@ export const planAction = style({
   width: '100%',
 });
 export const resumeAction = style([planAction, {}]);
-export const resumeActionContent = style({
-  ':after': {
-    content: 'var(--default-content)',
-  },
+export const resumeContent = style({
   selectors: {
-    [`${resumeAction}:hover &:after`]: {
-      content: 'var(--hover-content)',
-    },
+    [`&[data-show-hover="true"], ${resumeAction}:hover &[data-show-hover="false"]`]:
+      {
+        display: 'none',
+      },
+    [`&[data-show-hover="false"], ${resumeAction}:hover &[data-show-hover="true"]`]:
+      {
+        display: 'block',
+      },
   },
 });
 export const planBenefits = style({