Update styling on search feedback bar

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;
+    }
   }
 }
 

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 }}

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..."