Merge pull request #125 from sensu/ui_update

ui update and copy edits

app/assets/stylesheets/appheader.scss

@@ -10,7 +10,7 @@
 // Header wrapping element and row
 .globalheader {
   background-color: white;
-  height: rem-calc(113);
+  height: rem-calc(90);
   padding: rem-calc(0 55);
 
   .inner_wrap {
@@ -93,7 +93,7 @@
 
         a {
           color: lighten($concrete, 5%);
-          font: rem-calc(12) $accent_font;
+          font-size: rem-calc(12);
           line-height: rem-calc(102);
 
           &:hover, &:active {
@@ -110,7 +110,6 @@
         line-height: rem-calc(102);
         @include single-transition(color, $speed: 100ms);
         text-decoration: none;
-        text-transform: lowercase;
 
         &:hover, &:active {
           color: lighten($concrete, 10%);
@@ -142,9 +141,8 @@
   color: darken($concrete, 5%);
   cursor: pointer;
   float: right;
-  font: rem-calc(14) $accent_font;
-  height: rem-calc(100);
-  line-height: rem-calc(102);
+  height: rem-calc(90);
+  line-height: rem-calc(90);
   margin-left: rem-calc(20);
   position: relative;
   @include single-transition(color, $speed: 100ms);
@@ -181,14 +179,15 @@
 
 .appnav .userdropdown {
   background-color: white;
-  // @include border-bottom-radius(rem-calc(5));
-  // @include box-shadow(rgba(0,0,0,.2) 0 rem-calc(5) rem-calc(10));
+  border: 0.5px solid $secondary_gray;
+  border-bottom-radius: rem-calc(3);
+  box-shadow: rgba(0,0,0,.2) 0 rem-calc(5) rem-calc(10);
   display: none;
   margin: 0;
   padding: 0;
   position: absolute;
   right: rem-calc(-20);
-  top: rem-calc(100);
+  top: rem-calc(70);
   width: rem-calc(220);
   z-index: 101;
 

app/assets/stylesheets/common.scss

@@ -3,3 +3,4 @@
 @import "mixins/mixins";
 @import url(//fonts.googleapis.com/css?family=Cabin);
 @import url(//fonts.googleapis.com/css?family=Noto+Sans:400,700);
+@import url(//fonts.googleapis.com/css?family=Work+Sans)

app/assets/stylesheets/extensions/extension.scss

@@ -248,10 +248,6 @@
 
 .versions_count {
   color: $body-font-color;
-  font: {
-    size: rem-calc(12);
-    weight: $bold;
-  }
   // @include inline-block;
   margin: rem-calc(0 20 0 0);
 }

app/assets/stylesheets/extensions/platform_icons.scss

@@ -8,7 +8,7 @@
   @include clearfix;
   list-style: none !important;
   padding: 0;
-  font-family: "helvetica neue",helvetica,arial,sans-serif;
+  font-family: $body-font-family;
 }
 
 li.extension_platform_icon {

app/assets/stylesheets/extensions/search.scss

@@ -7,7 +7,11 @@
 // Styles for the Extensions search interface
 
 .search_bar {
-  background-color: #2c3458;
+  background-color: #202641;
+  background-image: image_url("header_background.png");
+  background-repeat: no-repeat;
+  background-position: right;
+  background-size: contain;
   border: none;
   padding: rem-calc(50 55 21);
 }
@@ -87,9 +91,8 @@
   }
 }
 
-
 .search_field {
-  @include grid-column($columns: 10, $collapse: true);
+  @include grid-column($offset: 2, $columns: 6, $collapse: true);
   position: relative;
 
   .fa {
@@ -98,7 +101,7 @@
       family: "fontawesome" !important;
       size: rem-calc(24);
     }
-    left: rem-calc(25);
+    left: rem-calc(15);
     position: absolute;
     top: rem-calc(20);
     z-index: 2;
@@ -107,13 +110,13 @@
 
 @media #{$small-only} {
   .search_field {
-    @include grid-column($columns: 9, $collapse: true);
+    @include grid-column($offset: 2, $columns: 6, $collapse: true);
   }
 }
 
 @media #{$mobile-only} {
   .search_field {
-    @include grid-column($columns: 9, $collapse: true);
+    @include grid-column($offset: 2, $columns: 6, $collapse: true);
 
     .tt-input::-webkit-input-placeholder {
       color: white !important;
@@ -149,7 +152,8 @@
 input[type="search"].extension_search_textfield {
   background-color: white;
   border: none;
-  // @include border-left-radius(rem-calc(3));
+  border-top-left-radius: rem-calc(3);
+  border-bottom-left-radius: rem-calc(3);
   // @include box-shadow(none);
   color: #797979;
   font: rem-calc(24) $accent_font;
@@ -213,8 +217,9 @@ input[type="search"].extension_search_textfield {
 }
 
 .extension_search_button {
-  background-color: #789fcd;
-  // @include border-right-radius(rem-calc(3));
+  background-color: #89c967;
+  border-top-right-radius: rem-calc(3);
+  border-bottom-right-radius: rem-calc(3);
   color: white;
   font-size: rem-calc(24);
   height: rem-calc(64);
@@ -226,7 +231,7 @@ input[type="search"].extension_search_textfield {
   font-weight: 400;
 
   &:hover, &:active, &:focus {
-    background-color: lighten(#789fcd, 5%);
+    background-color: lighten(#89c967, 5%);
     color: white;
   }
 }
@@ -261,14 +266,15 @@ input[type="search"].extension_search_textfield {
 
 
 .advanced_search_toggle {
-  @include grid-column($columns: 2, $collapse: true, $offset: 10);
+  @include grid-column($columns: 2, $collapse: true, $offset: 8);
   cursor: pointer;
   text-align: center;
-  margin-top: rem-calc(15);
+  margin-top: rem-calc(5);
+  color: white;
 
   span {
-    color: lighten($primary_gray, 20%);
-    font: rem-calc(14) $accent_font;
+    color: white;
+    font: rem-calc(12) $accent_font;
     &:hover{
       color: white;
     }

app/assets/stylesheets/extensions/show.scss

@@ -4,6 +4,11 @@
 // @import "compass/css3/inline-block";
 
 .extension_show {
+
+  .main-header {
+    margin: rem-calc(18);
+  }
+
   .deprecation-notice {
     @include single-transition($speed: 100ms);
     // @include border-radius(rem-calc(2));
@@ -285,6 +290,12 @@
 
   .description {
     width: 540px;
+    font-size: smaller;
+  }
+
+  .downloads-commits {
+    font-size: 10px;
+    color: $secondary_gray;
   }
 
   .row {
@@ -353,8 +364,8 @@
 
 .tier {
   margin-left: rem-calc(12);
-
-  &.supported {
-    color: #208020;
+  color: $primary_green;
+  a {
+    color: $primary_green;
   }
 }