From 442360cab5de224413a4e6c218d7746f46da4499 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Wed, 15 Jan 2020 12:23:46 +0100
Subject: [PATCH] Increase contrast between in/out of collection icon state in
 quick add list

---
 client/styles/abstracts/_variables.scss  |  6 ++++++
 client/styles/components/_quick-add.scss | 16 +++++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index d000c8e7..26407719 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -81,6 +81,8 @@ $themes: (
 
     table-button-color: $white,
     table-button-background-color: #979797,
+    table-button-active-color: $white,
+    table-button-background-active-color: #00A1D3,
     table-button-hover-color: $white,
     table-button-background-hover-color: $p5js-pink,
 
@@ -158,6 +160,8 @@ $themes: (
 
     table-button-color: $white,
     table-button-background-color: #979797,
+    table-button-active-color: $white,
+    table-button-background-active-color: #00A1D3,
     table-button-hover-color: $white,
     table-button-background-hover-color: $p5js-pink,
 
@@ -232,6 +236,8 @@ $themes: (
 
     table-button-color: #333,
     table-button-background-color: #C1C1C1,
+    table-button-active-color: #333,
+    table-button-background-active-color: #00FFFF,
     table-button-hover-color: #333,
     table-button-background-hover-color: $yellow,
 
diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss
index 1a5c63fe..78671f78 100644
--- a/client/styles/components/_quick-add.scss
+++ b/client/styles/components/_quick-add.scss
@@ -63,14 +63,20 @@
 
 .quick-add__in-icon {
   display: inline-block;
-
-  & svg {
-    opacity: 0.3;
-  }
 }
 
 .quick-add__icon--in-collection .quick-add__in-icon svg {
-  opacity: 1;
+  @include themify() {
+    // icon graphic
+    polygon {
+      fill: getThemifyVariable('table-button-active-color');
+    }
+
+    // icon background circle
+    path {
+      fill: getThemifyVariable('table-button-background-active-color');
+    }
+  }
 }
 
 .quick-add__add-icon {