styling, changed default window size

src/collection-stats/index.js

@@ -34,7 +34,7 @@ var CollectionStatsView = AmpersandView.extend({
   format: function(propertyName) {
     var value = this.model.get(propertyName) || 0;
     var precision = value <= 1000 ? '0' : '0.0';
-    var format = propertyName.indexOf('_size') > -1 ? 'b' : 'a';
+    var format = propertyName.indexOf('_size') > -1 ? ' b' : 'a';
     return numeral(value).format(precision + format);
   },
   derived: {

src/collection-stats/index.less

@@ -4,42 +4,59 @@
   position: absolute;
   right: 20px;
   text-align: right;
-  min-width: 450px;
+  min-width: 520px;
 }
 .collection-stats {
   display: inline-block;
+  position: relative;
   font-weight: 200;
   list-style: none;
-  padding: 0 30px 0 0;
-  margin: 11px 30px 0 0;
-  border-right: 1px solid @gray7;
+  padding: 0 20px 0 0;
+  margin: 0 20px 0 0;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 2px;
+    width: 1px;
+    height: 24px;
+    background: @gray7;
+  }
 
   &:last-child {
-    border-right: none;
     padding: 0;
     margin: 11px 0 0 0;
+
+    &::after {
+      display: none;
+    }
   }
 }
 .collection-stats-item {
   display: inline-block;
-  margin-right: 10px;
+  margin-right: 12px;
 
   &:last-child {
     margin-right: 0;
   }
 }
 .collection-stats-primary-label {
+  display: inline-block;
   text-transform: uppercase;
-  letter-spacing: 1px;
   font-size: 12px;
   color: @gray3;
+  margin-right: 5px;
 }
 .collection-stats-primary-value {
-  font-size: 36px;
-  line-height: 36px;
+  display: inline-block;
+  font-size: 24px;
+  line-height: 24px;
 }
 .collection-stats-label {
   font-size: 11px;
+  line-height: 11px;
   color: @gray3;
 }
 .collection-stats-value {

src/electron/window-manager.js

@@ -9,8 +9,8 @@ var path = require('path');
 var RESOURCES = path.resolve(__dirname, '../../');
 var DEFAULT_URL = 'file://' + path.join(RESOURCES, 'index.html#connect');
 
-var DEFAULT_WIDTH = 1024;
-var DEFAULT_HEIGHT = 700;
+var DEFAULT_WIDTH = 1280;
+var DEFAULT_HEIGHT = 800;
 
 var DEFAULT_HEIGHT_DIALOG;
 

src/field-list/field.jade

@@ -1,5 +1,4 @@
 .schema-field.schema-field-basic
-  hr.field-divider
   .row
     .col-sm-4
       .schema-field-name
@@ -10,3 +9,4 @@
       div(data-hook='minichart-container')
   div(data-hook='fields-subview')
   div(data-hook='arrayfields-subview')
+  hr.field-divider

src/home/collection.jade

@@ -1,5 +1,5 @@
 .collection-view.clearfix
-  div(data-hook='sampling-message-subview')
+  //- div(data-hook='sampling-message-subview')
   div.modal.fade(tabindex='-1', role='dialog', arialabelledby='Share Schema Confirmation', data-hook='share-schema-confirmation')
     div.modal-dialog.modal-sm
       .modal-content

src/home/index.less

@@ -80,10 +80,13 @@
 
 .collection-view {
   header {
-    padding: 12px 25px;
+    padding: 12px 25px 0;
     position: relative;
     z-index: 1;
   }
+  h1 {
+    margin-top: 0;
+  }
   .column-container {
     display: flex;
     overflow: hidden;

src/refine-view/index.jade

@@ -1,6 +1,8 @@
-.refine-view-container: .row: .col-md-12
-  form: .input-group(data-hook='refine-input-group')
+.refine-view-container
+  .query-input-container: .row: .col-md-12: form: .input-group(data-hook='refine-input-group')
     input.form-control.input-sm(type='text', data-hook='refine-input')
     span.input-group-btn
       button.btn.btn-info.btn-sm(type='button', data-hook='refine-button') Apply
       button.btn.btn-default.btn-sm(type='button', data-hook='reset-button') Reset
+  .sampling-message
+    span Query returned 9867 documents. This report is based on a sample of 1000 documents (10.13%).

src/refine-view/index.less

@@ -1,19 +1,28 @@
 .refine-view-container {
-  background: @gray8;
-  padding: 12px 25px;
   position: relative;
   z-index: 1;
 
-  input[type='text'] {
-    font-family: @font-family-monospace;
-    background: @pw;
-    height: 28px;
-    & + .input-group-btn {
-      padding-left: 10px;
+  .query-input-container {
+    padding: 12px 25px;
+    background: @gray8;
 
-      &:last-child > .btn {
-        margin-left: 2px;
+    input[type='text'] {
+      font-family: @font-family-monospace;
+      background: @pw;
+      height: 28px;
+      & + .input-group-btn {
+        padding-left: 10px;
+
+        &:last-child > .btn {
+          margin-left: 2px;
+        }
       }
     }
   }
+  .sampling-message {
+    font-size: 14px;
+    font-weight: 200;
+    padding: 5px 25px;
+    border-bottom: 2px solid @gray7
+  }
 }

styles/palette.less

@@ -19,8 +19,9 @@
 @gray7: #ebebed;
 @gray8: #f5f6f7;
 
-@slate0: #4c5259;
-@slate1: #70757a;
+@slate0: #42494f;
+@slate1: #4c5259;
+@slate2: #70757a;
 
 @blue3: #5b81a9; // TODO: deprecate
 @blue4: #84a1bf; // TODO: deprecate

styles/sidebar.less

@@ -1,4 +1,4 @@
-@sidebar-bg: @slate0;
+@sidebar-bg: @slate1;
 @sidebar-width: 220px;
 
 .sidebar {
@@ -9,7 +9,7 @@
   margin-bottom: 0;
 
   .compass-logo {
-    background: @slate1 url("images/logo-compass-on-dark.png") center center no-repeat;
+    background: @slate0 url("images/logo-compass-on-dark.png") center center no-repeat;
     background-size: 162px 28px;
     width: @sidebar-width;
     height: 60px;
@@ -40,7 +40,7 @@
       .num-databases,
       .num-collections {
         display: inline-block;
-        border-right: 1px solid @slate1;
+        border-right: 1px solid @slate2;
         padding-right: 10px;
         margin-right: 10px;
       }
@@ -76,11 +76,11 @@
       margin-left: 30px;
       margin-top: 7px;
       height: auto;
-      background: @slate0;
+      background: @slate1;
       color: @pw;
       width: 174px;
       border: none;
-      border-bottom: 1px solid lighten(@slate0, 5%);
+      border-bottom: 1px solid lighten(@slate1, 5%);
     }
     // input[type=search] {
     //   border-radius: 18px;
@@ -108,10 +108,10 @@
       color: @gray5;
 
       &:hover {
-        background: lighten(@slate0, 5%);
+        background: lighten(@slate1, 5%);
         a {
           color: @pw;
-          border-left: 4px solid lighten(@slate0, 5%);
+          border-left: 4px solid lighten(@slate1, 5%);
           text-decoration: none;
         }
       }