Fix stylelint warning in related_items_list.scss

Feedback

ee/app/assets/javascripts/related_items_tree/components/epic_health_status.vue

@@ -45,38 +45,42 @@ export default {
       >
     </gl-tooltip>
 
-    <span class="gl-label gl-label-text-dark gl-label-sm status-on-track mr-1"
-      ><span class="gl-label-text">
+    <span class="gl-label gl-label-text-dark gl-label-sm status-on-track gl-mr-2">
+      <span class="gl-label-text">
         {{ healthStatus.issuesOnTrack }}
-      </span></span
+      </span>
+    </span>
+    <span class="gl-mr-2 mr-md-2 gl-text-gray-700 health-label-long gl-display-none">
+      {{ __('issues on track') }}
+    </span>
+    <span
+      class="gl-mr-2 mr-md-2 gl-text-gray-700 gl-str-truncated health-label-short gl-display-none"
+      >{{ __('on track') }}</span
     >
-    <span class="mr-1 mr-md-2 text-secondary health-label-long gl-display-none">{{
-      __('issues on track')
-    }}</span>
-    <span class="mr-1 mr-md-2 text-secondary text-truncate health-label-short gl-display-none">{{
-      __('on track')
-    }}</span>
 
-    <span class="gl-label gl-label-text-dark gl-label-sm status-needs-attention mr-1"
-      ><span class="gl-label-text">
+    <span class="gl-label gl-label-text-dark gl-label-sm status-needs-attention gl-mr-2">
+      <span class="gl-label-text">
         {{ healthStatus.issuesNeedingAttention }}
-      </span></span
+      </span>
+    </span>
+    <span class="gl-mr-2 mr-md-2 gl-text-gray-700 health-label-long gl-display-none">
+      {{ __('issues need attention') }}
+    </span>
+    <span
+      class="gl-mr-2 mr-md-2 gl-text-gray-700 gl-str-truncated health-label-short gl-display-none"
+      >{{ __('need attention') }}</span
     >
-    <span class="mr-1 mr-md-2 text-secondary health-label-long gl-display-none">{{
-      __('issues need attention')
-    }}</span>
-    <span class="mr-1 mr-md-2 text-secondary text-truncate health-label-short gl-display-none">{{
-      __('need attention')
-    }}</span>
 
-    <span class="gl-label gl-label-text-dark gl-label-sm status-at-risk mr-1"
-      ><span class="gl-label-text">
+    <span class="gl-label gl-label-text-dark gl-label-sm status-at-risk gl-mr-2">
+      <span class="gl-label-text">
         {{ healthStatus.issuesAtRisk }}
-      </span></span
-    >
-    <span class="text-secondary health-label-long gl-display-none">{{ __('issues at risk') }}</span>
-    <span class="text-secondary text-truncate health-label-short gl-display-none">{{
-      __('at risk')
-    }}</span>
+      </span>
+    </span>
+    <span class="gl-text-gray-700 health-label-long gl-display-none">
+      {{ __('issues at risk') }}
+    </span>
+    <span class="gl-text-gray-700 gl-str-truncated health-label-short gl-display-none">
+      {{ __('at risk') }}
+    </span>
   </div>
 </template>