fix: Uses label component for add label button (#2337)

* fix: Uses label component for add label button

* Use button instead of span

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 {};
     },

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

@@ -1,20 +1,17 @@
 <template>
-  <woot-button
+  <woot-button variant="link" class="label--add" @click="addLabel">
-    variant="hollow"
+    <woot-label
-    size="tiny"
-    icon="ion-plus-round"
       color-scheme="secondary"
-    class-names="button-wrap"
+      :title="$t('CONTACT_PANEL.LABELS.MODAL.ADD_BUTTON')"
-    @click="toggleLabels"
+      icon="ion-plus-round"
-  >
+    />
-    {{ $t('CONTACT_PANEL.LABELS.MODAL.ADD_BUTTON') }}
   </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 {
+.label--add {
-  padding: var(--space-micro) var(--space-small);
+  &::v-deep .label {
-  display: inline;
+    cursor: pointer;
-  line-height: 1.2;
+    background: transparent;
+    border-color: var(--s-700);
+    margin: 0;
 
-  &::v-deep .icon {
+    &:hover {
-    font-size: var(--font-size-mini);
+      background: var(--s-50);
+    }
   }
 }
 </style>