chore: adjust font menu and slider style (#7989)

![CleanShot 2024-08-27 at 15 52 09@2x](https://github.com/user-attachments/assets/69c8a340-0d59-4d8d-846e-73dc81f2800a)
![CleanShot 2024-08-27 at 15 52 39@2x](https://github.com/user-attachments/assets/2177f267-bdc1-459b-b043-868642b08d9a)

packages/frontend/component/src/ui/slider/index.css.ts

@@ -29,8 +29,8 @@ export const filledTrackStyle = style({
 });
 
 export const thumbStyle = style({
-  width: '8px',
-  height: '8px',
+  width: '14px',
+  height: '14px',
   backgroundColor: cssVarV2('icon/primary'),
   borderRadius: '50%',
   position: 'absolute',
@@ -40,8 +40,8 @@ export const thumbStyle = style({
 });
 
 export const nodeStyle = style({
-  width: '4px',
-  height: '4px',
+  width: '8px',
+  height: '8px',
   border: '2px solid transparent',
   backgroundColor: cssVarV2('layer/insideBorder/border'),
   borderRadius: '50%',

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

@@ -23,12 +23,9 @@ import {
   SystemFontFamilyService,
 } from '@affine/core/modules/system-font-family';
 import { useI18n } from '@affine/i18n';
-import {
-  type DocMode,
-  useLiveData,
-  useService,
-  useServices,
-} from '@toeverything/infra';
+import { DoneIcon, SearchIcon } from '@blocksuite/icons/rc';
+import { type DocMode, useLiveData, useServices } from '@toeverything/infra';
+import clsx from 'clsx';
 import {
   type ChangeEvent,
   forwardRef,
@@ -41,7 +38,7 @@ import {
 } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { menu, menuTrigger, searchInput, settingWrapper } from './style.css';
+import * as styles from './style.css';
 
 const FontFamilySettings = () => {
   const t = useI18n();
@@ -101,7 +98,7 @@ const FontFamilySettings = () => {
       items={radioItems}
       value={settings.fontFamily}
       width={250}
-      className={settingWrapper}
+      className={styles.settingWrapper}
       onChange={handleFontFamilyChange}
     />
   );
@@ -126,7 +123,15 @@ const Scroller = forwardRef<
 Scroller.displayName = 'Scroller';
 
 const FontMenuItems = ({ onSelect }: { onSelect: (font: string) => void }) => {
-  const systemFontFamily = useService(SystemFontFamilyService).systemFontFamily;
+  const { systemFontFamilyService, editorSettingService } = useServices({
+    SystemFontFamilyService,
+    EditorSettingService,
+  });
+  const systemFontFamily = systemFontFamilyService.systemFontFamily;
+
+  const currentCustomFont = useLiveData(
+    editorSettingService.editorSetting.settings$
+  ).customFontFamily;
   useEffect(() => {
     if (systemFontFamily.fontList$.value.length === 0) {
       systemFontFamily.loadFontList();
@@ -153,14 +158,17 @@ const FontMenuItems = ({ onSelect }: { onSelect: (font: string) => void }) => {
 
   return (
     <div>
-      <input
-        value={searchText ?? ''}
-        onChange={onInputChange}
-        onKeyDown={onInputKeyDown}
-        autoFocus
-        className={searchInput}
-        placeholder="Type here ..."
-      />
+      <div className={styles.InputContainer}>
+        <SearchIcon className={styles.searchIcon} />
+        <input
+          value={searchText ?? ''}
+          onChange={onInputChange}
+          onKeyDown={onInputKeyDown}
+          autoFocus
+          className={styles.searchInput}
+          placeholder="Fonts"
+        />
+      </div>
       <MenuSeparator />
       {isLoading ? (
         <Loading />
@@ -178,11 +186,12 @@ const FontMenuItems = ({ onSelect }: { onSelect: (font: string) => void }) => {
                     key={result[index].fullName}
                     font={result[index]}
                     onSelect={onSelect}
+                    currentFont={currentCustomFont}
                   />
                 )}
               />
             ) : (
-              <div>No font found</div>
+              <div>No results found.</div>
             )}
           </Scrollable.Viewport>
           <Scrollable.Scrollbar />
@@ -194,9 +203,11 @@ const FontMenuItems = ({ onSelect }: { onSelect: (font: string) => void }) => {
 
 const FontMenuItem = ({
   font,
+  currentFont,
   onSelect,
 }: {
   font: FontData;
+  currentFont: string;
   onSelect: (font: string) => void;
 }) => {
   const handleFontSelect = useCallback(
@@ -204,13 +215,22 @@ const FontMenuItem = ({
     [font, onSelect]
   );
   const fontFamily = getFontFamily(font.family);
+  const selected = currentFont === font.fullName;
+
   return (
-    <MenuItem
-      key={font.fullName}
-      onSelect={handleFontSelect}
-      style={{ fontFamily }}
-    >
-      {font.fullName}
+    <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>
+
+        {selected && <DoneIcon fontSize={20} className={styles.selectedIcon} />}
+      </div>
     </MenuItem>
   );
 };
@@ -246,7 +266,7 @@ const CustomFontFamilySettings = () => {
           style: { width: '250px' },
         }}
       >
-        <MenuTrigger className={menuTrigger} style={{ fontFamily }}>
+        <MenuTrigger className={styles.menuTrigger} style={{ fontFamily }}>
           {settings.customFontFamily || 'Select a font'}
         </MenuTrigger>
       </Menu>
@@ -276,7 +296,7 @@ const NewDocDefaultModeSettings = () => {
       items={radioItems}
       value={value}
       width={250}
-      className={settingWrapper}
+      className={styles.settingWrapper}
       onChange={setValue}
     />
   );
@@ -319,11 +339,11 @@ export const General = () => {
       >
         <Menu
           contentOptions={{
-            className: menu,
+            className: styles.menu,
           }}
           items={<MenuItem>Plain Text</MenuItem>}
         >
-          <MenuTrigger className={menuTrigger} disabled>
+          <MenuTrigger className={styles.menuTrigger} disabled>
             Plain Text
           </MenuTrigger>
         </Menu>

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

@@ -49,11 +49,16 @@ export const shapeIndicator = style({
   boxShadow: 'none',
   backgroundColor: cssVarV2('layer/background/tertiary'),
 });
-
+export const InputContainer = style({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '4px',
+  width: '100%',
+  justifyContent: 'flex-start',
+  gap: '6px',
+});
 export const searchInput = style({
   flexGrow: 1,
-  padding: '10px 0',
-  margin: '-10px 0',
   border: 'none',
   outline: 'none',
   fontSize: cssVar('fontSm'),
@@ -64,3 +69,39 @@ export const searchInput = style({
     color: cssVarV2('text/placeholder'),
   },
 });
+export const searchIcon = style({
+  color: cssVarV2('icon/primary'),
+  fontSize: '20px',
+});
+export const fontItemContainer = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  fontSize: cssVar('fontXs'),
+  alignItems: 'center',
+  overflow: 'hidden',
+  width: '100%',
+});
+export const fontItem = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});
+export const fontLabel = style({
+  color: cssVarV2('text/secondary'),
+  width: '100%',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  selectors: {
+    '&.secondary': {
+      color: cssVarV2('text/secondary'),
+    },
+  },
+});
+export const selectedIcon = style({
+  color: cssVarV2('button/primary'),
+  marginLeft: '8px',
+});