Style changes to suit new design

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -15,8 +15,8 @@
   @include flex-shrink;
   border-radius: var(--border-radius-large);
   cursor: pointer;
-  margin: var(--space-small);
-  padding: 0 var(--space-small);
+  margin: var(--space-smaller) var(--space-small);
+  padding: var(--space-small);
   position: relative;
 
   &.active {
@@ -27,8 +27,7 @@
 
 
   .conversation--details {
-    @include margin(0 0 0 $space-small);
-    @include padding($space-small 0);
+    margin-left: var(--space-small);
   }
 
   .conversation--user {

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -46,6 +46,11 @@
     .button {
       border-bottom: 0;
       top: 0;
+
+      .button__content {
+        display: inline-flex;
+        align-items: center;
+      }
     }
 
     &.is-active {

app/javascript/dashboard/components/ui/Label.vue

@@ -164,12 +164,13 @@ export default {
 
 .label-action--button {
   color: inherit;
+  display: inline-flex;
+  align-items: center;
 }
 
 .label__title {
   max-width: inherit;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: 1.2;
 }
 </style>

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

@@ -3,6 +3,7 @@
     :title="inbox.name"
     :icon="computedInboxClass"
     color-scheme="secondary"
+    class="inbox--name"
   />
 </template>
 <script>
@@ -24,19 +25,14 @@ export default {
   },
 };
 </script>
-<style scoped>
-.inbox--name {
-  display: inline-flex;
-  padding: var(--space-micro) 0;
-  line-height: var(--space-slab);
-  font-weight: var(--font-weight-medium);
+<style lang="scss" scoped>
+.label.secondary.inbox--name {
   background: none;
-  color: var(--s-700);
-  font-size: var(--font-size-mini);
-}
+  color: var(--s-600);
+  padding: 0;
 
-.inbox--icon {
-  margin-right: var(--space-micro);
-  color: inherit;
+  .label__title {
+    line-height: 1.2;
+  }
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -41,19 +41,19 @@
         <p v-if="lastMessageInChat" class="conversation--message">
           <fluent-icon
             v-if="isMessagePrivate"
-            size="16"
+            size="14"
             class="message--attachment-icon last-message-icon"
             icon="lock-closed"
           />
           <fluent-icon
             v-else-if="messageByAgent"
-            size="16"
+            size="14"
             class="message--attachment-icon last-message-icon"
             icon="arrow-reply"
           />
           <fluent-icon
             v-else-if="isMessageAnActivity"
-            size="16"
+            size="14"
             class="message--attachment-icon last-message-icon"
             icon="info"
           />
@@ -62,7 +62,7 @@
           </span>
           <span v-else-if="lastMessageInChat.attachments">
             <fluent-icon
-              size="16"
+              size="14"
               class="message--attachment-icon"
               :icon="attachmentIcon"
             />
@@ -73,7 +73,7 @@
           </span>
         </p>
         <p v-else class="conversation--message">
-          <fluent-icon size="16" class="message--attachment-icon" icon="info" />
+          <fluent-icon size="14" class="message--attachment-icon" icon="info" />
           <span>
             {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
           </span>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -20,7 +20,7 @@
           />
         </h3>
         <div class="conversation--header--actions">
-          <inbox-name :inbox="inbox" class="margin-right-small" />
+          <inbox-name :inbox="inbox" class="header__inbox-name" />
           <span
             v-if="isSnoozed"
             class="snoozed--display-text margin-right-small"
@@ -185,4 +185,10 @@ export default {
     color: var(--y-900);
   }
 }
+
+.header__inbox-name {
+  margin: 0;
+  margin-right: var(--space-small);
+  background: transparent;
+}
 </style>

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -456,16 +456,15 @@ export default {
 
     background: var(--white);
 
-    padding: inherit 0;
-    border-top-left-radius: calc(
-      var(--space-medium) + 1px
-    ); /* 100px of height + 10px of border */
-    border-bottom-left-radius: calc(
-      var(--space-medium) + 1px
-    ); /* 100px of height + 10px of border */
+    border-top-left-radius: calc(var(--space-medium) + 1px);
+    border-bottom-left-radius: calc(var(--space-medium) + 1px);
     border: 1px solid var(--color-border-light);
     border-right: 0;
     box-sizing: border-box;
+
+    &:hover {
+      padding: var(--space-small);
+    }
   }
 }
 </style>

app/javascript/shared/components/ui/dropdown/AddLabel.vue

@@ -20,11 +20,15 @@ export default {
 
 <style lang="scss" scoped>
 .label--add {
+  margin-bottom: var(--space-smaller);
+  margin-top: var(--space-smaller);
+  border: 0;
+
   &::v-deep .label {
     cursor: pointer;
+    margin-bottom: 0;
     background: transparent;
-    border-color: var(--s-600);
-    margin: 0;
+    border: 1px solid var(--s-600);
 
     &:hover {
       background: var(--s-50);