client-nuxt/components/GenericItem.vue

@@ -7,7 +7,7 @@
         elevation="2"
         :type="skeletonLoaderType"
       ></v-skeleton-loader>
-      <v-card v-else flat class="mt-3">
+      <v-card v-else flat class="mt-3" :color="color">
         <v-toolbar flat :color="toolbarColor">
           <v-btn nuxt x-small text class="mr-3" @click="goToItemListLocation()"
             ><v-icon left>mdi-arrow-left</v-icon>{{ itemListLabel }}</v-btn
@@ -89,8 +89,8 @@
         </v-toolbar>
 
         <v-card-text>
-          <v-card flat>
-            <v-toolbar dense flat
+          <v-card flat :color="color">
+            <v-toolbar dense flat :color="color"
               ><v-toolbar-title>Description</v-toolbar-title>
             </v-toolbar>
             <v-card-text v-if="item.description">
@@ -125,6 +125,7 @@ export default {
       default:
         'card-heading, list-item-avatar-two-line@3, article, table-heading, table-thead, table-tfoot',
     },
+    color: { type: String, default: null },
     flat: { type: Boolean, default: false },
   },
 
@@ -145,7 +146,7 @@ export default {
     },
     // TODO : choose color for toolbar
     toolbarColor() {
-      return this.$vuetify.theme.dark ? null : 'grey lighten-3'
+      return this.$vuetify.theme.dark ? null : this.color
     },
   },
 

client-nuxt/components/WorkflowInvocation.vue

 <template>
   <v-card flat>
-    <v-expansion-panels focusable multiple>
-      <v-expansion-panel v-for="step in steps" :key="step.step_id">
-        <v-expansion-panel-header disable-icon-rotate>
+    <v-expansion-panels focusable multiple :color="color">
+      <v-expansion-panel
+        v-for="step in steps"
+        :key="step.step_id"
+        :color="color"
+      >
+        <v-expansion-panel-header disable-icon-rotate :color="color">
           <v-row no-gutters>
-            <v-col>
+            <v-col :color="color">
               {{ step.step_id }}. {{ step.tool.name }}
               <span class="text-caption text--secondary ml-2"
                 ><v-chip small>{{ step.tool.version }}</v-chip></span
@@ -16,15 +20,16 @@
             <analysis-state :state="step.job.state"></analysis-state>
           </template>
         </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        <v-expansion-panel-content :color="color">
           <template v-if="Object.keys(step.job.params).length > 0">
             <v-list-item
               v-for="k in Object.keys(step.job.params)"
               :key="k"
               dense
+              :color="color"
             >
               <template #default>
-                <v-list-item-content>
+                <v-list-item-content :color="color">
                   <v-list-item-subtitle>
                     <v-badge
                       color="secondary"
@@ -37,7 +42,7 @@
               >
             </v-list-item>
           </template>
-          <v-card v-else flat>
+          <v-card v-else flat :color="color">
             <v-card-text class="pb-0">
               <v-alert border="left" text type="info" class="mt-4">
                 No parameter
@@ -56,7 +61,10 @@ export default {
   components: {
     AnalysisState,
   },
-  props: { steps: { type: Array, default: () => [] } },
+  props: {
+    steps: { type: Array, default: () => [] },
+    color: { type: String, default: null },
+  },
   methods: {
     getCols() {
       if (this.$vuetify.breakpoint.xlOnly) {

client-nuxt/nuxt.config.js

@@ -142,6 +142,9 @@ export default {
             darken3: '#000000',
             darken4: '#000000',
           },
+          project: colors.red.lighten2,
+          analysis: colors.green.lighten2,
+
           //     accent: '#82B1FF',
           //     error: '#FF5252',
           //     info: '#2196F3',

client-nuxt/pages/projects/_id.vue

@@ -7,6 +7,7 @@
       :item-location="projectLocation"
       :item-list-location="projectsListLocation"
       :loading="$fetchState.pending"
+      color="project"
     >
       <template #content>
         <v-toolbar flat bottom color="transparent">

client-nuxt/pages/projects/_id/analysis/_analysisId.vue

@@ -9,11 +9,12 @@
       :item-list-location="analysisListLocation"
       :item-actions="computedAnalysisActions"
       :loading="$fetchState.pending"
+      color="analysis"
     >
       <template #content>
         <v-card-text>
-          <v-card flat outlined>
-            <v-toolbar flat>
+          <v-card flat outlined color="analysis">
+            <v-toolbar flat color="analysis">
               <v-toolbar-title> Workflow invocation</v-toolbar-title></v-toolbar
             >
 
@@ -24,6 +25,7 @@
                 invocation.steps.length > 0
               "
               :steps="stepsWithJobMetrics"
+              color="analysis"
             ></workflow-invocation>
             <v-card-text v-else>
               <v-alert
@@ -48,8 +50,8 @@
           </v-card>
         </v-card-text>
         <v-card-text>
-          <v-card v-if="experimentId" flat outlined>
-            <v-toolbar dense flat
+          <v-card v-if="experimentId" flat outlined color="analysis">
+            <v-toolbar dense flat color="analysis"
               ><v-toolbar-title>
                 {{ sanitizedAnalysis.experiments[0].name }}
               </v-toolbar-title>
@@ -86,7 +88,7 @@
           >
         </v-card-text>
         <v-card-text>
-          <v-card flat outlined>
+          <v-card flat outlined color="analysis">
             <v-data-table
               v-if="sanitizedAnalysis"
               :headers="phenotypeCategoriesHeader"
@@ -96,9 +98,10 @@
               :search="phenotype_search"
               multi-sort
               class="elevation-0"
+              color="analysis"
             >
               <template v-slot:top>
-                <v-toolbar flat dense>
+                <v-toolbar flat dense color="analysis">
                   <v-toolbar-title> Phenotype Categories </v-toolbar-title>
                   <v-divider class="mx-4" inset vertical></v-divider>
                   <v-text-field