Improve UX of geo page

app/assets/stylesheets/pages/geo_nodes.scss

-.geo-node-icon-healthy {
+.geo-node-healthy {
   color: $gl-success;
 }
 
-.geo-node-icon-unhealthy {
+.geo-node-unhealthy {
   color: $gl-danger;
 }
 
-.geo-node-icon-disabled {
+.geo-node-disabled {
   color: $gray-darkest;
 }
+
+.well-list.geo-nodes {
+  li {
+    position: relative;
+
+    &:hover {
+      background: $white-light;
+    }
+  }
+}
+
+.node-info {
+  font-weight: bold;
+  color: $gl-text-color;
+}
+
+.geo-health {
+  display: inline-block;
+  margin-top: 5px;
+}
+
+.primary-node-badge {
+  color: $white-light;
+  background-color: $blue-300;
+  display: inline-block;
+  margin-left: 5px;
+  padding: 0 5px;
+  border-radius: 3px;
+}
+
+.node-actions {
+  position: absolute;
+  right: 15px;
+  top: 10px;
+
+  @media (max-width: $screen-xs-max) {
+    position: initial;
+    margin-top: 10px;
+  }
+
+  .btn:not(:first-of-type) {
+    margin-left: 10px;
+  }
+}

app/helpers/ee/geo_helper.rb

 module EE
   module GeoHelper
     def node_status_icon(node)
-      if node.primary?
-        icon 'star fw', class: 'has-tooltip', title: 'Primary node'
-      else
+      unless node.primary?
         status = node.enabled? ? 'healthy' : 'disabled'
 
-        icon 'globe fw',
-             class: "js-geo-node-icon geo-node-icon-#{status} has-tooltip",
+        icon 'check fw',
+             class: "js-geo-node-icon geo-node-#{status} has-tooltip",
              title: status.capitalize
       end
     end
 
+    def node_status(node)
+      status = node.enabled? ? 'healthy' : 'disabled'
+
+      content_tag :span, class: "geo-node-#{status}" do
+        status.capitalize
+      end
+    end
+
     def toggle_node_button(node)
       btn_class, title, data =
         if node.enabled?
-          ['warning', 'Disable node', { confirm: 'Disabling a node stops the sync process. Are you sure?' }]
+          ['warning', 'Disable', { confirm: 'Disabling a node stops the sync process. Are you sure?' }]
         else
-          ['success', 'Enable node']
+          ['success', 'Enable']
         end
 
-      link_to icon('power-off fw', text: title),
+      link_to title,
               toggle_admin_geo_node_path(node),
               method: :post,
-              class: "btn btn-sm btn-#{btn_class} prepend-left-10 has-tooltip",
+              class: "btn btn-sm btn-#{btn_class}",
               title: title,
               data: data
     end

app/views/admin/geo_nodes/index.html.haml

@@ -17,41 +17,41 @@
     %ul.well-list.geo-nodes
       - @nodes.each do |node|
         %li{ id: dom_id(node), class: ('js-geo-secondary-node' if node.secondary?), data: { status_url: status_admin_geo_node_path(node) } }
-          .list-item-name
-            %span
-              = node_status_icon(node)
+          .node-block
+            = node_status_icon(node)
             %strong= node.url
             - if node.primary?
+              .primary-node-badge Primary
               %span.help-block Primary node
             - else
               .js-geo-node-status{ style: 'display: none' }
+                %p
+                  %span.help-block
+                    Health Status:
+                    %span= node_status(node)
                 %p
                   %span.help-block
                     Repositories synced:
-                    %span.js-repositories-synced
+                    %span.node-info.js-repositories-synced
                 %p
                   %span.help-block
                     Repositories failed:
-                    %span.js-repositories-failed
+                    %span.node-info.js-repositories-failed
                 %p
                   %span.help-block
                     LFS objects synced:
-                    %span.js-lfs-objects-synced
+                    %span.node-info.js-lfs-objects-synced
                 %p
                   %span.help-block
                     Attachments synced:
-                    %span.js-attachments-synced
+                    %span.node-info.js-attachments-synced
                 %p
-                  %span.help-block.js-health
+                  %code.geo-health.js-health
 
-          .pull-right
+          .node-actions
             - if Gitlab::Geo.license_allows?
               - if node.missing_oauth_application?
-                = link_to repair_admin_geo_node_path(node), method: :post, title: 'OAuth application is missing', class: 'btn btn-default btn-sm prepend-left-10' do
-                  = icon('exclamation-triangle fw')
-                  Repair authentication
+                = link_to "Repair authentication", repair_admin_geo_node_path(node), method: :post, title: 'OAuth application is missing', class: 'btn btn-default btn-sm'
               - if node.secondary?
                 = toggle_node_button(node)
-            = link_to admin_geo_node_path(node), data: { confirm: 'Are you sure?' }, method: :delete, class: 'btn btn-remove btn-sm prepend-left-10' do
-              = icon 'trash'
-              Remove
+            = link_to "Remove", admin_geo_node_path(node), data: { confirm: 'Are you sure?' }, method: :delete, class: 'btn btn-remove btn-sm'