minor #5627 Tweaked the design of dropdown menus (javiereguiluz)

This PR was squashed before being merged into the 4.x branch.

Discussion
----------

Tweaked the design of dropdown menus

I don't like the design of our current dropdown menus. Everything is too tight. I've tweaked it a bit to give icons, labels and dividers a bit more space to _breathe_.

I took inspiration from many popular apps; e.g. Notion:

<kbd>

![notion-dropdown](https://user-images.githubusercontent.com/73419/218268290-69354ab2-d365-425d-ba8a-c737168c6a79.png)

</kbd>

Commits
-------

38e1a49 Tweaked the design of dropdown menus

assets/css/easyadmin-theme/base.scss

@@ -661,10 +661,13 @@ body.ea-edit .content-header {
 }
 
 .dropdown-menu {
+    --dropdown-padding: 4px;
+
     background-color: var(--dropdown-bg);
     border-color: var(--dropdown-border-color);
     box-shadow: var(--shadow-xl);
     color: var(--dropdown-color);
+    max-width: 240px;
     padding: 5px;
 
     li {
@@ -680,21 +683,32 @@ body.ea-edit .content-header {
     i {
         color: var(--dropdown-icon-color);
         font-size: var(--font-size-lg);
-        margin-right: 10px;
-        margin-top: 3px;
-        vertical-align: middle;
+        margin: 0 4px 0 10px;
+        text-align: center;
+        font-size: 15px;
         height: 16px;
-        width: 20px;
+        width: 16px;
+    }
+    span {
+        margin: 0 12px 0 6px;
     }
 
     .dropdown-item, .dropdown-header {
-        align-items: flex-start;
+        align-items: center;
         display: flex;
-        padding: 4px 5px;
+        height: 28px;
+        white-space: nowrap;
+        overflow: hidden;
+        padding: 0;
+        text-overflow: ellipsis;
     }
     .dropdown-divider {
         background: transparent;
-        border-top-color: var(--dropdown-border-color);
+        border: 0;
+        border-radius: 0;
+        box-shadow: 0 -1px 0 var(--dropdown-border-color);
+        height: 1px;
+        margin: 6px calc(-1 * var(--dropdown-padding));
         opacity: 1;
     }
     .dropdown-item-color-scheme {

assets/css/easyadmin-theme/datagrids.scss

@@ -142,8 +142,7 @@ table.datagrid {
 .datagrid td.actions a:not(.dropdown-item) + a:not(.dropdown-item) {
   margin-left: 10px;
 }
-.datagrid td.actions .action-icon {
-  filter: opacity(0.6);
+.datagrid td.actions a:not(.dropdown-item) .action-icon {
   font-size: var(--font-size-base);
   margin-right: 2px;
 }

assets/css/easyadmin-theme/variables-theme.scss

@@ -101,7 +101,7 @@
     --dropdown-border-color: var(--gray-200);
     --dropdown-link-color: var(--gray-700);
     --dropdown-link-hover-bg: var(--gray-100);
-    --dropdown-icon-color: var(--gray-500);
+    --dropdown-icon-color: var(--gray-600);
     --dropdown-settings-icon-color: var(--gray-400);
     --dropdown-settings-active-item-bg: var(--gray-100);
     --dropdown-settings-active-item-color: var(--color-primary);

src/Resources/public/entrypoints.json

@@ -2,8 +2,8 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/app.d0ae0e32.css",
-        "/app.d0ae0e32.rtl.css"
+        "/app.db040f2c.css",
+        "/app.db040f2c.rtl.css"
       ],
       "js": [
         "/app.7ef09592.js"

src/Resources/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "app.css": "app.d0ae0e32.css",
-  "app.rtl.css": "app.d0ae0e32.rtl.css",
+  "app.css": "app.db040f2c.css",
+  "app.rtl.css": "app.db040f2c.rtl.css",
   "app.js": "app.7ef09592.js",
   "form.js": "form.51fd6a48.js",
   "page-layout.js": "page-layout.3347892e.js",