#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.
MORE-Platform · Jul 3, 2024 · 8aeeedd · 8aeeedd
1 parent 4401f39
commit 8aeeedd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git 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
@@ -25,26 +25,26 @@
     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 {
       border-color: var(--gray-400);
       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);