diff --git a/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.css.ts b/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.css.ts index c0b1827aa8..a2e5e96171 100644 --- a/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.css.ts +++ b/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.css.ts @@ -98,11 +98,21 @@ export const footer = style({ gap: 12, display: 'flex', justifyContent: 'space-between', - selectors: { - '&[data-is-last="true"], &[data-is-first="true"]': { - justifyContent: 'flex-end', - }, - }, + alignItems: 'center', +}); +export const actionAndIndicator = style({ + display: 'flex', + gap: 16, + alignItems: 'center', + fontWeight: 500, + fontSize: cssVar('fontXs'), + lineHeight: '20px', + color: cssVar('textSecondaryColor'), +}); +export const subscribeActions = style({ + display: 'flex', + gap: 12, + alignItems: 'center', }); export const baseActionButton = style({ fontSize: cssVar('fontBase'), @@ -112,3 +122,9 @@ export const baseActionButton = style({ }, }, }); +export const transparentActionButton = style([ + baseActionButton, + { + backgroundColor: 'transparent', + }, +]); diff --git a/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx b/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx index ff212b7d92..a57f01ec1c 100644 --- a/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx +++ b/packages/frontend/core/src/components/affine/ai-onboarding/general.dialog.tsx @@ -1,4 +1,4 @@ -import { Button, Modal } from '@affine/component'; +import { Button, IconButton, Modal } from '@affine/component'; import { openSettingModalAtom } from '@affine/core/atoms'; import { useBlurRoot } from '@affine/core/hooks/use-blur-root'; import { SubscriptionService } from '@affine/core/modules/cloud'; @@ -90,6 +90,9 @@ export const AIOnboardingGeneral = ({ const isFirst = index === 0; const isLast = index === list.length - 1; + const remindLater = useCallback(() => { + showAIOnboardingGeneral$.next(false); + }, []); const closeAndDismiss = useCallback(() => { showAIOnboardingGeneral$.next(false); onDismiss(); @@ -216,37 +219,55 @@ export const AIOnboardingGeneral = ({ data-is-first={isFirst} > {isLast ? ( - aiSubscription ? ( - - ) : ( - <> + /> + {aiSubscription ? ( - - - ) + ) : ( +
+ + +
+ )} + ) : ( <> - {isFirst ? null : ( + {isFirst ? ( + + ) : ( )} - +
+
+ {index + 1} / {list.length} +
+ +
)} diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index 35ccbaa388..993a513c1f 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/packages/frontend/i18n/src/resources/en.json @@ -1294,7 +1294,7 @@ "com.affine.ai-onboarding.general.4.description": "From concept to completion, turn ideas into reality.", "com.affine.ai-onboarding.general.5.title": "AFFiNE AI is ready", "com.affine.ai-onboarding.general.5.description": "Go to {{link}} for learn more details about AFFiNE AI.", - "com.affine.ai-onboarding.general.skip": "Alert me later", + "com.affine.ai-onboarding.general.skip": "Remind me Later", "com.affine.ai-onboarding.general.next": "Next", "com.affine.ai-onboarding.general.prev": "Back", "com.affine.ai-onboarding.general.try-for-free": "Try for Free",