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/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>