ux: search design update

public/sass/components/_search.scss

@@ -69,6 +69,7 @@
   padding: $spacer;
   position: relative;
   flex-grow: 10;
+  margin-bottom: 1rem;
 
   .label-tag {
     margin-left: 6px;
@@ -84,9 +85,16 @@
   }
 }
 
+.search-section {
+  background: $panel-bg;
+  border: $panel-border;
+  padding: $panel-padding;
+  margin-bottom: 8px;
+}
+
 .search-section__header {
   font-size: $font-size-h6;
-  padding: 0.6rem 0;
+  padding: 8px 0 2px 0;
   color: $text-color-weak;
   display: flex;
   flex-grow: 1;
@@ -105,7 +113,7 @@
 }
 
 .search-section__header__icon {
-  padding: 3px 10px;
+  padding: 5px 10px;
 }
 
 .search-section__header__toggle {
@@ -170,24 +178,34 @@
 }
 
 .search-item__tags {
-  padding: 8px;
+  padding: 10px;
 }
 
 .search-item__actions {
   flex: 0 0 auto;
+  padding: 0 10px 0 0;
 }
 
 .search-item__actions__item {
-  display: none;
+  display: inline-block;
+  opacity: 0;
+  width: 0;
+  transition: all 0.2s ease-in-out;
+  .fa-star, .fa-star-o {
+    color: $orange;
+    line-height: 37px;
+  }
 }
 
 .search-item:hover {
   .search-item__actions__item {
-    opacity: 0.8;
+    width: 15px;
+    opacity: 1;
   }
 }
 
 .search-button-row {
   text-align: center;
   padding: $spacer*2 $spacer;
+  background: $panel-bg;
 }