Adding a default background color for tags while we don't build a tag customization functionality

3 files changed, 11 insertions, 6 deletions

diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/_colors.scss
index 7e90d6ae..bfa0ca95 100644
--- a/web-ui/app/scss/_colors.scss
+++ b/web-ui/app/scss/_colors.scss
@@ -4,8 +4,11 @@ $navigation_background: #3E3A37;
 /* Action buttons and links */
 $action_buttons: #3dabc4;
 
+/* Primary Highlight*/
+$primary_highlight: #FF9C00;
+
 /* Unread count dialog bubble background color */
-$secondary_callout: #FF7902;
+$secondary_callout: darken($primary_highlight, 5);
 
 /* Grayscale */
 $contrast: #EEE;
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 5b59cad6..14a1679f 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -83,9 +83,10 @@
 @mixin tags {
   ul.tags {
     li {
-      background: #DDD;
+      font-size: 0.6rem;
+      background-color: lighten($action_buttons, 12);
+      color: white;
       display: inline;
-      font-size: 0.55em;
       padding: 2px 3px;
       margin: 0 1px;
       position: relative;
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
index 71427af5..7ce13d39 100644
--- a/web-ui/app/scss/styles.scss
+++ b/web-ui/app/scss/styles.scss
@@ -114,8 +114,9 @@
           line-height: 1.2;
           margin: -3px 0 0 0;
           li {
-            background-color: #DDD;
-            color: black;
+            font-size: 0.6rem;
+            background-color: lighten($action_buttons, 12);
+            color: white;
             display: inline-block;
             height: auto;
             font-weight: 400;
@@ -531,7 +532,7 @@ button {
 }
 
 .side-nav-toggle-icon {
-  padding: 9px 0px 8px 19px;
+  padding: 6px 0px 8px 19px;
   display: block;
   left: 0;
   top: 0;