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/shared/assets/stylesheets/colors.scss

@@ -50,11 +50,11 @@
   --s-800: #293F51;
   --s-900: #1B2836;
 
-  --b-50: #F8F9FE;
-  --b-100: #F2F3F7;
-  --b-200: #E9EAEF;
-  --b-300: #DADBDF;
-  --b-400: #B6B7BB;
+  --b-50: #f7f7f7;
+  --b-100: #ececed;
+  --b-200: #dddde0;
+  --b-300: #c6c7ca;
+  --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-label
-      color-scheme="secondary"
-      :title="$t('CONTACT_PANEL.LABELS.CONVERSATION.ADD_BUTTON')"
-      icon="add-circle"
-    />
+  <woot-button
+    variant="smooth"
+    class="label--add"
+    icon="add"
+    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 {
-    cursor: pointer;
-    background: transparent;
-    border-color: var(--s-600);
-    margin: 0;
-
-    &:hover {
-      background: var(--s-50);
-    }
-  }
+  margin-bottom: var(--space-micro);
+  margin-right: var(--space-micro);
 }
 </style>