Update styles for Geo Nodes app

app/assets/stylesheets/pages/geo_nodes.scss

@@ -11,55 +11,44 @@
   .page-subtitle {
     margin-bottom: 24px;
   }
-}
-
-.geo-node-status {
-  td {
-    vertical-align: top;
-  }
 
-  .help-block {
-    width: 135px;
-    text-align: right;
-  }
-
-  .node-info {
-    font-weight: $gl-font-weight-bold;
-  }
-
-  .event-timestamp {
+  .health-message {
+    padding: 4px 8px 1px;
+    background-color: $red-100;
+    color: $red-500;
+    border-radius: $border-radius-default;
     font-weight: normal;
-    color: $theme-gray-800;
   }
+}
 
-  .sync-status {
-    font-weight: normal;
-
-    svg {
-      vertical-align: middle;
-    }
+.well-list.geo-nodes {
+  li {
+    position: relative;
 
-    .sync-status-icon svg,
-    .sync-status-timestamp {
-      fill: $theme-gray-700;
-      color: $theme-gray-700;
+    &:hover {
+      background: $white-light;
     }
 
-    &.sync-status-failure {
-      .sync-status-icon svg,
-      .sync-status-timestamp {
-        fill: $red-700;
-        color: $red-700;
-      }
+    &.node-disabled,
+    &.node-disabled:hover {
+      background-color: $gray-lightest;
     }
   }
 }
 
-.advanced-geo-node-status-toggler {
-  display: block;
+.node-badge {
+  color: $white-light;
+  display: inline-block;
+  margin-left: 5px;
+  padding: 0 5px;
+  border-radius: 3px;
 
-  .show-advance-chevron {
-    margin-top: 2px;
+  &.primary-node {
+    background-color: $blue-300;
+  }
+
+  &.current-node {
+    background-color: $green-400;
   }
 }
 
@@ -71,6 +60,10 @@
   color: $gl-danger;
 }
 
+.geo-node-offline {
+  color: $theme-gray-950;
+}
+
 .geo-node-disabled {
   color: $gray-darkest;
 }
@@ -79,84 +72,102 @@
   color: $gray-darkest;
 }
 
-.well-list.geo-nodes {
-  li {
-    position: relative;
+.geo-nodes {
+  .node-url-warning {
+    fill: $gl-warning;
+  }
+}
 
-    &:hover {
-      background: $white-light;
+.node-details-list {
+  .node-detail-item {
+    margin-top: 14px;
+
+    &:first-child {
+      margin-top: 0;
     }
 
-    &.node-disabled,
-    &.node-disabled:hover {
-      background-color: $gray-lightest;
+    .node-detail-title,
+    .node-detail-value {
+      padding-left: $gl-col-padding;
+      padding-right: $gl-col-padding;
     }
+
+    .node-detail-title {
+      color: $theme-gray-700;
     }
-}
 
-.advanced-geo-node-status-container {
-  .btn-link {
-    padding-left: 0;
-    padding-right: 0;
-    border-left: 0;
-    border-right: 0;
+    .node-detail-value {
+      margin-top: 4px;
+    }
 
-    .fa {
-      margin-left: 3px;
+    .node-detail-value-bold {
+      font-weight: $gl-font-weight-bold;
     }
+
+    .node-detail-value-error {
+      color: $gl-danger;
     }
-}
 
-.node-info {
-  color: $gl-text-color;
-}
+    .btn-show-advanced {
+      padding-left: 0;
+      border: 0;
+    }
 
-.geo-health {
-  display: inline-block;
-  margin-top: 5px;
-  white-space: pre-wrap;
-}
+    .node-health-status {
+      display: inline-flex;
 
-.geo-nodes {
-  .health-message {
-    padding: 1px 8px;
-    background-color: $red-100;
-    color: $red-500;
-    border-radius: $border-radius-default;
-    font-weight: 500;
+      .status-text {
+        line-height: 18px;
+      }
     }
-}
 
-.geo-node-mismatch {
-  color: $gl-danger;
-}
+    .node-sync-settings {
+      display: inline-flex;
+      cursor: pointer;
 
-.node-badge {
-  color: $white-light;
-  display: inline-block;
-  margin-left: 5px;
-  padding: 0 5px;
-  border-radius: 3px;
+      .sync-status-icon {
+        margin-top: 2px;
+        fill: $theme-gray-700;
+      }
+    }
 
-  &.primary-node {
-    background-color: $blue-300;
+    .sync-status-event-info,
+    .event-status-timestamp {
+      color: $theme-gray-700;
     }
 
-  &.current-node {
-    background-color: $green-400;
+    .event-status-timestamp {
+      cursor: pointer;
+    }
   }
 }
 
-.node-actions {
-  margin-top: 10px;
+.geo-node-actions {
+  display: inline-flex;
+  justify-content: center;
+  float: right;
+
+  .node-action-container {
+    margin: 0 5px;
+
+    &:last-child {
+      margin-right: $gl-padding;
+    }
+  }
+
+  @media (max-width: $screen-sm-max) {
+    display: block;
+    width: 100%;
 
-  @media (min-width: $screen-md-min) {
-    position: absolute;
-    right: 15px;
-    top: 0;
+    .node-action-container {
+      width: 100%;
+      margin: 0;
+      margin-top: 10px;
+      padding: 0 10px;
     }
 
-  .btn:not(:first-of-type) {
-    margin-left: 10px;
+    .btn-node-action {
+      width: 100%;
+    }
   }
 }