From 1f9e7b5a1f6fd84fc7844f9967f1fdc52ff07572 Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Fri, 28 Jun 2024 09:53:24 +0200
Subject: [PATCH] #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.
---
 .../dialog/ChangeStudyStatusDialog.vue        |  2 +-
 src/components/shared/Header.vue              | 26 ++++++++++++++++++-
 src/components/study/StudyStatusPill.vue      | 24 +++++++++++++----
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/components/dialog/ChangeStudyStatusDialog.vue b/src/components/dialog/ChangeStudyStatusDialog.vue
index 752dff32..d35f0cbe 100644
--- 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
index c9b89eca..7b7b8347 100644
--- 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
index 8dcf5512..ba4c0e23 100644
--- 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>