Cleanup styles for Geo Node Items

Remove unneeded class

Fix geo node status colors

Node warning styles

Cleanup geo-node-item

Cleanup node section items

Mobile friendly node actions

Tweak margins

Remove unneeded class

Starting to fix tests

Another fix

Lots of tests

Final lint and tests

Fix backend tests

ee/spec/javascripts/geo_nodes/components/geo_node_item_spec.js

@@ -148,11 +148,9 @@ describe('GeoNodeItemComponent', () => {
       vm.isNodeDetailsFailed = true;
       vm.errorMessage = err;
       Vue.nextTick(() => {
-        expect(vm.$el.querySelectorAll('p.node-health-message').length).not.toBe(0);
-        expect(vm.$el.querySelector('p.node-health-message').innerText.trim()).toContain(err);
-        expect(vm.$el.querySelector('p.node-health-message a').getAttribute('href')).toBe(
-          '/foo/bar',
-        );
+        expect(vm.$el.querySelectorAll('p.bg-danger-100').length).not.toBe(0);
+        expect(vm.$el.querySelector('p.bg-danger-100').innerText.trim()).toContain(err);
+        expect(vm.$el.querySelector('p.bg-danger-100 a').getAttribute('href')).toBe('/foo/bar');
         done();
       });
     });

ee/spec/javascripts/geo_nodes/components/node_detail_sections/node_details_section_other_spec.js

@@ -89,18 +89,20 @@ describe('NodeDetailsSectionOther', () => {
     });
     describe('storageShardsCssClass', () => {
-      it('returns CSS class `node-detail-value-bold` when `nodeDetails.storageShardsMatch` is true', done => {
+      it('returns CSS class `font-weight-bold` when `nodeDetails.storageShardsMatch` is true', done => {
         vm.nodeDetails.storageShardsMatch = true;
         Vue.nextTick()
           .then(() => {
-            expect(vm.storageShardsCssClass).toBe('node-detail-value-bold');
+            expect(vm.storageShardsCssClass[0]).toBe('font-weight-bold');
+            expect(vm.storageShardsCssClass[1]['text-danger-500']).toBeFalsy();
           })
           .then(done)
           .catch(done.fail);
       });
-      it('returns CSS class `node-detail-value-bold node-detail-value-error` when `nodeDetails.storageShardsMatch` is false', () => {
-        expect(vm.storageShardsCssClass).toBe('node-detail-value-bold node-detail-value-error');
+      it('returns CSS class `font-weight-bold text-danger-500` when `nodeDetails.storageShardsMatch` is false', () => {
+        expect(vm.storageShardsCssClass[0]).toBe('font-weight-bold');
+        expect(vm.storageShardsCssClass[1]['text-danger-500']).toBeTruthy();
       });
     });
   });
@@ -111,14 +113,16 @@ describe('NodeDetailsSectionOther', () => {
     });
     it('renders show section button element', () => {
-      expect(vm.$el.querySelector('.btn-show-section')).not.toBeNull();
-      expect(vm.$el.querySelector('.btn-show-section > span').innerText.trim()).toBe(
-        'Other information',
-      );
+      expect(vm.$el.querySelector('.btn-link')).not.toBeNull();
+      expect(vm.$el.querySelector('.btn-link > span').innerText.trim()).toBe('Other information');
     });
-    it('renders section items container element', () => {
-      expect(vm.$el.querySelector('.section-items-container')).not.toBeNull();
+    it('renders section items container element', done => {
+      vm.showSectionItems = true;
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.section-items-container')).not.toBeNull();
+        done();
+      });
     });
   });
 });

ee/spec/javascripts/geo_nodes/components/node_detail_sections/node_details_section_sync_spec.js

@@ -89,14 +89,16 @@ describe('NodeDetailsSectionSync', () => {
     });
     it('renders show section button element', () => {
-      expect(vm.$el.querySelector('.btn-show-section')).not.toBeNull();
-      expect(vm.$el.querySelector('.btn-show-section > span').innerText.trim()).toBe(
-        'Sync information',
-      );
+      expect(vm.$el.querySelector('.btn-link')).not.toBeNull();
+      expect(vm.$el.querySelector('.btn-link > span').innerText.trim()).toBe('Sync information');
     });
-    it('renders section items container element', () => {
-      expect(vm.$el.querySelector('.section-items-container')).not.toBeNull();
+    it('renders section items container element', done => {
+      vm.showSectionItems = true;
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.section-items-container')).not.toBeNull();
+        done();
+      });
     });
   });
 });

ee/spec/javascripts/geo_nodes/components/node_detail_sections/node_details_section_verification_spec.js

@@ -83,6 +83,13 @@ describe('NodeDetailsSectionVerification', () => {
       expect(vm.$el.classList.contains('verification-section')).toBe(true);
     });
+    it('renders show section button element', () => {
+      expect(vm.$el.querySelector('.btn-link')).not.toBeNull();
+      expect(vm.$el.querySelector('.btn-link > span').innerText.trim()).toBe(
+        'Verification information',
+      );
+    });
+
     it('renders section items container element', done => {
       vm.showSectionItems = true;
       Vue.nextTick(() => {

ee/spec/javascripts/geo_nodes/components/node_detail_sections/section_reveal_button_spec.js

@@ -62,7 +62,7 @@ describe('SectionRevealButton', () => {
   describe('template', () => {
     it('renders button element', () => {
-      expect(vm.$el.classList.contains('btn-show-section')).toBe(true);
+      expect(vm.$el.classList.contains('btn-link')).toBe(true);
       expect(vm.$el.querySelector('svg use').getAttribute('xlink:href')).toContain('#angle-down');
       expect(vm.$el.querySelector('span').innerText.trim()).toBe('Foo button');
     });