From 8aeeedd42575fe4206093306b3706d5c8afdde1d Mon Sep 17 00:00:00 2001
From: bnitsch <bernhard.nitsch@redlink.at>
Date: Wed, 3 Jul 2024 14:32:31 +0200
Subject: [PATCH] #470: Change status color

* Active states are green and pause states are red.
* Do not show the status color on header as border-bottom when on dashboard view.
---
 src/components/shared/Header.vue         | 20 ++++++++++++++------
 src/components/study/StudyStatusPill.vue | 16 ++++++++--------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/shared/Header.vue b/src/components/shared/Header.vue
index 7b7b834..2d63faa 100644
--- a/src/components/shared/Header.vue
+++ b/src/components/shared/Header.vue
@@ -26,7 +26,7 @@ Licensed under the Elastic License 2.0. */
 </script>
 
 <template>
-  <header class="more-header py-2 shadow-md" :class="studyStore.studyStatus">
+  <header class="more-header py-2 shadow-md" :class="[{ [studyStore.studyStatus]: !checkRoute('Dashboard') }]">
     <div class="container m-auto flex justify-between px-10">
       <router-link to="/">
         <div class="logo cursor-pointer">
@@ -132,24 +132,32 @@ Licensed under the Elastic License 2.0. */
     width: 100%;
     background-color: white;
     z-index: 1000;
-    border-bottom: 2px solid;
+
+    &.draft,
+    &.preview,
+    &.paused-preview,
+    &.active,
+    &.paused,
+    &.closed {
+      border-bottom: 2px solid;
+    }
 
     &.draft {
       border-color: var(--gray-400);
     }
     &.preview {
-      border-color: var(--red-400);
+      border-color: var(--green-400);
       border-style: dashed;
     }
     &.paused-preview {
-      border-color: var(--green-400);
+      border-color: var(--red-400);
       border-style: dashed;
     }
     &.active {
-      border-color: var(--red-400);
+      border-color: var(--green-400);
     }
     &.paused {
-      border-color: var(--green-400);
+      border-color: var(--red-400);
     }
     &.closed {
       border-color: var(--blue-400);
diff --git a/src/components/study/StudyStatusPill.vue b/src/components/study/StudyStatusPill.vue
index ba4c0e2..ef8e875 100644
--- a/src/components/study/StudyStatusPill.vue
+++ b/src/components/study/StudyStatusPill.vue
@@ -25,17 +25,17 @@
     text-align: center;
     text-transform: uppercase;
     &.active {
-      border-color: var(--red-400);
-      color: var(--red-400);
+      border-color: var(--green-400);
+      color: var(--green-400);
     }
     &.preview {
-      border-color: var(--red-400);
-      color: var(--red-400);
+      border-color: var(--green-400);
+      color: var(--green-400);
       border-style: dashed;
     }
     &.paused-preview {
-      border-color: var(--green-400);
-      color: var(--green-400);
+      border-color: var(--red-400);
+      color: var(--red-400);
       border-style: dashed;
     }
     &.draft {
@@ -43,8 +43,8 @@
       color: var(--gray-400);
     }
     &.paused {
-      border-color: var(--green-400);
-      color: var(--green-400);
+      border-color: var(--red-400);
+      color: var(--red-400);
     }
     &.closed {
       border-color: var(--blue-400);