add status labels

RonWalker22 · Feb 24, 2021 · c492a94 · c492a94
1 parent 0240e44
commit c492a94
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/app/javascript/dashboard/routes/dashboard/feedback/feedbackItem/FeedbackItem.vue b/app/javascript/dashboard/routes/dashboard/feedback/feedbackItem/FeedbackItem.vue
@@ -17,9 +17,15 @@
           </div>
         </div>
       </div>
-      <h1 class="feedback-title text-center" data-test-id="feedback-title">
+      <h1 class="feedback-title" data-test-id="feedback-title">
         {{ feedback.title }}
+        <span class="feedback-id"> #{{ feedback.id }}</span>
       </h1>
+      <div>
+        <span class="label" :class="feedback.status + '-label'">
+          {{ feedback.status }}
+        </span>
+      </div>
       <Proposals :feedback="feedback" />
       <Toolbar :feedback="feedback" />
     </div>
@@ -128,4 +134,34 @@ h1 {
     }
   }
 }
+
+.feedback-id {
+  color: #6e767d;
+}
+
+.review-label,
+.upcoming-label,
+.accept-label,
+.preview-label,
+.reject-label {
+  font-size: 1.2rem;
+  color: #000;
+}
+
+.review-label {
+  background: #cae7ff;
+}
+
+.upcoming-label {
+  background: #e1e1e1;
+}
+.preview-label {
+  background: #fdda82;
+}
+.accept-label {
+  background: #83ff8a;
+}
+.reject-label {
+  background: #ffc3c3;
+}
 </style>
diff --git a/app/javascript/dashboard/routes/dashboard/feedback/feedbackItem/proposals/Proposal.vue b/app/javascript/dashboard/routes/dashboard/feedback/feedbackItem/proposals/Proposal.vue
@@ -5,7 +5,6 @@
         <div class="columns">
           <h2 class="proposal-title">
             {{ proposalType }}
-            <span v-if="isSolution" class="solution-id"> #{{ index }}</span>
           </h2>
           <div v-if="isPrimarySolution" class="primary-checkmark">
             <i
@@ -304,10 +303,6 @@ h2 {
   font-size: $font-size-medium;
 }
 
-.solution-id {
-  color: #6e767d;
-}
-
 .card-section {
   padding: 1rem 1rem 1rem 0rem;
   margin-left: 1rem;