feat: Update the design of labels to use a smooth theme (#4325)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -383,8 +383,8 @@ $form-button-radius: var(--border-radius-normal);
 // 20. Label
 // ---------
 
-$label-background: $primary-color;
+$label-background: $white;
-$label-color: $white;
+$label-color: $black;
 $label-color-alt: $black;
 $label-palette: $foundation-palette;
 $label-font-size: $font-size-mini;

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

@@ -1,13 +1,18 @@
 <template>
   <div :class="labelClass" :style="labelStyle" :title="description">
-    <button v-if="icon" class="label-action--button" @click="onClick">
+    <span v-if="icon" class="label-action--button">
       <fluent-icon :icon="icon" size="12" class="label--icon" />
-    </button>
+    </span>
+    <span
+      v-if="variant === 'smooth'"
+      :style="{ background: color }"
+      class="label-color-dot"
+    />
     <span v-if="!href">{{ title }}</span>
     <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
     <button
       v-if="showClose"
-      class="label-action--button"
+      class="label-close--button "
       :style="{ color: textColor }"
       @click="onClick"
     >
@@ -48,14 +53,23 @@ export default {
       type: String,
       default: '',
     },
+    color: {
+      type: String,
+      default: '',
+    },
     colorScheme: {
       type: String,
       default: '',
     },
+    variant: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     textColor() {
-      return getContrastingTextColor(this.bgColor);
+      if (this.variant === 'smooth') return '';
+      return this.color || getContrastingTextColor(this.bgColor);
     },
     labelClass() {
       return `label ${this.colorScheme} ${this.small ? 'small' : ''}`;
@@ -94,9 +108,17 @@ export default {
   font-weight: var(--font-weight-medium);
   margin-right: var(--space-smaller);
   margin-bottom: var(--space-smaller);
+  padding: var(--space-smaller);
+  background: var(--s-50);
+  color: var(--s-800);
+  border: 1px solid var(--s-75);
+  height: var(--space-medium);
 
   &.small {
     font-size: var(--font-size-micro);
+    padding: var(--space-micro) var(--space-smaller);
+    line-height: 1.2;
+    letter-spacing: 0.15px;
   }
 
   .label--icon {
@@ -104,11 +126,6 @@ export default {
     margin-right: var(--space-smaller);
   }
 
-  .close--icon {
-    cursor: pointer;
-    margin-left: var(--space-smaller);
-  }
-
   &.small .label--icon,
   &.small .close--icon {
     font-size: var(--font-size-nano);
@@ -164,7 +181,31 @@ export default {
   }
 }
 
+.label-close--button {
+  color: var(--s-800);
+  margin-bottom: var(--space-minus-micro);
+  margin-left: var(--space-smaller);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    background: var(--s-100);
+  }
+}
+
 .label-action--button {
   margin-bottom: var(--space-minus-micro);
 }
+
+.label-color-dot {
+  display: inline-block;
+  width: var(--space-one);
+  height: var(--space-one);
+  border-radius: var(--border-radius-small);
+  margin-right: var(--space-smaller);
+}
 </style>

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

@@ -7,7 +7,8 @@
       :title="label.title"
       :description="label.description"
       :show-close="true"
-      :bg-color="label.color"
+      :color="label.color"
+      variant="smooth"
       @click="removeItem"
     />
     <div class="dropdown-wrap">

app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue

@@ -16,7 +16,8 @@
           :title="label.title"
           :description="label.description"
           :show-close="true"
-          :bg-color="label.color"
+          :color="label.color"
+          variant="smooth"
           @click="removeLabelFromConversation"
         />
 

app/javascript/shared/assets/stylesheets/colors.scss

@@ -50,11 +50,11 @@
   --s-800: #293F51;
   --s-900: #1B2836;
 
-  --b-50: #F8F9FE;
+  --b-50: #f7f7f7;
-  --b-100: #F2F3F7;
+  --b-100: #ececed;
-  --b-200: #E9EAEF;
+  --b-200: #dddde0;
-  --b-300: #DADBDF;
+  --b-300: #c6c7ca;
-  --b-400: #B6B7BB;
+  --b-400: #abacaf;
   --b-500: #96979C;
   --b-600: #6E6F73;
   --b-700: #5A5B5F;

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

@@ -1,10 +1,12 @@
 <template>
-  <woot-button variant="link" class="label--add" @click="addLabel">
+  <woot-button
-    <woot-label
+    variant="smooth"
-      color-scheme="secondary"
+    class="label--add"
-      :title="$t('CONTACT_PANEL.LABELS.CONVERSATION.ADD_BUTTON')"
+    icon="add"
-      icon="add-circle"
+    size="tiny"
-    />
+    @click="addLabel"
+  >
+    {{ $t('CONTACT_PANEL.LABELS.CONVERSATION.ADD_BUTTON') }}
   </woot-button>
 </template>
 
@@ -20,15 +22,7 @@ export default {
 
 <style lang="scss" scoped>
 .label--add {
-  &::v-deep .label {
+  margin-bottom: var(--space-micro);
-    cursor: pointer;
+  margin-right: var(--space-micro);
-    background: transparent;
-    border-color: var(--s-600);
-    margin: 0;
-
-    &:hover {
-      background: var(--s-50);
-    }
-  }
 }
 </style>