Restyle EntityMenu (#23991)

* text-dark and a new hover state

* change min width

frontend/src/metabase/components/EntityMenu.jsx

@@ -104,7 +104,7 @@ class EntityMenu extends Component {
                 >
                   <Card>
                     {menuItemContent || (
-                      <ol className="py1" style={{ minWidth: 210 }}>
+                      <ol className="p1" style={{ minWidth: 184 }}>
                         {items.map(item => {
                           if (!item) {
                             return null;

frontend/src/metabase/components/EntityMenuItem.styled.jsx

@@ -6,21 +6,21 @@ import { color } from "metabase/lib/colors";
 export const Item = styled.div`
   display: flex;
   align-items: center;
+  border-radius: 0.5em;
   cursor: ${props => (props.disabled ? "not-allowed" : "pointer")};
-  color: ${props => color(props.disabled ? "text-light" : "text-medium")};
+  color: ${props => color(props.disabled ? "text-light" : "text-dark")};
   padding: 0.85em 1.45em;
   text-decoration: none;
-  transition: all 300ms linear;
   :hover {
     color: ${props => !props.disabled && color("brand")};
+    background-color: ${props => !props.disabled && color("bg-light")};
   }
   > .Icon {
-    color: ${color("text-light")};
+    color: ${color("text-dark")};
     margin-right: 0.65em;
   }
   :hover > .Icon {
     color: ${props => !props.disabled && color("brand")};
-    transition: all 300ms linear;
   },
   /* icon specific tweaks
      the alert icon should be optically aligned  with the x-height of the text */