web: improve ui of context menus to match app ui

apps/web/src/components/menu/index.js

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { useCallback, useRef, useEffect, useState } from "react";
-import { Flex, Text } from "@theme-ui/components";
+import { Flex } from "@theme-ui/components";
 import { getPosition } from "../../hooks/use-menu";
 import { FlexScrollContainer } from "../scroll-container";
 import MenuItem from "./menu-item";
@@ -228,23 +228,6 @@ function MenuContainer({ title, children }) {
         flexDirection: "column"
       }}
     >
-      {title && (
-        <Text
-          py={"8px"}
-          px={3}
-          sx={{
-            borderBottom: "1px solid",
-            borderBottomColor: "border",
-            wordWrap: "break-word",
-            fontSize: "subtitle",
-            fontFamily: "body",
-            color: "primary"
-          }}
-          data-test-id="menu-title"
-        >
-          {title}
-        </Text>
-      )}
       <FlexScrollContainer>{children}</FlexScrollContainer>
     </Flex>
   );

apps/web/src/components/menu/menu-item.js

@@ -40,11 +40,10 @@ function MenuItem({ item, isFocused, onMouseEnter, onMouseLeave, onClick }) {
   if (type === "separator")
     return (
       <Box
-        as="li"
         key={key}
         bg="border"
-        my={2}
-        sx={{ width: "95%", height: "0.5px", alignSelf: "center" }}
+        my={1}
+        sx={{ width: "90%", height: "1px", ml: "5%" }}
       />
     );
 
@@ -69,19 +68,24 @@ function MenuItem({ item, isFocused, onMouseEnter, onMouseLeave, onClick }) {
           bg: isFocused ? "border" : "transparent",
           alignItems: "center",
           justifyContent: "space-between",
-          display: "flex"
+          display: "flex",
+          py: "7px",
+          px: 2,
+          mx: 1,
+          borderRadius: "default"
         }}
       >
-        <Flex>
+        <Flex sx={{ mr: 1 }}>
           {Icon && (
-            <Icon color={iconColor || "text"} size={15} sx={{ mr: 2 }} />
+            <Icon color={iconColor || "icon"} size={15} sx={{ mr: 2 }} />
           )}
           <Text
             as="span"
             sx={{
               fontSize: "menu",
               fontFamily: "body",
-              color: color || "text"
+              color: color || "text",
+              textAlign: "left"
             }}
           >
             {title}