fix(groups): many, mostly style, fixes

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

@@ -64,30 +64,10 @@
   overflow-x: hidden;
 }
 
-.diamond-btn {
-  margin-left: 8px;
-  background: $white;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 2px;
-  box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
-  cursor: pointer;
-  color: $gray-200;
-
-  &:hover:not(.create-btn) {
-    color: $purple-400;
-    box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
-  }
-}
-
 .create-btn {
   color: $white;
   background-color: $purple-200;
   height: 32px;
-  width: 112px;
 
   .svg-icon {
     color: $purple-500;

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

@@ -258,7 +258,7 @@
 
     &-modal {
       &-bg { background: $purple-300 !important; }
-      &-headings { color: $white; }
+      &-headings { color: $white !important; }
       &-icon { color: $purple-300 !important; }
       &-text { color: $black !important; }
       &-content {

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

@@ -44,26 +44,26 @@
           @change="changeMirrorPreference"
         />
         <div
-          class="day-start d-flex align-items-center"
+          class="day-start d-flex align-items-center mr-2"
           v-html="$t('dayStart', { startTime: groupStartTime } )"
         >
         </div>
         <div>
-          <div
+          <button
             id="create-task-btn"
             v-if="canCreateTasks"
-            class="create-btn ml-2 btn-primary diamond-btn btn"
+            class="btn btn-primary create-btn d-flex align-items-center"
             :class="{open: openCreateBtn}"
             @click.stop.prevent="openCreateBtn = !openCreateBtn"
             @keypress.enter="openCreateBtn = !openCreateBtn"
             tabindex="0"
           >
             <div
-              class="svg-icon"
+              class="svg-icon icon-10 color"
               v-html="icons.positive"
             ></div>
-            <div class="ml-2"> {{ $t('addTask') }} </div>
-          </div>
+            <div class="ml-75 mr-1"> {{ $t('addTask') }} </div>
+          </button>
           <div
             v-if="openCreateBtn"
             class="dropdown"

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

@@ -42,19 +42,19 @@
     <div
       class="claim-bottom-message d-flex align-items-center"
     >
-      <span
+      <div
         v-if="assignedUsersCount > 0"
-        class="users-icon ml-2 mt-n1"
+        class="svg-icon icon-16 ml-2 users-icon"
         :class="{'green-50': completionsCount === assignedUsersCount}"
         v-html="icons.users"
-      ></span>
+      ></div>
       <div
-        class="mr-auto ml-1"
+        class="mr-auto ml-1 my-auto"
         :class="{'green-10': showGreen}"
         v-html="message"
       ></div>
       <div
-        class="ml-auto mr-2 text-right"
+        class="ml-auto mr-1 my-auto"
         v-if="task.group.assignedUsers && ['daily','todo'].indexOf(task.type) !== -1"
       >
         <span
@@ -62,13 +62,13 @@
           class="mr-1 d-inline-flex align-items-center"
         >
           <span
-            class="small-check my-auto"
+            class="small-check"
             v-if="!showStatus && completionsCount"
             :class="{'green-50': completionsCount === assignedUsersCount}"
             v-html="icons.check"
           ></span>
           <span
-            class="my-auto ml-1 mr-2"
+            class="ml-1 mr-2"
             v-if="!showStatus && completionsCount"
           >
             {{ completionsCount }}/{{ assignedUsersCount }}
@@ -95,12 +95,11 @@
           <span
             v-html="icons.lastComplete"
             v-b-tooltip.hover.bottom="$t('lastCompleted')"
-            class="last-completed mr-1"
+            class="last-completed"
             :class="{'gray-200': !showGreen}"
           >
           </span>
           <span
-            class="my-auto"
             :class="{'green-10': showGreen}"
           >
             {{ formattedCompletionTime }}
@@ -126,6 +125,7 @@
     height: 16px;
     border-radius: 2px;
     padding-left: 2px;
+    padding-top: 1px;
     background-color: #e1e0e3;
 
     svg {
@@ -150,6 +150,7 @@
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
     font-size: 12px;
+    line-height: 1.334;
     padding-bottom: 0.25rem;
     padding-top: 0.25rem;
     z-index: 9;
@@ -222,8 +223,7 @@
   }
 
   .users-icon {
-    width: 16px;
-    height: 16px;
+    margin-top: -1px;
   }
 </style>
 
@@ -323,13 +323,14 @@ export default {
       return this.$t('error'); // task is open, or the other conditions aren't hitting right
     },
     singleAssignLastDone () {
-      const userId = this.task.group.assignedUsers[0];
-      const completion = this.task.group.assignedUsersDetail[userId];
-      return completion.completedDate;
+      const completion = this.task?.group?.assignedUsersDetail[this.user._id];
+      if (completion) return completion.completedDate;
+      return null;
     },
     showGreen () {
       if (this.assignedUsersCount !== 1) return false;
-      return this.singleAssignLastDone && moment().diff(this.singleAssignLastDone, 'days') < 1;
+      return this.singleAssignLastDone
+        && this.task?.group?.assignedUsersDetail[this.user._id].completed;
     },
     formattedCompletionTime () {
       if (!this.singleAssignLastDone) return '';

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

@@ -592,7 +592,7 @@
   @import '~@/assets/scss/colors.scss';
 
   #task-modal {
-    a {
+    a:not(.dropdown-item) {
       font-size: 12px;
       line-height: 1.33;
       color: $blue-10;

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

@@ -75,7 +75,8 @@
       </div>
     </div>
     <div
-      v-if="task && task.group.assignedUsersDetail && task.group.assignedUsersDetail[user._id]"
+      v-if="task && task.group && task.group.assignedUsersDetail
+        && task.group.assignedUsersDetail[user._id]"
       class="assignment-footer text-center py-2"
       v-html="$t('assignedDateAndUser', {
         username: task.group.assignedUsersDetail[user._id].assigningUsername,

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

@@ -171,17 +171,17 @@
         <div class="create-task-area">
           <div
             id="create-task-btn"
-            class="create-btn ml-auto btn-primary diamond-btn btn"
+            class="btn btn-primary create-btn d-flex align-items-center"
             :class="{open: openCreateBtn}"
             @click.stop.prevent="openCreateBtn = !openCreateBtn"
             @keypress.enter="openCreateBtn = !openCreateBtn"
             tabindex="0"
           >
             <div
-              class="svg-icon"
+              class="svg-icon icon-10 color"
               v-html="icons.positive"
             ></div>
-            <div class="ml-2"> {{ $t('addTask') }} </div>
+            <div class="ml-75 mr-1"> {{ $t('addTask') }} </div>
           </div>
           <div
             v-if="openCreateBtn"

website/server/models/group.js

@@ -1448,8 +1448,7 @@ schema.methods.syncTask = async function groupSyncTask (taskToSync, users, assig
     const assignmentData = {
       assignedDate: new Date(),
       assignedUsername: user.auth.local.username,
-      assigningUsername: assigningUser && assigningUser._id !== user._id
-        ? assigningUser.auth.local.username : null,
+      assigningUsername: assigningUser.auth.local.username,
       completed: false,
     };
 
@@ -1500,9 +1499,6 @@ schema.methods.unlinkTask = async function groupUnlinkTask (
   delete unlinkingTask.group.assignedUsersDetail[user._id];
   const assignedUserIndex = unlinkingTask.group.assignedUsers.indexOf(user._id);
   unlinkingTask.group.assignedUsers.splice(assignedUserIndex, 1);
-  if (unlinkingTask.group.assignedUsers.length === 0) {
-    unlinkingTask.group.assignedUsers = undefined;
-  }
   unlinkingTask.markModified('group');
 
   const promises = [unlinkingTask.save()];