From 9aa421d5e12502973a6abe121ddcf426e530d84e Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Wed, 24 Jan 2024 13:07:20 +0000
Subject: [PATCH] fix(core): modify journal page title today style, add weekday
 tag (#5687)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../block-suite-editor/journal-doc-title.tsx  |  8 +++++++-
 .../block-suite-editor/styles.css.ts          | 20 +++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/journal-doc-title.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/journal-doc-title.tsx
index 1e875ab93..25aaebaf3 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/journal-doc-title.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/journal-doc-title.tsx
@@ -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>
   );
 };
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts
index 34229375c..107beb00d 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/styles.css.ts
@@ -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',