ux: search design update

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

@@ -74,15 +74,10 @@
 							</div>
 						</span>
 						<span class="search-item__tags">
-							<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag"  class="label label-tag">
+							<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag" class="label label-tag">
 								{{tag}}
 							</span>
 						</span>
-						<span class="search-item__actions">
-              <span class="search-item__actions__item" ng-click="ctrl.toggleStar()">
-                <i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
-              </span>
-						</span>
 					</a>
 				</div>
 			</div>

public/sass/_variables.dark.scss

@@ -51,7 +51,7 @@ $critical:              #ed2e18;
 // Scaffolding
 // -------------------------
 $body-bg:  			   	    rgb(23,24,25);
-$page-bg:  			   	    $dark-2;
+$page-bg:  			   	    rgb(22, 23, 25);
 $body-color:   		 	    $gray-4;
 $text-color:   	   		  $gray-4;
 $text-color-strong: 	  $white;
@@ -64,7 +64,7 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 
 // gradients
 $brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);
-$page-gradient: linear-gradient(180deg, #222426 10px, rgba(15, 15, 16, .03) 100px, rgba(10, 10, 11, .03));
+$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px);
 
 // Links
 // -------------------------

public/sass/_variables.scss

@@ -224,6 +224,7 @@ $side-menu-width:  60px;
 // dashboard
 $panel-margin: 10px;
 $dashboard-padding: $panel-margin * 2;
+$panel-padding: 0px 10px 5px 10px;
 
 // tabs
 $tabs-padding-top: 0.6rem;

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

public/sass/layout/_page.scss

@@ -141,16 +141,16 @@
   display: block;
   float: left;
   font-size: 12px;
-  line-height: 36px;
+  line-height: 30px;
   padding: 0 7px 0 37px;
   @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
   position: relative;
   box-shadow: $card-shadow;
 
   &:first-child {
-    padding-left: 13px;
+    padding-left: 10px;
     border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
-    font-size: 20px;
+    font-size: 18px;
   }
 
   &:first-child:before {
@@ -178,11 +178,11 @@
     content: '';
     position: absolute;
     top: 0;
-    right: -18px; // half of square's length
+    right: -14px; // half of square's length
 
     // same dimension as the line-height of .breadcrumb-item
-    width: 36px;
-    height: 36px;
+    width: 30px;
+    height: 30px;
 
     transform: scale(0.707) rotate(45deg);
     // we need to prevent the arrows from getting buried under the next link

public/sass/pages/_dashboard.scss

@@ -42,7 +42,7 @@ div.flot-text {
 }
 
 .panel-content {
-  padding: 0px 10px 5px 10px;
+  padding: $panel-padding;
   height: calc(100% - 27px);
   position: relative;
   overflow: hidden;