feat(user-stories): add style to status label in the index component

pablolmedorado · Nov 11, 2020 · b29a399 · b29a399
1 parent 6744be3
commit b29a399
Showing 1 changed file with 18 additions and 2 deletions.
diff --git a/frontend/src/components/scrum/UserStoryIndexStatus.vue b/frontend/src/components/scrum/UserStoryIndexStatus.vue
@@ -4,7 +4,7 @@
     class="d-inline-flex align-center"
   >
     <v-progress-circular
-      class="mr-2"
+      class="mr-1"
       :rotate="-90"
       :size="32"
       :value="userStory.current_progress"
@@ -13,7 +13,7 @@
     >
       {{ userStory.current_progress }}
     </v-progress-circular>
-    <span>
+    <span :style="statusLabelStyle">
       {{ userStoryStatusMap[userStory.status].label }}
     </span>
     <v-tooltip v-if="userStory.validated === false" bottom>
@@ -40,6 +40,22 @@ export default {
   },
   computed: {
     ...mapGetters("scrum", ["userStoryStatusMap", "riskLevelsMap"]),
+    statusLabelStyle() {
+      if (this.userStory.risk_level) {
+        return {
+          color: this.riskLevelsMap[this.userStory.risk_level].colour,
+          fontWeight: "bold",
+        };
+      } else {
+        return {};
+      }
+    },
   },
 };
 </script>
+
+<style scoped>
+::v-deep .v-progress-circular__info {
+  font-size: 0.79rem;
+}
+</style>