ux: style tweaks

public/app/core/components/search/search.html

@@ -55,15 +55,15 @@
       </div>
       </div>
 
 
       <div class="search-filter-box">
       <div class="search-filter-box">
-        <a href="dashboard/new" class="search-filter-box-item">
+        <a href="dashboard/new" class="search-filter-box-link">
           <i class="gicon gicon-dashboard-new"></i>
           <i class="gicon gicon-dashboard-new"></i>
           Dashboard
           Dashboard
         </a>
         </a>
-        <a href="dashboards/folder/new" class="search-filter-box-item">
+        <a href="dashboards/folder/new" class="search-filter-box-link">
           <i class="gicon gicon-folder-new"></i>
           <i class="gicon gicon-folder-new"></i>
           Folder
           Folder
         </a>
         </a>
-        <a class="search-button-row-explore-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
+        <a class="search-filter-box-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
           <img src="public/img/icn-dashboard-tiny.svg" width="20" /> Find  dashboards on Grafana.com
           <img src="public/img/icn-dashboard-tiny.svg" width="20" /> Find  dashboards on Grafana.com
         </a>
         </a>
       </div>
       </div>

public/app/core/components/search/search_results.html

@@ -13,9 +13,10 @@
     <div ng-show="ctrl.editable && section.id > 0" ng-click="ctrl.navigateToFolder(section, $event)">
     <div ng-show="ctrl.editable && section.id > 0" ng-click="ctrl.navigateToFolder(section, $event)">
         <i class="fa fa-cog search-section__header__toggle"></i>&nbsp;
         <i class="fa fa-cog search-section__header__toggle"></i>&nbsp;
     </div>
     </div>
-    <i class="fa fa-minus search-section__header__toggle" ng-show="section.expanded"></i>
-    <i class="fa fa-plus search-section__header__toggle" ng-hide="section.expanded"></i>
+		<i class="fa fa-angle-down search-section__header__toggle" ng-show="section.expanded"></i>
+    <i class="fa fa-angle-right search-section__header__toggle" ng-hide="section.expanded"></i>
   </a>
   </a>
+
   <div class="search-section__header" ng-show="section.hideHeader"></div>
   <div class="search-section__header" ng-show="section.hideHeader"></div>
 
 
   <div ng-if="section.expanded">
   <div ng-if="section.expanded">
@@ -44,4 +45,5 @@
       </span>
       </span>
     </a>
     </a>
   </div>
   </div>
-</div>
+</div>
\ No newline at end of file
+

public/sass/components/_search.scss

@@ -83,11 +83,17 @@
   margin-bottom: $spacer * 1.5;
   margin-bottom: $spacer * 1.5;
 }
 }
 
 
-.search-filter-box-item {
+.search-filter-box-link {
   display:block;
   display:block;
   margin-bottom: 16px;
   margin-bottom: 16px;
-  i {
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  i, img {
     font-size: 20px;
     font-size: 20px;
+    margin-right: 5px;
   }
   }
 }
 }
 
 
@@ -116,31 +122,27 @@
 .search-section {
 .search-section {
   background: $panel-bg;
   background: $panel-bg;
   border: $panel-border;
   border: $panel-border;
-  padding: 0px 10px 2px 10px;
+  padding: 0px 4px 4px 4px;
   margin-bottom: 3px;
   margin-bottom: 3px;
   border-radius: 5px;
   border-radius: 5px;
 }
 }
 
 
 .search-section__header {
 .search-section__header {
   font-size: $font-size-h6;
   font-size: $font-size-h6;
-  padding: 6px 0 4px 0;
+  padding: 7px 4px 3px 0;
   color: $text-color-weak;
   color: $text-color-weak;
   display: flex;
   display: flex;
   flex-grow: 1;
   flex-grow: 1;
 
 
   &:hover, &.selected {
   &:hover, &.selected {
-    color: $link-hover-color;
-
-    .search-section__header__toggle {
-      background: $tight-form-func-bg;
-      color: $link-hover-color;
-    }
+    color: $text-color;
   }
   }
 }
 }
 
 
 .search-section__header__icon {
 .search-section__header__icon {
-  padding: 5px 10px;
-  width: 35px;
+  padding: 5px 0px;
+  width: 43px;
+  text-align: center;
 }
 }
 
 
 .search-section__header__toggle {
 .search-section__header__toggle {