feat: refactor ui components

packages/app/src/ui/menu/styles.ts

@@ -1,5 +1,6 @@
-import { styled } from '@/styles';
+import { displayFlex, styled } from '@/styles';
 import StyledPopperContainer from '../shared/Container';
+import { MiddleArrowRightIcon } from '@blocksuite/icons';
 
 export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
   return {
@@ -12,23 +13,39 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
   };
 });
 
-export const StyledMenuItem = styled('div')<{ popperVisible?: boolean }>(
-  ({ theme, popperVisible }) => {
-    return {
-      borderRadius: '5px',
-      padding: '0 14px',
+export const StyledArrow = styled(MiddleArrowRightIcon)(({ theme }) => {
+  return {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    margin: 'auto',
+  };
+});
 
-      color: popperVisible
-        ? theme.colors.primaryColor
-        : theme.colors.popoverColor,
-      backgroundColor: popperVisible
-        ? theme.colors.hoverBackground
-        : 'transparent',
+export const StyledMenuItem = styled.button<{
+  popperVisible?: boolean;
+  isDir?: boolean;
+}>(({ theme, popperVisible, isDir = false }) => {
+  return {
+    width: '100%',
+    borderRadius: '5px',
+    padding: '0 14px',
+    fontSize: '14px',
+    height: '32px',
+    ...displayFlex('flex-start', 'center'),
+    cursor: isDir ? 'pointer' : '',
+    position: 'relative',
+    color: popperVisible
+      ? theme.colors.primaryColor
+      : theme.colors.popoverColor,
+    backgroundColor: popperVisible
+      ? theme.colors.hoverBackground
+      : 'transparent',
 
-      ':hover': {
-        color: theme.colors.primaryColor,
-        backgroundColor: theme.colors.hoverBackground,
-      },
-    };
-  }
-);
+    ':hover': {
+      color: theme.colors.primaryColor,
+      backgroundColor: theme.colors.hoverBackground,
+    },
+  };
+});