chore: adjust custom font family style (#8040)

close AF-1302 AF-1301

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx

@@ -173,7 +173,7 @@ const FontMenuItems = ({ onSelect }: { onSelect: (font: string) => void }) => {
       {isLoading ? (
         <Loading />
       ) : (
-        <Scrollable.Root style={{ height: '200px' }}>
+        <Scrollable.Root style={{ height: '330px' }}>
           <Scrollable.Viewport>
             {result.length > 0 ? (
               <Virtuoso
@@ -191,7 +191,7 @@ const FontMenuItems = ({ onSelect }: { onSelect: (font: string) => void }) => {
                 )}
               />
             ) : (
-              <div>No results found.</div>
+              <div className={styles.notFound}>No results found.</div>
             )}
           </Scrollable.Viewport>
           <Scrollable.Scrollbar />
@@ -218,20 +218,24 @@ const FontMenuItem = ({
   const selected = currentFont === font.fullName;
 
   return (
-    <MenuItem key={font.fullName} onSelect={handleFontSelect}>
-      <div className={styles.fontItemContainer}>
-        <div className={styles.fontItem}>
-          <div className={styles.fontLabel} style={{ fontFamily }}>
-            {font.fullName}
+    <div style={{ marginTop: '4px' }}>
+      <MenuItem key={font.fullName} onSelect={handleFontSelect}>
+        <div className={styles.fontItemContainer}>
+          <div className={styles.fontItem}>
+            <div className={styles.fontLabel} style={{ fontFamily }}>
+              {font.fullName}
+            </div>
+            <div className={clsx(styles.fontLabel, 'secondary')}>
+              {font.fullName}
+            </div>
           </div>
-          <div className={clsx(styles.fontLabel, 'secondary')}>
-            {font.fullName}
-          </div>
-        </div>
 
-        {selected && <DoneIcon fontSize={20} className={styles.selectedIcon} />}
-      </div>
-    </MenuItem>
+          {selected && (
+            <DoneIcon fontSize={20} className={styles.selectedIcon} />
+          )}
+        </div>
+      </MenuItem>
+    </div>
   );
 };
 
@@ -263,7 +267,7 @@ const CustomFontFamilySettings = () => {
         items={<FontMenuItems onSelect={onCustomFontFamilyChange} />}
         contentOptions={{
           align: 'end',
-          style: { width: '250px' },
+          style: { width: '250px', height: '380px' },
         }}
       >
         <MenuTrigger className={styles.menuTrigger} style={{ fontFamily }}>

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/index.tsx

@@ -4,7 +4,6 @@ import { useI18n } from '@affine/i18n';
 import { Edgeless } from './edgeless';
 import { General } from './general';
 import { Page } from './page';
-import { Preferences } from './preferences';
 
 export const EditorSettings = () => {
   const t = useI18n();
@@ -18,7 +17,9 @@ export const EditorSettings = () => {
       <General />
       <Page />
       <Edgeless />
-      <Preferences />
+
+      {/* // TODO(@EYHN): implement export and import
+       <Preferences /> */}
     </>
   );
 };

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/style.css.ts

@@ -76,7 +76,6 @@ export const searchIcon = style({
 export const fontItemContainer = style({
   display: 'flex',
   justifyContent: 'space-between',
-  fontSize: cssVar('fontXs'),
   alignItems: 'center',
   overflow: 'hidden',
   width: '100%',
@@ -90,14 +89,21 @@ export const fontItem = style({
   textOverflow: 'ellipsis',
 });
 export const fontLabel = style({
-  color: cssVarV2('text/secondary'),
+  display: 'inline-flex',
+  alignItems: 'center',
+  color: cssVarV2('text/primary'),
   width: '100%',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   overflow: 'hidden',
+  fontSize: cssVar('fontSm'),
+  lineHeight: 'normal',
+  height: '22px',
   selectors: {
     '&.secondary': {
       color: cssVarV2('text/secondary'),
+      fontSize: cssVar('fontXs'),
+      height: '20px',
     },
   },
 });
@@ -105,3 +111,8 @@ export const selectedIcon = style({
   color: cssVarV2('button/primary'),
   marginLeft: '8px',
 });
+export const notFound = style({
+  color: cssVarV2('text/secondary'),
+  fontSize: cssVar('fontXs'),
+  padding: '4px',
+});

packages/frontend/core/src/components/affine/setting-modal/general-setting/index.tsx

@@ -2,10 +2,10 @@ import { UserFeatureService } from '@affine/core/modules/cloud/services/user-fea
 import { useI18n } from '@affine/i18n';
 import {
   AppearanceIcon,
-  BlocksuiteIcon,
   ExperimentIcon,
   InformationIcon,
   KeyboardIcon,
+  PenIcon,
 } from '@blocksuite/icons/rc';
 import {
   FeatureFlagService,
@@ -84,8 +84,8 @@ export const useGeneralSettingList = (): GeneralSettingList => {
     // add editor settings to second position
     settings.splice(1, 0, {
       key: 'editor',
-      title: t['com.affine.settings.editorSettings.title'](),
-      icon: BlocksuiteIcon,
+      title: t['com.affine.settings.editorSettings'](),
+      icon: PenIcon,
       testId: 'editor-panel-trigger',
     });
   }