updates application interface to match design specs

wherehows-web/app/styles/abstracts/_mixins.scss

@@ -82,7 +82,7 @@
 
 /// Proxy for AD container styles
 @mixin nacho-container {
-  border: 1px solid set-color(grey, light);
+  border: 1px solid get-color(black, 0.05);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
   padding: item-spacing(4);
   background-color: get-color(white);

wherehows-web/app/styles/base/_base.scss

@@ -13,7 +13,7 @@ html {
  * Apply padding to top and bottom to account for navigation and footer
  */
 body {
-  background-color: set-color(white, base);
+  background-color: get-color(slate0);
   overflow-y: scroll;
   overflow-x: hidden;
 }

wherehows-web/app/styles/components/_all.scss

@@ -22,6 +22,7 @@
 @import 'upstream-owners/all';
 @import 'dataset-schema/all';
 @import 'tooltips/all';
+@import 'entity-header/all';
 
 @import 'nacho/nacho-button';
 @import 'nacho/nacho-global-search';

wherehows-web/app/styles/components/entity-header/_all.scss

@@ -0,0 +1 @@
+@import 'entity-header';

wherehows-web/app/styles/components/entity-header/_entity-header.scss

@@ -0,0 +1,13 @@
+.dataset-entity-header {
+  background-color: white;
+  padding-top: item-spacing(5);
+}
+
+.dataset-entity-tabs {
+  background-color: white;
+
+  ///overrides library styles to match design spec
+  .ivy-tabs-tablist {
+    margin-bottom: 0;
+  }
+}

wherehows-web/app/styles/components/nacho/_nacho-breadcrumbs.scss

@@ -1,7 +1,7 @@
 @import 'restyle';
 
 $primary-border-color: get-color(gray3, 0.8);
-$secondary-border-color: set-color(white, base);
+$secondary-border-color: get-color(slate0);
 
 /// Defines styles for the breadcrumb container
 @include restyle-define(
@@ -67,6 +67,16 @@ $secondary-border-color: set-color(white, base);
 .nacho-breadcrumbs {
   @include restyle(breadcrumbs);
 
+  &--white-surface {
+    $secondary-border-color: get-color(white);
+
+    .nacho-breadcrumbs__crumb__grain {
+      &::after {
+        border-left: 30px solid $secondary-border-color;
+      }
+    }
+  }
+
   &__crumb {
     float: left;
 

wherehows-web/app/styles/layout/_page.scss

@@ -3,6 +3,7 @@
 }
 
 /// Styles that apply to the layout for a page with two columns sidebar and content style
-.wh-sidebar, .wh-main-content {
+.wh-sidebar,
-  margin: 30px 0;
+.wh-main-content {
+  margin-top: item-spacing(5);
 }

wherehows-web/app/templates/browse/entity.hbs

@@ -1,7 +1,6 @@
 {{#if shouldShowBrowserRevamp}}
   <div class="row">
     <div class="container">
-      <div class="row">
       {{#browser/containers/data-systems params=model as |dataSystemsContainer|}}
         {{#if dataSystemsContainer.getDataSystemsNodesTask.isRunning}}
           {{pendulum-ellipsis-animation}}
@@ -33,7 +32,6 @@
       {{/browser/containers/data-systems}}
     </div>
   </div>
-  </div>
 {{else}}
   <div class="row">
     {{browser/containers/browser-summary params=model}}

wherehows-web/app/templates/datasets/dataset.hbs

@@ -1,6 +1,6 @@
-<div class="container data-systems-container">
+<div id="dataset" class="dataset-entity-header">
-  <div id="dataset">
+  <div class="container">
-    {{datasets/urn-breadcrumbs urn=model.uri}}
+    {{datasets/urn-breadcrumbs class="nacho-breadcrumbs nacho-breadcrumbs--white-surface" urn=model.uri}}
 
     <div class="row">
       <div class="container">
@@ -49,10 +49,13 @@
     </div>
 
     {{datasets/containers/dataset-owner-list urn=encodedUrn}}
+
   </div>
+</div>
 
-  {{#ivy-tabs selection=tabSelected as |tabs|}}
+{{#ivy-tabs selection=tabSelected as |tabs|}}
-
+  <div class="dataset-entity-tabs">
+    <div class="container">
       {{#tabs.tablist as |tablist|}}
 
         {{#unless isPinot}}
@@ -84,9 +87,11 @@
             {{/if}}
           {{/tablist.tab}}
         {{/if}}
-
       {{/tabs.tablist}}
+    </div>
+  </div>
 
+  <div class="container">
     {{#tabs.tabpanel tabIds.Properties}}
       {{datasets/containers/dataset-properties
         urn=encodedUrn
@@ -123,6 +128,5 @@
         {{datasets/containers/dataset-acl-access urn=encodedUrn}}
       {{/tabs.tabpanel}}
     {{/if}}
-
+  </div>
-  {{/ivy-tabs}}
+{{/ivy-tabs}}
-</div>

wherehows-web/app/templates/search.hbs

@@ -19,7 +19,7 @@
     <section class="search-results page-section-container">
       {{#if model.count}}
         <div class="search-pagination">
-          <ul class="pager">
+          <ul class="pager" style="margin-top: 0">
             {{#unless first}}
               <li class="previous">
                 {{#link-to 'search'