From 9c555e70c98b388a7be929e8fe683236be63629a Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Thu, 27 May 2021 08:24:29 +0530
Subject: [PATCH] fix: Uses label component for add label button (#2337)

* fix: Uses label component for add label button

* Use button instead of span
---
 .../dashboard/components/ui/Label.vue         |  6 +++-
 .../components/ui/dropdown/AddLabel.vue       | 32 +++++++++----------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index 14376d530..5415444d2 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -52,7 +52,11 @@ export default {
     },
     labelStyle() {
       if (this.bgColor) {
-        return { background: this.bgColor, color: this.textColor };
+        return {
+          background: this.bgColor,
+          color: this.textColor,
+          border: `1px solid ${this.bgColor}`,
+        };
       }
       return {};
     },
diff --git a/app/javascript/shared/components/ui/dropdown/AddLabel.vue b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
index 4702e6805..4254749c1 100644
--- a/app/javascript/shared/components/ui/dropdown/AddLabel.vue
+++ b/app/javascript/shared/components/ui/dropdown/AddLabel.vue
@@ -1,20 +1,17 @@
 <template>
-  <woot-button
-    variant="hollow"
-    size="tiny"
-    icon="ion-plus-round"
-    color-scheme="secondary"
-    class-names="button-wrap"
-    @click="toggleLabels"
-  >
-    {{ $t('CONTACT_PANEL.LABELS.MODAL.ADD_BUTTON') }}
+  <woot-button variant="link" class="label--add" @click="addLabel">
+    <woot-label
+      color-scheme="secondary"
+      :title="$t('CONTACT_PANEL.LABELS.MODAL.ADD_BUTTON')"
+      icon="ion-plus-round"
+    />
   </woot-button>
 </template>
 
 <script>
 export default {
   methods: {
-    toggleLabels() {
+    addLabel() {
       this.$emit('add');
     },
   },
@@ -22,13 +19,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.button-wrap {
-  padding: var(--space-micro) var(--space-small);
-  display: inline;
-  line-height: 1.2;
+.label--add {
+  &::v-deep .label {
+    cursor: pointer;
+    background: transparent;
+    border-color: var(--s-700);
+    margin: 0;
 
-  &::v-deep .icon {
-    font-size: var(--font-size-mini);
+    &:hover {
+      background: var(--s-50);
+    }
   }
 }
 </style>