Style Edits for COMPASS-153 and COMPASS-532

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

@@ -15,12 +15,12 @@ const debug = require('debug')('mongodb-compass:crud:editable-document');
 /**
  * The arrow up class.
  */
-const ARROW_UP = 'fa fa-arrow-circle-up';
+const ARROW_UP = 'fa fa-arrow-up';
 
 /**
  * The arrow down class.
  */
-const ARROW_DOWN = 'fa fa-arrow-circle-down';
+const ARROW_DOWN = 'fa fa-arrow-down';
 
 /**
  * The base class.
@@ -40,7 +40,7 @@ const FIELD_LIMIT = 30;
 /**
  * The expander class.
  */
-const EXPANDER = 'document document-expander';
+const EXPANDER = 'btn btn-default btn-xs';
 
 /**
  * The test id.
@@ -419,7 +419,7 @@ class EditableDocument extends React.Component {
   renderExpansionText() {
     const extraFields = this.doc.elements.size - FIELD_LIMIT;
     if (this.state.expanded) {
-      return `Show ${extraFields} less fields`;
+      return `Hide ${extraFields} fields`;
     }
     return `Show ${extraFields} more fields`;
   }
@@ -467,9 +467,9 @@ class EditableDocument extends React.Component {
       <div className={this.style()} data-test-id={TEST_ID}>
         <ol className={ELEMENTS}>
           {this.renderElements()}
+          {this.renderExpansion()}
         </ol>
         {this.renderActions()}
-        {this.renderExpansion()}
         {this.renderFooter()}
       </div>
     );

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

@@ -5,12 +5,12 @@ const Element = require('./element');
 /**
  * The arrow up class.
  */
-const ARROW_UP = 'fa fa-arrow-circle-up';
+const ARROW_UP = 'fa fa-arrow-up';
 
 /**
  * The arrow down class.
  */
-const ARROW_DOWN = 'fa fa-arrow-circle-down';
+const ARROW_DOWN = 'fa fa-arrow-down';
 
 /**
  * The base class.
@@ -30,7 +30,7 @@ const FIELD_LIMIT = 30;
 /**
  * The expander class.
  */
-const EXPANDER = 'document document-expander';
+const EXPANDER = 'btn btn-default btn-xs';
 
 /**
  * The test id.
@@ -105,7 +105,7 @@ class ReadonlyDocument extends React.Component {
   renderExpansionText() {
     const extraFields = this.doc.elements.size - FIELD_LIMIT;
     if (this.state.expanded) {
-      return `Show ${extraFields} less fields`;
+      return `Hide ${extraFields} fields`;
     }
     return `Show ${extraFields} more fields`;
   }
@@ -129,8 +129,8 @@ class ReadonlyDocument extends React.Component {
       <div className={BASE} data-test-id={TEST_ID}>
         <ol className={ELEMENTS}>
           {this.renderElements()}
+          {this.renderExpansion()}
         </ol>
-        {this.renderExpansion()}
       </div>
     );
   }

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

@@ -10,6 +10,14 @@
 
   &-elements {
     position: relative;
+
+    .btn {
+      margin: 10px 0px 0px 22px;
+
+      i {
+        margin-right: 5px;
+      }
+    }
   }
 
   &-is-deleting {
@@ -20,38 +28,4 @@
   &-is-editing {
     box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.2);
   }
-
-  &-expander {
-    width: 100%;
-    background-color: #f3f3f3;
-    text-align: center;
-    margin-top: 20px;
-    margin-bottom: -20px;
-    vertical-align: middle;
-    padding: 8px;
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-
-    &:hover {
-      i {
-        color: #999999;
-      }
-
-      span {
-        color: #999999;
-      }
-    }
-
-    span {
-      color: #adacac;
-      text-transform: uppercase;
-      font-weight: bold;
-      margin-left: 5px;
-    }
-
-    i {
-      font-size: 18px;
-      color: #CCCCCC;
-    }
-  }
 }

src/internal-packages/crud/styles/editable-element-field.less

@@ -3,6 +3,10 @@
   border: none;
   padding-left: 1px;
   -webkit-user-select: text;
+  max-width: 15vw; 
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 
   &-is-editing {
     border: 1px solid @gray3;

src/internal-packages/crud/styles/editable-element-value.less

@@ -1,9 +1,11 @@
 .editable-element-value {
-
   display: inline-block;
   border: none;
   padding-left: 1px;
   max-width: 45vw;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 
   &-is-string {
     white-space: pre-line;

src/internal-packages/crud/styles/editable-element.less

@@ -1,5 +1,4 @@
 .editable-element {
-
   width: 100%;
   display: block;
 

src/internal-packages/crud/styles/insert-document-dialog.less

@@ -14,6 +14,14 @@
         color: @gray3;
       }
 
+      .editable-element-field {
+        max-width: 10vw;
+      }
+
+      .editable-element-value {
+        max-width: 20vw; 
+      }
+
       .editable-element-is-added, .editable-expandable-element-header-is-added {
         background-color: @pw;