style(hadron-react-components): Update tabs to LeafyGreen tabs (#2308)

Author: Anemy

package-lock.json

@@ -1,74 +1,14 @@
 .tab-nav-bar {
-
-  &-is-light-theme {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  &-header {
-    background-color: @pw;
-    flex-grow: 0;
-    flex-shrink: 0;
-    flex-basis: 38px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-end;
-    position: relative;
-    margin: 0 15px;
-    border-bottom: 4px solid @gray10; 
-  }
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: auto;
 
   &-tabs {
-    display: flex;
-    justify-content: flex-end;
-    align-self: flex-end;
-    margin-bottom: 0;
-    position: absolute;
-    top: 9px;
-    margin-left: 0px;
-    padding-left: 0px;
-  }
-
-  &-tab {
-    height: 29px;
-    width: 130px;
-    margin-right: 5px;
-    font-size: 13px;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    margin-bottom: 0;
-    color: @gray9;
-    border-bottom: 4px solid @gray10;
-  }
-
-  &-tab:hover {
-    color: @gray1;
-  }
-
-  &-link {
-    margin: auto;
-    font-size: 14px;
-    font-weight: bold;
-    padding-bottom: 5px;
-  }
-
-  &-link:hover, &-link:active, &-link:focus {
-    text-decoration: none;
-    color: @gray1;
-  }
-
-  &-is-selected {
-    cursor: default;
-    border-bottom-color: @green2;
-    .tab-nav-bar-link {
-      color: @gray1;
-    }
+    padding: 0 10px;
   }
 }
 

packages/compass-collection/src/assets/less/compass/components/_tab-nav-bar.less

@@ -2,6 +2,7 @@
 
 .collection-header {
   margin-top: 15px;
+  margin-bottom: 5px;
 
   &-title {
     font-size: 24px;

packages/compass-collection/src/components/collection-header/collection-header.less

@@ -80,7 +80,7 @@ class Collection extends Component {
             pipeline={this.props.pipeline}
             sourceName={this.props.sourceName} />
           <TabNavBar
-            theme="light"
+            aria-label="Collection Tabs"
             tabs={this.props.tabs}
             views={this.props.views}
             mountAllViews

packages/compass-collection/src/components/collection/collection.jsx

@@ -1,74 +1,14 @@
 .tab-nav-bar {
-
-  &-is-light-theme {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  &-header {
-    background-color: @pw;
-    flex-grow: 0;
-    flex-shrink: 0;
-    flex-basis: 38px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-end;
-    position: relative;
-    margin: 0 15px;
-    border-bottom: 4px solid @gray10; 
-  }
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: auto;
 
   &-tabs {
-    display: flex;
-    justify-content: flex-end;
-    align-self: flex-end;
-    margin-bottom: 0;
-    position: absolute;
-    top: 9px;
-    margin-left: 0px;
-    padding-left: 0px;
-  }
-
-  &-tab {
-    height: 29px;
-    width: 130px;
-    margin-right: 5px;
-    font-size: 13px;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    margin-bottom: 0;
-    color: @gray9;
-    border-bottom: 4px solid @gray10;
-  }
-
-  &-tab:hover {
-    color: @gray1;
-  }
-
-  &-link {
-    margin: auto;
-    font-size: 14px;
-    font-weight: bold;
-    padding-bottom: 5px;
-  }
-
-  &-link:hover, &-link:active, &-link:focus {
-    text-decoration: none;
-    color: @gray1;
-  }
-
-  &-is-selected {
-    cursor: default;
-    border-bottom-color: @green2;
-    .tab-nav-bar-link {
-      color: @gray1;
-    }
+    padding: 0 10px;
   }
 }
 

packages/compass-connect/src/assets/less/compass/components/_tab-nav-bar.less

@@ -52,7 +52,7 @@ class Database extends Component {
     return (
       <div className={classnames(styles.database)}>
         <TabNavBar
-          theme="light"
+          aria-label="Database Tabs"
           tabs={this.tabs}
           views={this.views}
           mountAllViews={false}

packages/compass-database/src/components/database/database.jsx

@@ -1,74 +1,14 @@
 .tab-nav-bar {
-
-  &-is-light-theme {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  &-header {
-    background-color: @pw;
-    flex-grow: 0;
-    flex-shrink: 0;
-    flex-basis: 38px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-end;
-    position: relative;
-    margin: 0 15px;
-    border-bottom: 4px solid @gray10; 
-  }
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: auto;
 
   &-tabs {
-    display: flex;
-    justify-content: flex-end;
-    align-self: flex-end;
-    margin-bottom: 0;
-    position: absolute;
-    top: 9px;
-    margin-left: 0px;
-    padding-left: 0px;
-  }
-
-  &-tab {
-    height: 29px;
-    width: 130px;
-    margin-right: 5px;
-    font-size: 13px;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    margin-bottom: 0;
-    color: @gray9;
-    border-bottom: 4px solid @gray10;
-  }
-
-  &-tab:hover {
-    color: @gray1;
-  }
-
-  &-link {
-    margin: auto;
-    font-size: 14px;
-    font-weight: bold;
-    padding-bottom: 5px;
-  }
-
-  &-link:hover, &-link:active, &-link:focus {
-    text-decoration: none;
-    color: @gray1;
-  }
-
-  &-is-selected {
-    cursor: default;
-    border-bottom-color: @green2;
-    .tab-nav-bar-link {
-      color: @gray1;
-    }
+    padding: 0 10px;
   }
 }