Compass-289: Styles for tabs, databases view, collections view, action bar across the app. (#618)

* Compass-289: instance-level, db-level, collection-level tabs restyle all on new light theme; Compass-322: restyle databases table for light theme; Compass-336: style collections table at database-level

* Compass-209: Index view action bar consistency

* Compass-209: Action bar consistency on doc validation as well as some general view consistency on doc validation

* add query bar border back

* add query bar border radius back

* scrollbar alignment fixes, and container for RTSS charts.

* removed rounded corners

* document insert button position fix

Author: fredtruman

src/app/home/index.less

@@ -74,27 +74,13 @@
     font-size: 24px;
   }
   .column-container {
-    display: flex;
-    overflow: hidden;
-    height: 100vh; // this isn't working properly at 100, is it a flexbox bug?
-    margin-top: -102px; // total computed header + .refine-view-container height
-    padding-top: 102px; // total computed header + .refine-view-container height
-    width: 100%;
-    &.with-refinebar {
-      margin-top: -155px;
-      padding-top: 155px;
-    }
-    &.with-refinebar-and-message {
-      margin-top: -187px;
-      padding-top: 187px;
-    }
     &::-webkit-scrollbar {
       display: none;
     }
   }
 
   .header-margin {
-    margin-top: 60px; // size of header
+    margin-top: 50px; // size of header
   }
 
   .column {
@@ -109,11 +95,38 @@
 
   .main {
     padding: 0 26px 100px 26px;
-    flex: 1;
     overflow-x: hidden;
     background-color: @gray8;
+    position: absolute;
+    left: 250px;
+    right: 0;
+    bottom: 0;
+    top: 95px;
   }
 
+    .column-container {
+      &.with-message {
+        .main {
+          top: 128px;
+        }
+      }
+      &.with-refinebar {
+        .main {
+          top: 149px;
+        }
+      }
+      &.with-refinebar-and-message {
+        .main {
+          top: 181px;
+        }
+      }
+      &.with-refinebar-and-2xmessage {
+        .main {
+          top: 214px;
+        }
+      }
+    }
+
   .side {
     width: 0;
     font-family: @font-family-monospace;

src/app/styles/10strap.less

@@ -68,11 +68,11 @@ textarea {
 
 .form-control {
   color: @gray0;
-  border: 1px solid rgba(0,0,0,0.1);
+  border: 1px solid rgba(0,0,0,0.2);
   background: rgba(0,0,0,0.05);
   border-radius: 0;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 }
 
 input.form-control,
@@ -148,7 +148,7 @@ a.no-underline:hover {
   font-weight: bold;
 }
 .btn-xs {
-  padding: 2px 8px;
+  padding: 1px 8px;
   font-size: 11px;
   font-weight: bold;
 }

src/app/styles/index.less

@@ -95,3 +95,36 @@ i.syntax-help {
     color: #a94442; // same color as bootstrap validation error borders
   }
 }
+
+//action-bar, just a drop-shadow for now but should think about where to put these styles eventually
+.action-bar {
+  box-shadow: 0px 1px 2px rgba(0,0,0,.2);
+  height: 32px;
+  background: @gray8;
+  border-bottom: 1px solid @gray7;
+  padding-top: 4px;
+  padding-left: 20px;
+  position: fixed;
+  left: 250px;
+  right: 0;
+  z-index: 4;
+}
+
+  .rtss-databases,
+  .collections {
+    .action-bar {
+      top: 46px;
+    }
+  }
+
+  .validation {
+    .action-bar {
+      top: 96px;
+    }
+  }
+
+  .column.main {
+      .action-bar {
+        position: static;
+      }
+  }

src/internal-packages/app/styles/tab-nav-bar.less

@@ -16,30 +16,30 @@
     margin-bottom: 0;
     position: absolute;
     top: 16px;
-    margin-left: 10px;
+    margin-left: 0px;
+    padding-left: 20px;
   }
 
   &-tab {
-    height: 30px;
+    height: 29px;
     width: 130px;
     margin-right: 5px;
     font-size: 13px;
     text-transform: uppercase;
-    border-radius: 3px 3px 0 0;
     display: flex;
     justify-content: center;
     cursor: pointer;
     margin-bottom: 0;
-    color: #43B1E5;
+    color: #838F9B;
+    border-bottom: 3px solid @pw;
   }
 
   &-tab:hover {
     background-color: @pw;
-    color: @gray0;
-    border: 1px solid @gray7;
+    color: @chart1;
 
     .tab-nav-bar-link {
-      color: @gray0;
+      color: @chart1;
     }
   }
 
@@ -48,7 +48,6 @@
     text-transform: uppercase;
     font-size: 11px;
     font-weight: bold;
-    color: #43B1E5;
   }
 
   &-link:hover, &-link:active, &-link:focus {
@@ -58,22 +57,19 @@
 
   &-is-selected {
     .tab-nav-bar-link {
-      color: @gray0;
+      color: @chart1;
     }
 
     &.tab-nav-bar-tab:hover {
-      background-color: @gray8;
-      border-bottom: none;
+      border-color: @chart1;
     }
-    background-color: @gray8;
     cursor: default;
-    border: #ebebed 1px solid;
-    border-bottom: none;
+    border-color: @chart1;
   }
-
+  //shouldn't positioning of the component happen when it's rendered by its parent?
   &-is-light-theme {
     .tab-nav-bar-header {
-      top: 60px;
+      top: 50px;
       height: 46px;
       z-index: 2;
       border-bottom: 1px solid #ebebed;

src/internal-packages/collection/styles/index.less

@@ -14,27 +14,13 @@
     font-size: 24px;
   }
   .column-container {
-    display: flex;
-    overflow: hidden;
-    height: 100vh; // this isn't working properly at 100, is it a flexbox bug?
-    margin-top: -102px; // total computed header + .refine-view-container height
-    padding-top: 102px; // total computed header + .refine-view-container height
-    width: 100%;
-    &.with-refinebar {
-      margin-top: -155px;
-      padding-top: 155px;
-    }
-    &.with-refinebar-and-message {
-      margin-top: -187px;
-      padding-top: 187px;
-    }
     &::-webkit-scrollbar {
       display: none;
     }
   }
 
   .header-margin {
-    margin-top: 60px; // size of header
+    margin-top: 50px; // size of header
   }
 
   .column {
@@ -49,9 +35,36 @@
 
   .main {
     padding: 0 26px 100px 26px;
-    flex: 1;
     overflow-x: hidden;
     background-color: @gray8;
+    position: absolute;
+    left: 250px;
+    right: 0;
+    bottom: 0;
+    top: 95px;
+  }
+
+  .column-container {
+    &.with-message {
+      .main {
+        top: 128px;
+      }
+    }
+    &.with-refinebar {
+      .main {
+        top: 149px;
+      }
+    }
+    &.with-refinebar-and-message {
+      .main {
+        top: 181px;
+      }
+    }
+    &.with-refinebar-and-2xmessage {
+      .main {
+        top: 214px;
+      }
+    }
   }
 
   .side {

src/internal-packages/crud/lib/component/document-list.jsx

@@ -249,7 +249,7 @@ class DocumentList extends React.Component {
       <div className="header-margin">
         <this.queryBar />
         <this.samplingMessage insertHandler={this.handleOpenInsert.bind(this)} />
-        <div className="column-container with-refinebar-and-message">
+        <div className="column-container with-refinebar-and-2xmessage">
           <div className="column main">
             <ol className={LIST_CLASS} ref={(c) => this._node = c}>
               {this.state.docs}

src/internal-packages/crud/styles/document-list.less

@@ -1,6 +1,6 @@
 .document-list {
   .list-unstyled;
-  padding-top: 10px;
+  padding-top: 0;
   padding-bottom: 10px;
   position: relative;
 

src/internal-packages/database/lib/components/collections-table.jsx

@@ -42,11 +42,11 @@ class CollectionsTable extends React.Component {
 
     return (
       <div className="collections-table">
-        <div className="collections-table-create-button">
+        <div className="collections-table-create-button action-bar">
           {writable ?
             <TextButton
               text="Create Collection"
-              className="btn btn-default btn-sm"
+              className="btn btn-primary btn-xs"
               clickHandler={this.onCreateCollectionButtonClicked.bind(this)} /> : null}
         </div>
         <this.SortableTable

src/internal-packages/database/lib/components/index.jsx

@@ -17,7 +17,7 @@ class DatabaseView extends React.Component {
   render() {
     const collectionsTableView = <CollectionsTableView />;
     return (
-      <div className="collections-table">
+      <div className="collections">
         <this.TabNavBar
           theme="light"
           tabs={['Collections']}

src/internal-packages/database/styles/index.less

@@ -1,16 +1,23 @@
 @import './drop-collection-dialog.less';
 
+.collections {
+
+  .tab-nav-bar-header {
+    top: 0;
+  }
+}
+
 .collections-table {
-  font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 500;
   background-color: @gray8;
-  height: 100vh;
-  min-width: 100%;
-  overflow-x: scroll;
-  margin-top: -60px; //  hack to compensate for light view having +60 margin top
+  overflow-y: scroll;
+  padding: 0 20px 100px 20px;
+  position: absolute;
+  top: 78px;
+  right: 0;
+  bottom: 0;
+  left: 250px;
 
   &-create-button {
-    margin-left: 23px;
-    margin-top: 130px; // this is a bit of a hack
+
   }
 }