diff --git a/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx b/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx index a323ca1961..35ee3d9683 100644 --- a/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx +++ b/libs/components/editor-plugins/src/menu/group-menu/DragItem.tsx @@ -4,7 +4,7 @@ import { HandleParentIcon } from '@toeverything/components/icons'; import { styled } from '@toeverything/components/ui'; import { Point } from '@toeverything/utils'; -export const ICON_WIDTH = 24; +export const ICON_WIDTH = 16; type DragItemProps = { isShow: boolean; @@ -30,17 +30,21 @@ export const DragItem = function ({ ); }; -const StyledDiv = styled('div')({ +const StyledDiv = styled('div')(theme => ({ padding: '0', - display: 'inlineFlex', + display: 'inline-flex', width: `${ICON_WIDTH}px`, - height: `${ICON_WIDTH}px`, + height: '20px', cursor: 'grab', - ':hover': { - backgroundColor: '#edeef0', - borderRadius: '4px', + '& svg': { + fontSize: '20px', + marginLeft: '-2px', }, -}); + ':hover': { + backgroundColor: '#F5F7F8', + borderRadius: '3.75px', + }, +})); const StyledButton = styled('div')({ padding: '0', diff --git a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx index 602c08aacb..693c29c9b4 100644 --- a/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx +++ b/libs/components/editor-plugins/src/menu/left-menu/LeftMenuDraggable.tsx @@ -239,11 +239,15 @@ const Draggable = styled(Button)({ alignItems: 'center', justifyContent: 'center', backgroundColor: 'transparent', - width: '24px', - height: '24px', + width: '16px', + height: '20px', + '& svg': { + fontSize: '20px', + marginLeft: '-2px', + }, ':hover': { - backgroundColor: '#edeef0', - borderRadius: '4px', + backgroundColor: '#F5F7F8', + borderRadius: '3.75px', }, });