chore: Design improvements for thumbnail and dropdown (#5822)

app/javascript/dashboard/components/widgets/Avatar.vue

@@ -48,5 +48,6 @@ export default {
   text-align: center;
   background-image: linear-gradient(to top, var(--w-100) 0%, var(--w-75) 100%);
   color: var(--w-600);
+  cursor: default;
 }
 </style>

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -1,5 +1,9 @@
 <template>
-  <div :class="thumbnailBoxClass" :style="{ height: size, width: size }">
+  <div
+    :class="thumbnailBoxClass"
+    :style="{ height: size, width: size }"
+    :title="title"
+  >
     <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
     <img
       v-show="shouldShowImage"
@@ -72,6 +76,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    title: {
+      type: String,
+      default: '',
+    },
     variant: {
       type: String,
       default: 'circle',

app/javascript/dashboard/components/widgets/ThumbnailGroup.vue

@@ -3,11 +3,13 @@
     <thumbnail
       v-for="user in usersList"
       :key="user.id"
+      v-tooltip="user.name"
+      :title="user.name"
       :src="user.thumbnail"
       :username="user.name"
       :has-border="true"
       :size="size"
-      class="overlapping-thumbnail"
+      :class="`overlapping-thumbnail gap-${gap}`"
     />
     <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
       {{ moreThumbnailsText }}
@@ -38,6 +40,14 @@ export default {
       type: String,
       default: '',
     },
+    gap: {
+      type: String,
+      default: 'normal',
+      validator(value) {
+        // The value must match one of these strings
+        return ['normal', '', 'tight'].includes(value);
+      },
+    },
   },
 };
 </script>
@@ -52,6 +62,10 @@ export default {
   box-shadow: var(--shadow-small);
 
   &:not(:first-child) {
+    margin-left: var(--space-minus-smaller);
+  }
+
+  .gap-tight {
     margin-left: var(--space-minus-small);
   }
 }

app/javascript/shared/components/ui/MultiselectDropdownItems.vue

@@ -19,7 +19,7 @@
           >
             <woot-button
               class="multiselect-dropdown--item"
-              variant="clear"
+              :variant="isActive(option) ? 'hollow' : 'clear'"
               color-scheme="secondary"
               :class="{
                 active: option.id === (selectedItem && selectedItem.id),
@@ -33,6 +33,7 @@
                   size="24px"
                   :username="option.name"
                   :status="option.availability_status"
+                  has-border
                 />
                 <div class="name-wrap">
                   <span
@@ -171,14 +172,19 @@ export default {
   width: 100%;
 
   &.active {
-    background-color: var(--w-25);
-    color: var(--w-800);
+    background: var(--s-25);
+    border-color: var(--s-50);
     font-weight: var(--font-weight-medium);
   }
 
   &:focus {
     background-color: var(--color-background-light);
   }
+
+  &:hover {
+    color: var(--s-800);
+    background-color: var(--color-background);
+  }
 }
 
 .user-wrap {