fix(core): modify journal page title today style, add weekday tag (#5687)

fix [TOV-434](https://linear.app/affine-design/issue/TOV-434/修改-journal-中-「today」的字体大小和日期-title-大小)

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/toeverything/AFFiNE/assets/39363750/ac0ab085-5ff7-4d27-a0b1-11d97fdd8074">
  <img width="100%" alt="" src="https://github.com/toeverything/AFFiNE/assets/39363750/3b311130-ded2-4651-badd-65dd059b7bc5">
</picture>
This commit is contained in:
Cats Juice
2024-01-24 13:07:20 +00:00
parent 3f96b9778f
commit 9aa421d5e1
2 changed files with 23 additions and 5 deletions

View File

@@ -1,6 +1,7 @@
import { useJournalInfoHelper } from '@affine/core/hooks/use-journal';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import type { Page } from '@blocksuite/store';
import dayjs from 'dayjs';
import * as styles from './styles.css';
@@ -11,12 +12,17 @@ export const BlocksuiteEditorJournalDocTitle = ({ page }: { page: Page }) => {
);
const t = useAFFiNEI18N();
// TODO: i18n
const day = dayjs(localizedJournalDate).format('dddd');
return (
<span className="doc-title-container">
<span>{localizedJournalDate}</span>
{isTodayJournal ? (
<span className={styles.titleTodayTag}>{t['com.affine.today']()}</span>
) : null}
) : (
<span className={styles.titleDayTag}>{day}</span>
)}
</span>
);
};

View File

@@ -1,3 +1,4 @@
import { cssVar } from '@toeverything/theme';
import { style } from '@vanilla-extract/css';
export const docEditorRoot = style({
@@ -31,14 +32,25 @@ export const docContainer = style({
flexGrow: 1,
});
export const titleTodayTag = style({
fontSize: 'var(--affine-font-base)',
fontWeight: 400,
color: 'var(--affine-brand-color)',
const titleTagBasic = style({
fontSize: cssVar('fontH4'),
fontWeight: 600,
padding: '0 4px',
borderRadius: '4px',
marginLeft: '4px',
});
export const titleDayTag = style([
titleTagBasic,
{
color: cssVar('textSecondaryColor'),
},
]);
export const titleTodayTag = style([
titleTagBasic,
{
color: cssVar('brandColor'),
},
]);
export const pageReferenceIcon = style({
verticalAlign: 'middle',