From 4f82859bba5964aa710357c80dddd417408d6ba2 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Wed, 9 Nov 2022 16:52:30 -0800
Subject: [PATCH] chore: Design improvements for thumbnail and dropdown (#5822)

---
 .../dashboard/components/widgets/Avatar.vue      |  1 +
 .../dashboard/components/widgets/Thumbnail.vue   | 10 +++++++++-
 .../components/widgets/ThumbnailGroup.vue        | 16 +++++++++++++++-
 .../components/ui/MultiselectDropdownItems.vue   | 12 +++++++++---
 4 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue
index 6d7e17d50..c6cb55b91 100644
--- a/app/javascript/dashboard/components/widgets/Avatar.vue
+++ b/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>
diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue
index 649cac990..c827135df 100644
--- a/app/javascript/dashboard/components/widgets/Thumbnail.vue
+++ b/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',
diff --git a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
index 8bf621190..bf979588d 100644
--- a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
+++ b/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);
   }
 }
diff --git a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue b/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
index 96aa99323..a14acd282 100644
--- a/app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+++ b/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 {