UX: Color fixes (#40)

scss/buttons.scss

@@ -20,6 +20,19 @@
   // }
 }
 
+.btn.btn-transparent.btn-icon-text {
+  background-color: transparent;
+  .d-icon {
+    color: inherit;
+  }
+  &.--active .d-icon {
+    color: var(--accent-color);
+  }
+  &:hover {
+    box-shadow: none;
+  }
+}
+
 .sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
   background: var(--accent-color);
   &:hover {
@@ -52,7 +65,6 @@
 .btn-icon-text,
 .select-kit .select-kit-header.btn-default {
   background: var(--primary-100);
-
   .d-icon {
     color: var(--accent-color);
   }
@@ -118,11 +130,32 @@
 }
 
 .post-controls {
-  svg.d-icon {
+  svg.d-icon:not(.d-icon-heart, .d-icon-far-heart) {
     color: inherit !important; //something we should honestly implement in core imo, when do we ever NOT want the same colour for icon and text?
   }
 }
 
+.discourse-reactions-double-button:hover .reactions-counter {
+  color: var(--love);
+}
+
+.discourse-no-touch
+  .discourse-reactions-actions.has-reacted
+  .discourse-reactions-double-button:hover,
+.discourse-no-touch
+  .discourse-reactions-actions.has-reacted.can-toggle-reaction
+  .discourse-reactions-reaction-button:hover
+  .reaction-button,
+.discourse-no-touch
+  .discourse-reactions-actions.has-reacted:not(.can-toggle-reaction)
+  .discourse-reactions-reaction-button:hover
+  .reaction-button {
+  background: var(--love-low);
+  .d-icon-heart {
+    color: var(--love);
+  }
+}
+
 //undoing the outline for select-kit, since Im using a custom visual cue
 .select-kit.single-select.is-expanded .select-kit-header:not(.btn),
 .select-kit.single-select .select-kit-header:not(.btn):focus,