feat(core): add migration background cover (#12485)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Added a background image to migration notifications that adapts to light or dark theme settings.

- **Style**
  - Improved padding for migration notification containers for a more balanced appearance.
  - Introduced new styling for the migration background image.

- **Chores**
  - Updated translation completeness percentage for Argentinian Spanish.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
EYHN
2025-05-26 02:49:30 +00:00
parent e3d63896bf
commit 7d3b7a8555
4 changed files with 25 additions and 1 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View File

@@ -4,7 +4,7 @@ import { style } from '@vanilla-extract/css';
export const migrationDataNotificationContainer = style({
border: `1px solid ${cssVarV2('layer/insideBorder/border')}`,
padding: '12px 240px 12px 12px',
padding: '12px 12px 12px 12px',
borderRadius: '8px',
margin: '0 24px',
marginTop: '24px',
@@ -39,3 +39,13 @@ export const migrationDataNotificationError = style({
lineHeight: '22px',
paddingBottom: '16px',
});
export const migrationBackgroundCover = style({
width: '250px',
height: '150px',
padding: '16px',
marginTop: '-48px',
objectFit: 'cover',
float: 'right',
userSelect: 'none',
});

View File

@@ -3,10 +3,23 @@ import { DocCreatedByUpdatedBySyncService } from '@affine/core/modules/cloud';
import { UserFriendlyError } from '@affine/error';
import { useI18n } from '@affine/i18n';
import { useLiveData, useService } from '@toeverything/infra';
import { useTheme } from 'next-themes';
import { useCallback, useMemo } from 'react';
import darkMigration from './dark-migration.png';
import lightMigration from './light-migration.png';
import * as styles from './migration-data.css';
const MigrationBackgroundCover = () => {
const { theme } = useTheme();
return (
<img
src={theme === 'light' ? lightMigration : darkMigration}
className={styles.migrationBackgroundCover}
/>
);
};
export const MigrationAllDocsDataNotification = () => {
const t = useI18n();
const docCreatedByUpdatedBySyncService = useService(
@@ -38,6 +51,7 @@ export const MigrationAllDocsDataNotification = () => {
{t['com.affine.migration-all-docs-notification.title']()}
</div>
<div className={styles.migrationDataNotificationContent}>
<MigrationBackgroundCover />
{t['com.affine.migration-all-docs-notification.content']()}
</div>