Increase contrast between in/out of collection icon state in quick add list

Author: andrewn

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,
 

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 {