#470: Change study status colors.

* Color changes to better differentiate between each state. * Add bottom border to header, to clearly see in which state the study is. * Border style dashed for preview mode and solid line for non preview states.
MORE-Platform · Jun 28, 2024 · 1f9e7b5 · 1f9e7b5
1 parent 9453dc4
commit 1f9e7b5
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 7 deletions.
diff --git a/src/components/dialog/ChangeStudyStatusDialog.vue b/src/components/dialog/ChangeStudyStatusDialog.vue
@@ -97,7 +97,7 @@ Licensed under the Elastic License 2.0. */
     <div class="flex justify-end">
       <Button
         type="button"
-        class="p-button btn-gray !mr-3"
+        class="p-button btn-gray"
         :label="$t('global.labels.close')"
         @click="closeDialog"
       />

diff --git a/src/components/shared/Header.vue b/src/components/shared/Header.vue
@@ -9,7 +9,9 @@ Licensed under the Elastic License 2.0. */
   import ProgressBar from 'primevue/progressbar';
   import useLoader from '../../composable/useLoader';
   import { useRoute } from 'vue-router';
+  import { useStudyStore } from '../../stores/studyStore';
 
+  const studyStore = useStudyStore();
   const route = useRoute();
   const auth = inject('authService') as AuthService;
 
@@ -24,7 +26,7 @@ Licensed under the Elastic License 2.0. */
 </script>
 
 <template>
-  <header class="more-header py-2 shadow-md">
+  <header class="more-header py-2 shadow-md" :class="studyStore.studyStatus">
     <div class="container m-auto flex justify-between px-10">
       <router-link to="/">
         <div class="logo cursor-pointer">
@@ -130,6 +132,28 @@ Licensed under the Elastic License 2.0. */
     width: 100%;
     background-color: white;
     z-index: 1000;
+    border-bottom: 2px solid;
+
+    &.draft {
+      border-color: var(--gray-400);
+    }
+    &.preview {
+      border-color: var(--red-400);
+      border-style: dashed;
+    }
+    &.paused-preview {
+      border-color: var(--green-400);
+      border-style: dashed;
+    }
+    &.active {
+      border-color: var(--red-400);
+    }
+    &.paused {
+      border-color: var(--green-400);
+    }
+    &.closed {
+      border-color: var(--blue-400);
+    }
 
     .loader {
       position: fixed;

diff --git a/src/components/study/StudyStatusPill.vue b/src/components/study/StudyStatusPill.vue
@@ -18,23 +18,37 @@
 
 <style scoped lang="postcss">
   .status {
-    border: 2px solid var(--text-color);
+    border: 2px solid var(--gray-400);
     border-radius: var(--border-radius);
     margin: 0 0.25rem;
     padding: 0.25rem;
     text-align: center;
     text-transform: uppercase;
     &.active {
-      border-color: var(--green-400);
-      color: var(--green-400);
+      border-color: var(--red-400);
+      color: var(--red-400);
     }
     &.preview {
-      border-color: var(--blue-400);
-      color: var(--blue-400);
+      border-color: var(--red-400);
+      color: var(--red-400);
+      border-style: dashed;
+    }
+    &.paused-preview {
+      border-color: var(--green-400);
+      color: var(--green-400);
+      border-style: dashed;
     }
     &.draft {
       border-color: var(--gray-400);
       color: var(--gray-400);
     }
+    &.paused {
+      border-color: var(--green-400);
+      color: var(--green-400);
+    }
+    &.closed {
+      border-color: var(--blue-400);
+      color: var(--blue-400);
+    }
   }
 </style>