Skip to content

Commit

Permalink
fix(core): cloud s subscription resume button's content is blank (#7783)
Browse files Browse the repository at this point in the history
  • Loading branch information
CatsJuice committed Aug 8, 2024
1 parent f2eafc3 commit 03fd23d
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down

0 comments on commit 03fd23d

Please sign in to comment.