Merge pull request #69 from smiclea/CORWEB-89

Styled Replica and Migration overview as in Sketch CORWEB-89

src/components/App/App.scss

@@ -22,6 +22,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 /*! React Starter Kit | MIT License | https://www.reactstarterkit.com/ */
 
 @import '../variables.scss';
+@import '../images.scss';
 
 @import '../../public/fonts/fonts.scss';
 
@@ -178,11 +179,11 @@ button {
   .backBtn {
     background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTlweCIgaGVpZ2h0PSIzNXB4IiB2aWV3Qm94PSIwIDAgMTkgMzUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQogIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPg0KICA8ZyBpZD0iU3ViTWVudS1Db25uZWN0aW9uXCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE5MS4wMDAwMDAsIC0zMS4wMDAwMDApIiBzdHJva2U9IiM2MTY3NzAiIHN0cm9rZS13aWR0aD0iMiI+DQogICAgICAgICAgICA8ZyBpZD0iUmV0dXJuIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOTIuMDAwMDAwLCAzMi4wMDAwMDApIj4NCiAgICAgICAgICAgICAgICA8cG9seWxpbmUgaWQ9IlJlY3RhbmdsZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTYuMjYzNDU2LCAxNi4yNjM0NTYpIHJvdGF0ZSgtMjI1LjAwMDAwMCkgdHJhbnNsYXRlKC0xNi4yNjM0NTYsIC0xNi4yNjM0NTYpICIgcG9pbnRzPSIyNy43NjM0NTYgNC43NjM0NTU5NyAyNy43NjM0NTYgMjcuNzYzNDU2IDQuNzYzNDU1OTcgMjcuNzYzNDU2Ij48L3BvbHlsaW5lPg0KICAgICAgICAgICAgPC9nPg0KICAgICAgICA8L2c+DQogICAgPC9nPg0KPC9zdmc+');
     width: 33px;
-    height: 33px;
+    height: 36px;
     position: absolute;
     background-repeat: no-repeat;
     margin-left: -50px;
-    margin-top: 16px;
+    margin-top: 13px;
     cursor: pointer;
   }
   .copyButton {
@@ -783,7 +784,7 @@ button {
   cursor: pointer;
 }
 :global(.arrow) {
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjFweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSI2IDIgMjEgMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBvbHlsaW5lIGlkPSJQYXRoLTE4MS1Db3B5LTQiIHN0cm9rZT0iI0E0QUFCNSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBwb2ludHM9IjIxIDIuNSAyNiA4IDIxIDEzLjUiPjwvcG9seWxpbmU+PHBhdGggZD0iTTcsOCBMMjYsOCIgaWQ9IkxpbmUiIHN0cm9rZT0iI0E0QUFCNSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNi41MDAwMDAsIDguMDAwMDAwKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtMTYuNTAwMDAwLCAtOC4wMDAwMDApICI+PC9wYXRoPjwvc3ZnPg==');
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIzNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAzNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5BcnJvdy1CaWc8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iQ29yaW9saXMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iMjAxLVJlcGxpY2EtT3ZlcnZpZXciIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MDMuMDAwMDAwLCAtMjYwLjAwMDAwMCkiIHN0cm9rZT0iIzYxNjg3MCIgc3Ryb2tlLXdpZHRoPSIyIj4gICAgICAgICAgICA8ZyBpZD0iQXJyb3ctQmlnIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MDQuMDAwMDAwLCAyNjEuMDAwMDAwKSI+ICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0xODEtQ29weS00IiBwb2ludHM9IjIyIDAgMzIgMTEgMjIgMjIiPjwvcG9seWxpbmU+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDEwIEwzMiwxMCIgaWQ9IkxpbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtMTYuMDAwMDAwLCAtMTAuNTAwMDAwKSAiPjwvcGF0aD4gICAgICAgICAgICA8L2c+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
   background-size: contain;
   background-repeat: no-repeat;
   width: 21px;
@@ -794,7 +795,8 @@ button {
   text-align: center;
   display: inline-block;
   line-height: 16px;
-  font-size: 10px;
+  font-size: 9px;
+  font-weight: 500;
   padding: 0 5px;
   color: #FFF;
   min-width: 64px;

src/components/CloudConnectionsView/CloudConnectionsView.js

@@ -217,7 +217,7 @@ class CloudConnectionsView extends Component {
 
             </div>
             <div className={s.content}>
-              <div className={`${s.connectionTypeImg} ${(item && item.type) || ''}`}></div>
+              <div className={`horizontal-provider-logo ${(item && item.type) || ''}`}></div>
               {React.cloneElement(this.props.children, { connection: item })}
               <div className={s.buttons}>
                 <div className={s.leftSide}>

src/components/MigrationDetail/MigrationDetail.js

@@ -100,68 +100,66 @@ class MigrationDetail extends Component {
       output = (
         <div className={s.root}>
           <div className={s.container}>
-            <div className={s.columnLeft}>
-              <div className={s.formGroup}>
-                <div className={s.title}>
-                  Source
-                </div>
-                <div className={s.value}>
-                  <EndpointLink connectionId={item.origin_endpoint_id} />
-                </div>
-                <div className={s.cloudImg + " icon large-cloud " + item.origin_endpoint_type + " dim"}></div>
-                <div className="arrow large"></div>
+            <div className={s.formGroup}>
+              <div className={s.title}>
+                Source
               </div>
-              <div className={s.formGroup}>
-                <div className={s.title}>
-                  Type
-                </div>
-                <div className={s.value}>
-                  {item.migrationType == "replica" ? "Coriolis Replica" : "Coriolis Migration"}
-                </div>
+              <div className={s.value}>
+                <EndpointLink connectionId={item.origin_endpoint_id} />
               </div>
-              <div className={s.formGroup}>
-                <div className={s.title}>
-                  Notes
-                </div>
-                <div className={s.value}>
-                  {item.notes}
-                </div>
+            </div>
+            <div className={s.formGroup}>
+              <div className={s.title}>
+                Target
+              </div>
+              <div className={s.value}>
+                <EndpointLink connectionId={item.destination_endpoint_id} />
+              </div>
+            </div>
+            <div className={s.formGroup + ' ' + s.logos}>
+              <div className={`horizontal-provider-logo ${item.origin_endpoint_type}`}></div>
+              <div className="arrow"></div>
+              <div className={`horizontal-provider-logo ${item.destination_endpoint_type}`}></div>
+            </div>
+            <div className={s.formGroup}>
+              <div className={s.title}>
+                Id
+              </div>
+              <div className={s.value + ' ' + s.idValue}
+                onClick={() => this.copyIdClick(item)}
+                onMouseDown={e => e.stopPropagation()}
+                onMouseUp={e => e.stopPropagation()}
+              >
+                <span className={s.idLabel}>{item.id}</span>
+                <span className="copyButton"></span>
               </div>
             </div>
-            <div className={s.columnRight}>
-              <div className={s.formGroup}>
-                <div className={s.title}>
-                  Target
-                </div>
-                <div className={s.value}>
-                  <EndpointLink connectionId={item.destination_endpoint_id} />
-                </div>
-                <div className={s.cloudImg + " icon large-cloud " + item.destination_endpoint_type + " dim"}></div>
+            <div className={s.formGroup}>
+              <div className={s.title}>
+                Type
               </div>
-              <div className={s.formGroup}>
-                <div className={s.title}>
-                  Created
-                </div>
-                <div className={s.value}>
-                  <Moment format="MM/DD/YYYY HH:mm" date={item.created_at} />
-                </div>
+              <div className={s.value}>
+                {item.migrationType == "replica" ? "Coriolis Replica" : "Coriolis Migration"}
+              </div>
+            </div>
+            <div className={s.formGroup}>
+              <div className={s.title}>
+                Created
+              </div>
+              <div className={s.value}>
+                <Moment format="MM/DD/YYYY HH:mm" date={item.created_at} />
+              </div>
+            </div>
+            <div className={s.formGroup}>
+              <div className={s.title}>
+                Notes
               </div>
-              <div className={s.formGroup}>
-                <div className={s.titleIp}>
-                  Id
-                </div>
-                <div className={s.value + ' ' + s.idValue}
-                  onClick={() => this.copyIdClick(item)}
-                  onMouseDown={e => e.stopPropagation()}
-                  onMouseUp={e => e.stopPropagation()}
-                >
-                  <a>{item.id}</a>
-                  <span className="copyButton"></span>
-                </div>
+              <div className={s.value}>
+                {item.notes}
               </div>
             </div>
           </div>
-          <MigrationNetworks migration={item} />
+          <MigrationNetworks className={s.migrationNetworks} migration={item} />
           <div className={s.container + " " + s.buttons}>
             { item.type == "replica" && <button
               onClick={(e) => this.createMigrationFromReplica(e, item)}
@@ -169,7 +167,7 @@ class MigrationDetail extends Component {
             >
               Migrate Replica
             </button>}
-            <button className="wire red" onClick={(e) => this.deleteMigration(e, item)}>Delete</button>
+            <button className="wire red" onClick={(e) => this.deleteMigration(e, item)}>Delete Migration</button>
           </div>
           <ConfirmationDialog
             visible={this.state.confirmationDialog.visible}

src/components/MigrationDetail/MigrationDetail.scss

@@ -21,65 +21,71 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   :global(.arrow) {
     width: 64px;
     height: 32px;
-    margin-top: 60px;
-    margin-left: 70px;
-    position: absolute;
   }
 }
 
 .container {
-  margin: 0 auto;
-  &:after {
-    clear: both;
-    height: 0;
-    display: block;
-    content: ' ';
-  }
+  display: flex;
+  flex-wrap: wrap;
   &.buttons {
-    margin-top: 16px;
-    button:first-child {
-      float: left;
-    }
-    button:nth-child(2) {
-      float: right;
-    }
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 32px;
   }
 }
-.columnLeft, .columnRight {
-  width: 50%;
-  float: left;
-}
 .formGroup {
   margin-bottom: 32px;
+  width: 50%;
+  &.logos {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    & > div {
+      width: 50%;
+      &:global(.arrow) {
+        position: absolute;
+        top: 16px;
+        left: 277px;
+      }
+    }
+  }
   .title {
-    font-weight: $weight-semibold;
+    font-weight: 500;
     font-size: 10px;
-    color: $gray-dark;
-    text-transform: uppercase;
-    margin-bottom: 8px;
-  }
-  .titleIp {
-    font-weight: $weight-semibold;
-    font-size: 14px;
     color: $gray;
+    text-transform: uppercase;
+    margin-bottom: 2px;
   }
   .value {
-    font-weight: $weight-regular;
+    font-weight: 400;
     font-size: 14px;
     color: $black;
-    a {
-      color: $blue;
-    }
-     &.idValue {
+    &.idValue {
       cursor: pointer;
-      display: inline-block;
+      display: flex;
     }
     &:hover :global(.copyButton) {
       opacity: 1;
     }
+    a {
+      color: $blue;
+      text-decoration: none;
+    }
+    .idLabel {
+      width: 189px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 }
 .cloudImg {
   width: 96px;
   margin-top: 16px;
 }
+
+.migrationNetworks {
+  margin-top: 56px;
+}

src/components/MigrationNetworks/MigrationNetworks.js

@@ -28,7 +28,8 @@ class MigrationNetworks extends Component {
   };
 
   static propTypes = {
-    migration: PropTypes.object
+    migration: PropTypes.object,
+    className: PropTypes.string
   }
 
   constructor(props) {
@@ -94,7 +95,7 @@ class MigrationNetworks extends Component {
   render() {
     if (this.listItems.length) {
       return (
-        <div className={s.root}>
+        <div className={s.root + ' ' + (this.props.className || '')}>
           <div className={s.container}>
             <Table headerItems={this.headers} listItems={this.listItems} />
           </div>

src/components/MigrationView/MigrationView.scss

@@ -37,22 +37,26 @@ $migrationHeaderBg: #D9DCE3;
     width: 425px;
     .migrationStatus {
       width: 80px;
+      height: 16px;
+      font-weight: 500;
+      font-size: 9px;
       border-radius: 4px;
       color: #FFF;
-      line-height: 16px;
       display: inline-block;
-      font-size: 10px;
       text-align: center;
+      margin-top: 1px;
       &:global(.PAUSED) {
         background-color: $gray;
       }
     }
     .migrationType {
       width: 80px;
+      height: 13px;
+      padding-top: 1px;
+      font-weight: 500;
+      font-size: 9px;
       background-color: #FFF;
       border-radius: 4px;
-      line-height: 14px;
-      font-size: 10px;
       text-align: center;
       display: inline-block;
       text-transform: uppercase;

src/components/ReplicaDetail/ReplicaDetail.js

@@ -102,76 +102,74 @@ class MigrationDetail extends Component {
       output = (
         <div className={s.root}>
           <div className={s.container}>
-            <div className={s.columnLeft}>
-              <div className={s.formGroup}>
-                <div className={s.title}>
-                  Source
-                </div>
-                <div className={s.value}>
-                  <EndpointLink connectionId={item.origin_endpoint_id} />
-                </div>
-                <div className={s.cloudImg + " icon large-cloud " + item.origin_endpoint_type + " dim"}></div>
-                <div className="arrow large"></div>
+            <div className={s.formGroup}>
+              <div className={s.title}>
+                Source
               </div>
-              <div className={s.formGroup}>
-                <div className={s.title}>
-                  Type
-                </div>
-                <div className={s.value}>
-                  {item.migrationType == "replica" ? "Coriolis Replica" : "Coriolis Migration"}
-                </div>
+              <div className={s.value}>
+                <EndpointLink connectionId={item.origin_endpoint_id} />
               </div>
-              <div className={s.formGroup}>
-                <div className={s.title}>
-                  Notes
-                </div>
-                <div className={s.value}>
-                  {item.notes}
-                </div>
+            </div>
+            <div className={s.formGroup}>
+              <div className={s.title}>
+                Target
+              </div>
+              <div className={s.value}>
+                <EndpointLink connectionId={item.destination_endpoint_id} />
+              </div>
+            </div>
+            <div className={s.formGroup + ' ' + s.logos}>
+              <div className={`horizontal-provider-logo ${item.origin_endpoint_type}`}></div>
+              <div className="arrow"></div>
+              <div className={`horizontal-provider-logo ${item.destination_endpoint_type}`}></div>
+            </div>
+            <div className={s.formGroup}>
+              <div className={s.title}>
+                Id
+              </div>
+              <div className={s.value + ' ' + s.idValue}
+                onClick={() => this.copyIdClick(item)}
+                onMouseDown={e => e.stopPropagation()}
+                onMouseUp={e => e.stopPropagation()}
+              >
+                <span className={s.idLabel}>{item.id}</span>
+                <span className="copyButton"></span>
               </div>
             </div>
-            <div className={s.columnRight}>
-              <div className={s.formGroup}>
-                <div className={s.title}>
-                  Target
-                </div>
-                <div className={s.value}>
-                  <EndpointLink connectionId={item.destination_endpoint_id} />
-                </div>
-                <div className={s.cloudImg + " icon large-cloud " + item.destination_endpoint_type + " dim"}></div>
+            <div className={s.formGroup}>
+              <div className={s.title}>
+                Type
               </div>
-              <div className={s.formGroup}>
-                <div className={s.title}>
-                  Created
-                </div>
-                <div className={s.value}>
-                  <Moment format="MM/DD/YYYY HH:mm" date={createdAt} />
-                </div>
+              <div className={s.value}>
+                {item.migrationType == "replica" ? "Coriolis Replica" : "Coriolis Migration"}
+              </div>
+            </div>
+            <div className={s.formGroup}>
+              <div className={s.title}>
+                Created
+              </div>
+              <div className={s.value}>
+                <Moment format="MM/DD/YYYY HH:mm" date={createdAt} />
+              </div>
+            </div>
+            <div className={s.formGroup}>
+              <div className={s.title}>
+                Notes
               </div>
-              <div className={s.formGroup}>
-                <div className={s.titleIp}>
-                  Id
-                </div>
-                <div className={s.value + ' ' + s.idValue}
-                  onClick={() => this.copyIdClick(item)}
-                  onMouseDown={e => e.stopPropagation()}
-                  onMouseUp={e => e.stopPropagation()}
-                >
-                  <a>{item.id}</a>
-                  <span className="copyButton"></span>
-                </div>
+              <div className={s.value}>
+                {item.notes}
               </div>
             </div>
           </div>
-          <MigrationNetworks migration={item} />
+          <MigrationNetworks className={s.migrationNetworks} migration={item} />
           <div className={s.container + " " + s.buttons}>
             { item.type == "replica" && <button
               onClick={(e) => this.createMigrationFromReplica(e, item)}
               disabled={disabled} className={disabled ? "disabled" : ""}
             >
-              Migrate Replica
+              Create Migration
             </button>}
-            <button className="wire red" onClick={(e) => this.deleteReplica(e, item)}>Delete</button>
+            <button className="wire red" onClick={(e) => this.deleteReplica(e, item)}>Delete Replica</button>
           </div>
           <ConfirmationDialog
             visible={this.state.confirmationDialog.visible}

src/components/ReplicaDetail/ReplicaDetail.scss

@@ -21,61 +21,64 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   :global(.arrow) {
     width: 64px;
     height: 32px;
-    margin-top: 60px;
-    margin-left: 70px;
-    position: absolute;
   }
 }
 
 .container {
-  margin: 0 auto;
-  &:after {
-    clear: both;
-    height: 0;
-    display: block;
-    content: ' ';
-  }
+  display: flex;
+  flex-wrap: wrap;
   &.buttons {
-    margin-top: 16px;
-    button:first-child {
-      float: left;
-    }
-    button:nth-child(2) {
-      float: right;
-    }
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 32px;
   }
 }
-.columnLeft, .columnRight {
-  width: 50%;
-  float: left;
-}
+
 .formGroup {
   margin-bottom: 32px;
+  width: 50%;
+  &.logos {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    & > div {
+      width: 50%;
+      &:global(.arrow) {
+        position: absolute;
+        top: 16px;
+        left: 277px;
+      }
+    }
+  }
   .title {
-    font-weight: $weight-semibold;
+    font-weight: 500;
     font-size: 10px;
-    color: $gray-dark;
-    text-transform: uppercase;
-    margin-bottom: 8px;
-  }
-  .titleIp {
-    font-weight: $weight-semibold;
-    font-size: 14px;
     color: $gray;
+    text-transform: uppercase;
+    margin-bottom: 2px;
   }
   .value {
-    font-weight: $weight-regular;
+    font-weight: 400;
     font-size: 14px;
     color: $black;
     &.idValue {
       cursor: pointer;
-      display: inline-block;
+      display: flex;
     }
     &:hover :global(.copyButton) {
       opacity: 1;
     }
     a {
       color: $blue;
+      text-decoration: none;
+    }
+    .idLabel {
+      width: 189px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 }
@@ -83,3 +86,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   width: 96px;
   margin-top: 16px;
 }
+
+.migrationNetworks {
+  margin-top: 56px;
+}

src/components/ReplicaView/ReplicaView.scss

@@ -37,11 +37,12 @@ $migrationHeaderBg: #D9DCE3;
     width: 425px;
     .migrationStatus {
       width: 80px;
+      height: 16px;
+      font-weight: 500;
+      font-size: 9px;
       border-radius: 4px;
       color: #FFF;
-      line-height: 16px;
       display: inline-block;
-      font-size: 10px;
       text-align: center;
       &:global(.PAUSED) {
         background-color: $gray;
@@ -49,10 +50,12 @@ $migrationHeaderBg: #D9DCE3;
     }
     .migrationType {
       width: 80px;
+      height: 13px;
+      padding-top: 1px;
+      font-weight: 500;
+      font-size: 9px;
       background-color: #FFF;
       border-radius: 4px;
-      line-height: 14px;
-      font-size: 10px;
       text-align: center;
       display: inline-block;
       text-transform: uppercase;

src/components/Table/Table.scss

@@ -23,11 +23,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 .headerItems {
   padding-bottom: 8px;
-  border-bottom: 1px solid $gray-light;
+  border-bottom: 1px solid $grayish;
+  text-transform: uppercase;
+  font-size: 10px;
   .cell {
     float: left;
     box-sizing: border-box;
-    font-weight: $weight-regular;
+    font-weight: 500;
     padding-left: 8px;
     color: $gray;
     &:first-child {
@@ -44,7 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 .listItems {
   .row {
     padding: 8px 0;
-    border-bottom: 1px solid $gray-light;
+    border-bottom: 1px solid $grayish;
     position: relative;
     .cell {
       float: left;
@@ -52,7 +54,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       padding-left: 8px;
       overflow: hidden;
       color: $gray-dark;
-      font-weight: $weight-regular;
+      font-weight: 400;
       &:first-child {
         color: $black;
         padding-left: 0;