fix(tasks): styles and wordings

website/client/src/assets/scss/task.scss

@@ -284,8 +284,8 @@
         &:hover:not(.task-not-scoreable) { background: rgba($yellow-100, 0.25) !important; }
       }
       &-bg-noninteractive {
-        background: rgba($yellow-100, 0.15) !important;
-        .small-text { color: $yellow-1 !important; }
+        background-color: $gray-500 !important;
+        .small-text { color: $gray-100 !important; }
       }
     }
   }

website/client/src/components/group-plans/taskInformation.vue

@@ -40,7 +40,7 @@
           class="mr-3 mb-1 ml-auto"
           :label="'Copy tasks'"
           :checked="user.preferences.tasks.mirrorGroupTasks.indexOf(group._id) !== -1"
-          :hover-text="'Add assigned and open tasks to your personal task board'"
+          :hover-text="'Show assigned and open tasks on your personal task board'"
           @change="changeMirrorPreference"
         />
         <div

website/client/src/components/tasks/task.vue

@@ -387,7 +387,13 @@
           @keypress.enter="score('down')"
         >
           <div
-            class="svg-icon"
+            v-if="showTaskLockIcon"
+            class="svg-icon color lock"
+            v-html="icons.lock"
+          ></div>
+          <div
+            v-else
+            class="svg-icon mb-1"
             v-html="icons.gold"
           ></div>
           <div class="small-text">
@@ -846,8 +852,12 @@
       height: 24px;
     }
 
+    .lock {
+      color: $gray-200;
+      width: 15px;
+    }
+
     .small-text {
-      margin-top: 4px;
       font-style: initial;
       font-weight: bold;
     }

website/client/src/components/tasks/taskSummary.vue

@@ -66,7 +66,7 @@
           <span
             v-for="member in assignedUsernames"
             :key="member"
-            class="assigned-member py-1 px-75 mr-1"
+            class="assigned-member py-1 px-75 mb-1 mr-1"
           >
             @{{ member }}
           </span>