web: improve item ui when it is focused

apps/web/src/components/list-item/index.js

@@ -82,7 +82,6 @@ function ListItem(props) {
       id={`id_${props.item.id}`}
       className={isSelected ? "selected" : ""}
       ref={listItemRef}
-      bg={isSelected ? "shade" : background}
       onContextMenu={(e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -114,33 +113,47 @@ function ListItem(props) {
           ...props.menu?.extraData
         });
       }}
-      pr={2}
-      py={isCompact ? 1 : 2}
       pl={1}
+      pr={2}
+      py={1}
+      mb={isCompact ? 0 : 1}
       tabIndex={-1}
       sx={{
-        opacity: isDisabled ? 0.7 : 1,
         height: "inherit",
         cursor: "pointer",
         position: "relative",
-        borderLeft: "5px solid",
-        borderLeftColor: isFocused ? primary : "transparent",
-        transition: "box-shadow 200ms ease-in",
-        outline: isMenuTarget ? `1px solid var(--${primary})` : "none",
-        // borderBottom: isMenuTarget ? `1px solid var(--${primary})` : "none",
-        ":hover": {
-          backgroundColor: isSelected ? "shade" : "hover"
-        },
-        ":focus,:focus-visible": {
-          // outline: "none",
-          outline: `1px solid var(--${primary})`
-          // outline: `1px solid var(--${primary})`,
-        },
         overflow: "hidden",
         maxWidth: "100%",
+
         flexDirection: isCompact ? "row" : "column",
         justifyContent: isCompact ? "space-between" : "center",
-        alignItems: isCompact ? "center" : undefined
+        alignItems: isCompact ? "center" : undefined,
+
+        opacity: isDisabled ? 0.7 : 1,
+
+        borderLeft: "5px solid",
+        borderLeftColor: isFocused ? primary : "transparent",
+        ml: "2px",
+        mr: "1px",
+
+        backgroundColor: isSelected
+          ? "shade"
+          : isMenuTarget
+          ? "hover"
+          : background,
+
+        ":hover": {
+          backgroundColor: isSelected ? "textSelection" : "hover"
+        },
+        ":focus": {
+          backgroundColor: isSelected ? "textSelection" : "hover"
+        },
+        ":focus-visible": {
+          outline: `1px solid var(--${
+            primary === "primary" ? "dimPrimary" : primary
+          })`,
+          backgroundColor: isSelected ? "textSelection" : background
+        }
       }}
       onKeyPress={(e) => {
         if (e.key !== "Enter") {