From c9bfccf465bcd383855bf7d79fb26f000b8aaef2 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 20 Apr 2020 09:58:13 +0200
Subject: [PATCH] Update styling on search feedback bar

---
 .../darkswarm/_shop-filters.css.scss          | 39 ++++++++++++-------
 app/views/shop/products/_search_feedback.haml |  9 +++--
 config/locales/en.yml                         |  3 +-
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
index 2d8caf9a54..7916beb48a 100644
--- a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss
@@ -107,26 +107,37 @@
 // Alert when search, taxon, filter is triggered
 
 .alert-box.search-alert {
-  background-color: $clr-yellow-light;
-  border-color: $clr-yellow-light;
+  background-color: $white;
   color: #777;
-  font-size: 0.75rem;
-  padding: 0.5rem 0.75rem;
+  font-size: 1em;
+  padding: 0.35em 0 0;
+  border: 0;
+  margin: 0;
 
-  span.applied-properties {
-    color: #333;
+  .clear-all {
+    color: $grey-500;
+
+    &:hover {
+      color: $grey-600;
+    }
   }
 
-  span.applied-taxons {
-    color: $clr-blue;
-  }
+  span {
+    color: $grey-800;
+    font-style: italic;
 
-  span.applied-search {
-    color: $clr-brick;
-  }
+    &.applied-properties {
+      color: $grey-800;
+    }
 
-  span.filter-label {
-    opacity: 0.75;
+    &.applied-taxons {
+      color: $clr-blue;
+    }
+
+    &.applied-search {
+      font-weight: bold;
+      color: $teal-500;
+    }
   }
 }
 
diff --git a/app/views/shop/products/_search_feedback.haml b/app/views/shop/products/_search_feedback.haml
index 3851f2704d..ee3ade69a5 100644
--- a/app/views/shop/products/_search_feedback.haml
+++ b/app/views/shop/products/_search_feedback.haml
@@ -1,11 +1,11 @@
 .row.animate-slide{ "ng-show" => "query || appliedPropertiesList() || appliedTaxonsList()" }
   .small-12.columns
     .alert-box.search-alert.ng-scope
-      %a.right{"ng-click" => "clearAll()"}
-        = t :products_clear_all
+      %a.clear-all.right{"ng-click" => "clearAll()"}
+        = t :products_clear
         %i.ofn-i_009-close
       %span.filter-label
-        = t :products_showing
+        = t :products_results_for
         %span.applied-properties
           {{ appliedPropertiesList() }}
         %span.applied-taxons
@@ -13,4 +13,5 @@
         %span{ ng: { hide: "!query"} }
           %span{ "ng-show" => "appliedPropertiesList() || appliedTaxonsList()" }
             = t :products_with
-          %span.applied-search "{{ query }}"
+          %span.applied-search
+            {{ query }}
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 691d9d8006..4136241786 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1648,8 +1648,9 @@ See the %{link} to find out more about %{sitename}'s features and to start using
     other: You have <a href='%{path}' target='_blank'>%{count} orders with %{shop}</a> currently open for review. You can make changes until %{oc_close}.
   orders_changeable_orders_alert_html: This order has been confirmed, but you can make changes until <strong>%{oc_close}</strong>.
 
-  products_clear_all: Clear all
+  products_clear: Clear
   products_showing: "Showing:"
+  products_results_for: "Results for"
   products_or: "OR"
   products_with: with
   products_search: "Search..."