From e114a74b54f730a952d3edf0ed939bb58e7e35cc Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Mon, 25 Nov 2019 13:53:44 +0100
Subject: [PATCH] Quick add button theme support

---
 client/styles/abstracts/_variables.scss  | 15 +++++++++++++++
 client/styles/components/_quick-add.scss | 22 ++++++++++++++++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 84b8fd38..d000c8e7 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -79,6 +79,11 @@ $themes: (
     primary-button-color: #fff,
     primary-button-background-color: $p5js-pink,
 
+    table-button-color: $white,
+    table-button-background-color: #979797,
+    table-button-hover-color: $white,
+    table-button-background-hover-color: $p5js-pink,
+
     progress-bar-background-color: #979797,
     progress-bar-active-color: #f10046,
 
@@ -151,6 +156,11 @@ $themes: (
     primary-button-color: #fff,
     primary-button-background-color: $p5js-pink,
 
+    table-button-color: $white,
+    table-button-background-color: #979797,
+    table-button-hover-color: $white,
+    table-button-background-hover-color: $p5js-pink,
+
     progress-bar-background-color: #979797,
     progress-bar-active-color: #f10046,
 
@@ -220,6 +230,11 @@ $themes: (
     primary-button-color: #fff,
     primary-button-background-color: $p5js-pink,
 
+    table-button-color: #333,
+    table-button-background-color: #C1C1C1,
+    table-button-hover-color: #333,
+    table-button-background-hover-color: $yellow,
+
     progress-bar-background-color: #979797,
     progress-bar-active-color: #f10046,
 
diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss
index 1775ba3e..486b4cd4 100644
--- a/client/styles/components/_quick-add.scss
+++ b/client/styles/components/_quick-add.scss
@@ -37,8 +37,14 @@
   height:#{35 / $base-font-size}rem;
   @include icon();
   @include themify() {
-    & path {
-      fill: getThemifyVariable('dropdown-color');
+    // icon graphic
+    polygon {
+      fill: getThemifyVariable('table-button-color');
+    }
+
+    // icon background circle
+    path {
+      fill: getThemifyVariable('table-button-background-color');
     }
 
     & svg {
@@ -69,6 +75,18 @@
 }
 
 .quick-add__item-toggle:hover {
+  @include themify() {
+    .quick-add__icon {
+      polygon {
+        fill: getThemifyVariable('table-button-hover-color');
+      }
+
+      path {
+        fill: getThemifyVariable('table-button-background-hover-color');
+      }
+    }
+  }
+
   .quick-add__in-icon {
     display: none;
   }