From 04ce80153d78d55d63dd25b9d9d8fb64bbef6b2b Mon Sep 17 00:00:00 2001
From: Kieron Taylor <kt19@sanger.ac.uk>
Date: Fri, 26 Jul 2024 13:39:35 +0000
Subject: [PATCH] Lift colours to app-level CSS so we can reuse in more tables.

---
 frontend/src/App.vue                  | 16 ++++++++++++++++
 frontend/src/components/PoolStats.vue |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1e4c61c..ba59ee2 100644
--- 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
index 13b9999..3f853a8 100644
--- 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>