Lift colours to app-level CSS so we can reuse in more tables.

wtsi-npg · Jul 26, 2024 · 04ce801 · 04ce801
1 parent 56f4a25
commit 04ce801
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -173,4 +173,20 @@ nav {
   align-items: center;
   text-align: left;
 }
+
+.MetricOrange {
+  background-color: #F8CBAD;
+}
+
+.MetricBlue {
+  background-color: #BDD6EE;
+}
+
+.MetricGreen {
+  background-color: #C6E0B4;
+}
+
+.MetricYellow {
+  background-color: #FFE698;
+}
 </style>
diff --git a/frontend/src/components/PoolStats.vue b/frontend/src/components/PoolStats.vue
@@ -35,7 +35,7 @@ const active = ref([])
           <td>{{ library.hifi_num_reads }}</td>
           <td>{{ library.hifi_read_length_mean }}</td>
           <td>{{ library.hifi_bases_percent }}</td>
-          <td>{{ library.percentage_total_reads }}</td>
+          <td class="MetricYellow">{{ library.percentage_total_reads }}</td>
         </tr>
       </table>
     </el-collapse-item>