UX: Improve layout of avatar+icon notifications (#24851)

app/assets/javascripts/discourse/app/components/user-menu/icon-avatar.gjs

@@ -6,7 +6,9 @@ export default class IconAvatar extends Component {
   <template>
     <div class="icon-avatar">
       {{avatar @data.avatarTemplate "small"}}
-      {{dIcon @data.icon}}
+      <div class="icon-avatar__icon-wrapper">
+        {{dIcon @data.icon}}
+      </div>
     </div>
   </template>
 }

app/assets/stylesheets/common/base/menu-panel.scss

@@ -558,11 +558,20 @@
 // Styles to have user avatar positioned and sized correctly
 .user-menu.show-avatars,
 .user-notifications-list.show-avatars {
-  li {
+  li.notification,
+  li.bookmark,
+  li.message {
     a {
       align-items: center;
       padding: 0.15em 0;
 
+      .item-label {
+        font-weight: bold;
+      }
+      .item-description {
+        color: var(--primary);
+      }
+
       .icon-avatar {
         display: flex;
         position: relative;
@@ -577,24 +586,37 @@
           width: 100%;
           height: 100%;
         }
-        .d-icon {
-          display: block;
+        &__icon-wrapper {
           position: absolute;
-          right: -1.25em;
-          top: -0.5em;
-          padding: 0.2em;
+          right: -0.65em;
+          top: -0.65em;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 22px;
+          height: 22px;
           border-radius: 100%;
           background: var(--secondary);
-          color: var(--tertiary);
+
+          .d-icon {
+            display: block;
+            margin: 0;
+            padding: 0;
+            font-size: var(--font-down-1);
+            color: var(--primary);
+          }
         }
       }
       & + div {
         padding: 0.25em 0;
       }
     }
-    &.unread a .d-icon {
+    &.unread .icon-avatar__icon-wrapper {
       background: var(--tertiary);
-      color: var(--secondary);
+
+      .d-icon {
+        color: var(--secondary);
+      }
     }
   }
 }