mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-13 21:05:19 +00:00
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:
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@@ -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',
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user