Using css vars and updated specs

ee/app/assets/stylesheets/components/deployment_instance.scss

 .deployment-instance {
-  width: 16px;
-  height: 16px;
+  width: $gl-padding;
+  height: $gl-padding;
   margin: 1px;
   border: 1px solid;
   border-radius: $border-radius-small;
@@ -84,8 +84,8 @@
     border: 0;
 
     &::after {
-      width: 16px !important;
-      height: 16px !important;
+      width: $gl-padding !important;
+      height: $gl-padding !important;
     }
   }
 }

ee/spec/javascripts/environments/deploy_board_component_spec.js

@@ -112,6 +112,7 @@ describe('Deploy Board', () => {
   });
 
   describe('has legend component', () => {
+    let statuses = [];
     beforeEach(done => {
       wrapper = createComponent({
         isLoading: false,
@@ -120,6 +121,7 @@ describe('Deploy Board', () => {
         hasLegacyAppLabel: true,
         deployBoardData: deployBoardMockData,
       });
+      ({ statuses } = wrapper.vm);
       wrapper.vm.$nextTick(done);
     });
 
@@ -127,7 +129,16 @@ describe('Deploy Board', () => {
       const deployBoardLegend = wrapper.find('.deploy-board-legend');
 
       expect(deployBoardLegend).toBeDefined();
-      expect(deployBoardLegend.findAll('a').length).toBe(6);
+      expect(deployBoardLegend.findAll('a').length).toBe(Object.keys(statuses).length);
+    });
+
+    Object.keys(statuses).forEach(item => {
+      it(`with ${item} text next to deployment instance icon`, () => {
+        expect(wrapper.find(`.deployment-instance-${item}`)).toBeDefined();
+        expect(wrapper.find(`.deployment-instance-${item} + .legend-text`).text()).toBe(
+          statuses[item].text,
+        );
+      });
     });
   });
 });