fix(core): use divider component to replace height dividers (#9986)

packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.css.ts

@@ -22,20 +22,6 @@ export const container = style({
   },
 });
 
-export const dividerContainer = style({
-  height: '16px',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-});
-
-export const divider = style({
-  background: cssVar('--affine-border-color'),
-  height: '0.5px',
-  width: '100%',
-});
-
 export const titleLine = style({
   display: 'flex',
   justifyContent: 'space-between',

packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx

@@ -1,6 +1,7 @@
 import {
   Button,
   createReactComponentFromLit,
+  Divider,
   useLitPortalFactory,
 } from '@affine/component';
 import { TextRenderer } from '@affine/core/blocksuite/presets';
@@ -339,11 +340,7 @@ export const BiDirectionalLinkPanel = () => {
   }, [show, setShow]);
   return (
     <div className={styles.container}>
-      {!show && (
-        <div className={styles.dividerContainer}>
-          <div className={styles.divider}></div>
-        </div>
-      )}
+      {!show && <Divider size="thinner" />}
 
       <div className={styles.titleLine}>
         <div className={styles.title}>Bi-Directional Links</div>
@@ -356,9 +353,8 @@ export const BiDirectionalLinkPanel = () => {
 
       {show && (
         <>
-          <div className={styles.dividerContainer}>
-            <div className={styles.divider}></div>
-          </div>
+          <Divider size="thinner" />
+
           <div className={styles.linksContainer}>
             <div className={styles.linksTitles}>
               {t['com.affine.page-properties.backlinks']()} · {backlinkCount}

packages/frontend/core/src/modules/peek-view/view/image-preview/index.css.ts

@@ -102,14 +102,7 @@ export const cursorStyle = style({
   padding: '1px 2px',
   fontSize: '14px',
 });
-export const dividerStyle = style({
-  width: '0.5px',
-  height: '100%',
-  background: cssVar('borderColor'),
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
+
 export const scaleIndicatorButtonStyle = style({
   height: '24px',
   padding: '1px 2px',

packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx

@@ -1,4 +1,4 @@
-import { toast } from '@affine/component';
+import { Divider, toast } from '@affine/component';
 import { Button, IconButton } from '@affine/component/ui/button';
 import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import type { ImageBlockModel } from '@blocksuite/affine/blocks';
@@ -326,7 +326,7 @@ const ImagePreviewModalImpl = ({
             disabled={cursor + 1 === blocks.length}
             onClick={() => goto(cursor + 1)}
           />
-          <div className={styles.dividerStyle}></div>
+          <Divider size="thinner" orientation="vertical" />
           <IconButton
             data-testid="fit-to-screen-button"
             tooltip="Fit to screen"
@@ -347,14 +347,13 @@ const ImagePreviewModalImpl = ({
           >
             {`${(currentScale * 100).toFixed(0)}%`}
           </Button>
-
           <IconButton
             data-testid="zoom-in-button"
             tooltip="Zoom in"
             icon={<PlusIcon />}
             onClick={zoomIn}
           />
-          <div className={styles.dividerStyle}></div>
+          <Divider size="thinner" orientation="vertical" />
           <IconButton
             data-testid="download-button"
             tooltip="Download"
@@ -369,7 +368,7 @@ const ImagePreviewModalImpl = ({
           />
           {blockModel && !blockModel.doc.readonly && (
             <>
-              <div className={styles.dividerStyle}></div>
+              <Divider size="thinner" orientation="vertical" />
               <IconButton
                 data-testid="delete-button"
                 tooltip="Delete"