feat(core): adjust empty favourites style (#5323)

close TOV-147

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/empty-item.tsx

@@ -1,10 +1,21 @@
-import { MenuItem } from '@affine/component/app-sidebar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { FavoriteIcon } from '@blocksuite/icons';
 
+import * as styles from './styles.css';
 export const EmptyItem = () => {
   const t = useAFFiNEI18N();
   return (
-    <MenuItem disabled={true}>{t['Favorite pages for easy access']()}</MenuItem>
+    <div className={styles.emptyFavouritesContent}>
+      <div className={styles.emptyFavouritesIconWrapper}>
+        <FavoriteIcon className={styles.emptyFavouritesIcon} />
+      </div>
+      <div
+        data-testid="slider-bar-favourites-empty-message"
+        className={styles.emptyFavouritesMessage}
+      >
+        {t['com.affine.rootAppSidebar.favorites.empty']()}
+      </div>
+    </div>
   );
 };
 

packages/frontend/core/src/components/pure/workspace-slider-bar/favorite/styles.css.ts

@@ -143,3 +143,32 @@ globalStyle(`${menuItem} svg`, {
 globalStyle(`${menuItem}.danger:hover svg`, {
   color: 'var(--affine-error-color)',
 });
+
+export const emptyFavouritesContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 6,
+  padding: '9px 20px 25px 21px',
+});
+
+export const emptyFavouritesIconWrapper = style({
+  width: 36,
+  height: 36,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  backgroundColor: 'var(--affine-background-secondary-color)',
+});
+
+export const emptyFavouritesIcon = style({
+  fontSize: 20,
+  color: 'var(--affine-icon-secondary)',
+});
+
+export const emptyFavouritesMessage = style({
+  fontSize: 'var(--affine-font-sm)',
+  textAlign: 'center',
+  color: 'var(--affine-text-secondary-color)',
+});

packages/frontend/i18n/src/resources/en.json

@@ -805,6 +805,7 @@
   "com.affine.publicLinkDisableModal.title": "Disable Public Link",
   "com.affine.rootAppSidebar.collections": "Collections",
   "com.affine.rootAppSidebar.favorites": "Favourites",
+  "com.affine.rootAppSidebar.favorites.empty": "You can add documents to your favourites",
   "com.affine.rootAppSidebar.others": "Others",
   "com.affine.selectPage.empty": "Empty",
   "com.affine.selectPage.empty.tips": "No page titles contain <1>{{search}}</1>",