Enhanced ProgressBar Contrast Ration

Changed the font color of the progress bar to dark for for certain variants to improve readability. Signed-off-by: vali.dide <vali.dide@gmail.com> Signed-off-by: Valentin Dide <vali.dide@gmail.com>
DependencyTrack · Apr 15, 2024 · 94c7c93 · 94c7c93
1 parent 9c91cb6
commit 94c7c93
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/views/components/PolicyViolationProgressBar.vue b/src/views/components/PolicyViolationProgressBar.vue
@@ -1,7 +1,7 @@
 <template>
   <span v-if="metrics.policyViolationsTotal === 0" class="progress">
     <b-progress class="table-progress" :max="'0'" show-value>
-      <b-progress-bar class="table-progress" value="0"></b-progress-bar>
+      <b-progress-bar class="table-progress text-dark" value="0"></b-progress-bar>
     </b-progress>
   </span>
   <span v-else class="progress">
@@ -13,11 +13,11 @@
       >
         <b-progress-bar
           :value="metrics.policyViolationsInfo"
-          class="severity-info-bg"
+          class="severity-info-bg text-dark"
         ></b-progress-bar>
         <b-progress-bar
           :value="metrics.policyViolationsWarn"
-          class="severity-warn-bg"
+          class="severity-warn-bg text-dark"
         ></b-progress-bar>
         <b-progress-bar
           :value="metrics.policyViolationsFail"

diff --git a/src/views/components/SeverityProgressBar.vue b/src/views/components/SeverityProgressBar.vue
@@ -1,7 +1,7 @@
 <template>
   <span v-if="vulnerabilities === 0" class="progress">
     <b-progress class="table-progress" :max="'0'" show-value>
-      <b-progress-bar class="table-progress" value="0"></b-progress-bar>
+      <b-progress-bar class="table-progress text-dark" value="0"></b-progress-bar>
     </b-progress>
   </span>
   <span v-else class="progress">
@@ -11,10 +11,10 @@
           :value="critical"
           class="severity-critical-bg"
         ></b-progress-bar>
-        <b-progress-bar :value="high" class="severity-high-bg"></b-progress-bar>
+        <b-progress-bar :value="high" class="severity-high-bg text-dark"></b-progress-bar>
         <b-progress-bar
           :value="medium"
-          class="severity-medium-bg"
+          class="severity-medium-bg text-dark"
         ></b-progress-bar>
         <b-progress-bar :value="low" class="severity-low-bg"></b-progress-bar>
         <b-progress-bar