Merge pull request #2740 from mlorb/ml-sci-4833

Implement Status labels on a Task card [SCI-4823]

app/assets/stylesheets/projects.scss

@@ -316,10 +316,10 @@ path, ._jsPlumb_endpoint {
 
 .module-large .tags-container,
 .module-medium .tags-container {
-  padding-top: 2px;
+  padding-top: 4px;
 
   div {
-    font-size: 22pt;
+    font-size: 20px;
     width: 4px;
     height: 0px;
     display: inline-block;
@@ -335,9 +335,9 @@ path, ._jsPlumb_endpoint {
   }
 
   & span.badge {
-    margin-left: -8px;
-    margin-top: -10px;
+    margin-left: -12px;
     margin-right: 4px;
+    margin-top: -7px;
   }
 }
 

app/assets/stylesheets/themes/scinote.scss

@@ -742,6 +742,44 @@ ul.double-line > li {
   }
 }
 
+#canvas-container {
+  .panel-heading {
+    padding: 10px 15px 4px;
+  }
+
+  .panel-body {
+    padding: 6px 15px;
+
+    .status-label {
+      background-color: var(--state-color);
+      color: $color-white;
+      margin: 3px 0;
+      padding: 2px 8px;
+      white-space: nowrap;
+      width: fit-content;
+    }
+  }
+
+  .panel-footer {
+    .nav > li > a {
+      padding: 6px 15px;
+    }
+
+    .btn {
+      height: 30px;
+    }
+
+    .badge-indicator {
+      background: transparent;
+      color: $color-silver-chalice;
+      font-size: 12px;
+      margin-left: 0;
+      padding: 0;
+      top: 0;
+    }
+  }
+}
+
 .panel-options {
   position: relative;
   bottom: 8px;

app/views/canvas/full_zoom/_my_module.html.erb

@@ -37,6 +37,9 @@
     <% else %>
       <%= render partial: "my_modules/card_due_date_label.html.erb", locals: { my_module: my_module, format: :full_date } %>
     <% end %>
+    <div class="status-label" style="--state-color: #2DBE61">
+      Completed
+    </div>
   </div>
 
   <div class="panel-footer panel-footer-scinote buttons-container">