Updated code for fixes

Author: amolskh

components/TaggedValue/TaggedValue.jsx

@@ -15,7 +15,7 @@ const TaggedValue = ({title,subText,style,count}) => {
   return (
     <div className={taggedValueClass}>
       <div className="tagged-value-bg">{title}</div>
-      <span>{subText}</span>
+      <span className="subText">{subText}</span>
     </div>
   )
 }

components/TaggedValue/TaggedValue.scss

@@ -10,7 +10,7 @@ $accent: #59A7FF;
   height: 20px;
   .tagged-value-bg {
     display: inline;
-    padding: 1px 4px 1px 4px;
+    padding: 4px 4px 1px 4px;
     min-width: 15px;
     max-height: 15px;
     background: $accent;
@@ -23,7 +23,7 @@ $accent: #59A7FF;
     color:  $gray;
     padding: 1px 7px 2px 7px;
   }
-  span {
+  .subText {
     font-family: "Roboto", Arial, Helvetica, sans-serif;
     font-size: 13px;
     line-height: 15px;

components/TaggedValue/TaggedValueExamples.scss

@@ -1,17 +1,22 @@
+$gray: #47474F;
+$blue : #59A7FF;
+$purple: #B47DD6;
+
 .sample1 {
     .tagged-value-bg {
-        color: blue;
+        background-color: $purple;
+        color: white;
     }
-    span {
+    .subText {
         color: white;
     }
 }
 
 .sample2 {
     .tagged-value-bg {
-        color: red;
+         color: $gray;
     }
-    span{
+    .subText{
         color: lightblue;
     }
 }