From 1820d4b4c9d25dc9cecb13ed377dcc74f9231d42 Mon Sep 17 00:00:00 2001
From: rowa-audil <rowa.audil@dynatrace.com>
Date: Mon, 13 Jan 2020 14:23:04 +0100
Subject: [PATCH] fix(tag-add): Improved styling of button textcontent

---
 components/tag/src/tag-add/tag-add.html |  3 +-
 components/tag/src/tag-add/tag-add.scss | 59 ++++++++++++++++---------
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/components/tag/src/tag-add/tag-add.html b/components/tag/src/tag-add/tag-add.html
index b68b0aa48d..ecb79f2264 100644
--- a/components/tag/src/tag-add/tag-add.html
+++ b/components/tag/src/tag-add/tag-add.html
@@ -6,7 +6,8 @@
     (click)="open()"
     #origin="cdkOverlayOrigin"
   >
-    <dt-icon class="dt-tag-add-icon-button" name="plus-add"></dt-icon> Add Tag
+    <dt-icon class="dt-tag-add-icon-button" name="plus-add"></dt-icon>
+    <span class="dt-tag-add-button-text">Add Tag</span>
   </button>
   <ng-template
     #overlay
diff --git a/components/tag/src/tag-add/tag-add.scss b/components/tag/src/tag-add/tag-add.scss
index b3209ca773..4784a80f80 100644
--- a/components/tag/src/tag-add/tag-add.scss
+++ b/components/tag/src/tag-add/tag-add.scss
@@ -6,37 +6,49 @@
   display: inline-block;
 
   cursor: pointer;
-}
 
-.dt-tag-add-container {
-  position: relative;
-  display: inline-block;
-}
+  .dt-tag-add-container {
+    position: relative;
+  }
 
-.dt-tag-add-button {
-  height: 24px;
-  width: 90px;
-  font-size: 12px;
+  .dt-tag-add-button {
+    height: 24px;
+    width: 88px;
+    font-size: 12px;
+    display: inline-flex;
 
-  color: $turquoise-700;
-  background-color: #ffffff;
-  text-align: left;
+    color: $turquoise-700;
+    background-color: #ffffff;
+    text-align: left;
+    vertical-align: middle;
 
-  border: 1px solid $turquoise-600;
-  border-radius: 12px;
+    border: 1px solid $turquoise-600;
+    border-radius: 12px;
 
-  padding-right: 12px;
-  padding-left: 8px;
+    padding-top: 2px;
 
-  cursor: pointer;
-  &:active {
-    outline: none;
+    cursor: pointer;
+    &:active {
+      outline: none;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  .dt-tag-add-button-text {
+    width: 44px;
+    height: 16px;
+    vertical-align: middle;
+    line-height: 16px;
+    margin-left: 4px;
   }
 }
 
 .dt-tag-add-overlay {
   width: 320px;
-  height: 82px; // UX requested value: 78
+  height: 80px;
   border: 1px solid $gray-700;
   border-radius: 3px;
   background-color: $gray-700;
@@ -62,8 +74,11 @@
   width: 16px;
   height: 16px;
   vertical-align: text-top;
-  display: inline-block;
   fill: #ffffff;
+
+  &.dt-tag-add-icon-button {
+    margin-left: 2px;
+  }
 }
 
 .dt-tag-add-icon-button {
@@ -77,7 +92,7 @@
 
 .dt-tag-add-fields {
   display: flex;
-  margin-top: 12px; // UX requested value: 16
+  margin-top: 12px;
 }
 
 .dt-tag-add-input {