fix(teams): more style updates

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

@@ -14,12 +14,12 @@
       @taskEdited="loadTasks"
       @taskDestroyed="taskDestroyed"
     />
-    <div class="row tasks-navigation">
-      <div class="col-12 col-md-4">
+    <div class="row tasks-navigation mb-4">
+      <div class="col-12 col-md-4 d-flex align-items-center">
         <h1>{{ group.name }}</h1>
       </div>
       <!-- @TODO: Abstract to component!-->
-      <div class="col-12 col-md-4">
+      <div class="col-12 col-md-4 d-flex justify-content-center align-items-center">
         <input
           v-model="searchText"
           class="form-control input-search"
@@ -28,18 +28,18 @@
         >
       </div>
       <div
-        class="create-task-area ml-auto d-flex align-items-center"
+        class="col-12 col-md-4 create-task-area d-flex align-items-center"
       >
         <toggle-switch
           id="taskMirrorToggle"
-          class="mr-3 mb-1"
+          class="mr-3 mb-1 ml-auto"
           :label="'Copy tasks'"
           :checked="user.preferences.tasks.mirrorGroupTasks"
           :hover-text="'Add assigned and open tasks to your personal task board'"
           @change="changeMirrorPreference"
         />
         <div
-          class="day-start mb-auto d-flex align-items-center"
+          class="day-start d-flex align-items-center"
           v-html="$t('dayStart', { startTime: groupStartTime } )"
         >
         </div>
@@ -126,11 +126,12 @@
 
   h1 {
     color: $purple-300;
+    margin-bottom: 0px;
   }
 
   .create-task-area {
     top: 1.5rem;
-    right: 2.25rem;
+    height: 40px;
 
     .day-start {
       height: 2rem;
@@ -141,6 +142,10 @@
     }
   }
 
+  .input-search {
+    max-width: 458px;
+  }
+
   .positive {
     display: inline-block;
     width: 10px;

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

@@ -19,7 +19,7 @@
           v-if="task.type === 'habit'"
           class="left-control d-flex justify-content-center pt-3"
           :class="[{
-            'control-bottom-box': task.group.id,
+            'control-bottom-box': task.group.id && !isOpenTask,
             'control-top-box': approvalsClass
           }, controlClass.up.bg]"
         >
@@ -52,7 +52,7 @@
           v-if="task.type === 'daily' || task.type === 'todo'"
           class="left-control d-flex justify-content-center"
           :class="[{
-            'control-bottom-box': task.group.id,
+            'control-bottom-box': task.group.id && !isOpenTask,
             'control-top-box': approvalsClass}, controlClass.bg]"
         >
           <div
@@ -347,7 +347,7 @@
           v-if="task.type === 'habit'"
           class="right-control d-flex justify-content-center pt-3"
           :class="[{
-            'control-bottom-box': task.group.id,
+            'control-bottom-box': task.group.id && !isOpenTask,
             'control-top-box': approvalsClass}, controlClass.down.bg]"
         >
           <div

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

@@ -22,7 +22,19 @@
         >
           {{ title }}
         </h2>
-        <div class="ml-auto d-flex align-items-center">
+        <span
+          v-if="groupAccessRequiredAndOnPersonalPage"
+          class="svg-icon icon-12 close-icon"
+          aria-hidden="true"
+          tabindex="0"
+          @click="cancel()"
+          @keypress.enter="cancel()"
+          v-html="icons.close"
+        ></span>
+        <div
+          v-else
+          class="ml-auto d-flex align-items-center"
+        >
           <button
             class="cancel-task-btn mr-3"
             :class="cssClass('headings')"
@@ -121,7 +133,7 @@
     <div
       v-if="task && groupAccessRequiredAndOnPersonalPage
         && (task.type === 'daily' || task.type === 'todo')"
-      class="summary-sentence py-3 px-4"
+      class="summary-sentence py-3 px-4 mb-n4"
       v-html="summarySentence"
     >
     </div>
@@ -995,6 +1007,7 @@
   .summary-sentence {
     background-color: $gray-700;
     line-height: 1.71;
+    border-radius: 0px 0px 8px 8px;
   }
 
   .input-group-text {
@@ -1040,6 +1053,7 @@ import goldIcon from '@/assets/svg/gold.svg';
 import chevronIcon from '@/assets/svg/chevron.svg';
 import calendarIcon from '@/assets/svg/calendar.svg';
 import gripIcon from '@/assets/svg/grip.svg';
+import closeIcon from '@/assets/svg/close.svg';
 
 export default {
   components: {
@@ -1070,6 +1084,7 @@ export default {
         streak: streakIcon,
         calendar: calendarIcon,
         grip: gripIcon,
+        close: closeIcon,
       }),
       members: [],
       membersNameAndId: [],
@@ -1156,6 +1171,7 @@ export default {
     },
     title () {
       const type = this.$t(this.task.type);
+      if (this.groupAccessRequiredAndOnPersonalPage) return this.$t('taskSummary', { type });
       return this.$t(this.purpose === 'edit' ? 'editATask' : 'createTask', { type });
     },
     isUserTask () {

website/common/locales/en/tasks.json

@@ -132,5 +132,6 @@
   "errorTemporaryItem": "This item is temporary and cannot be pinned.",
   "addTags": "Add tags...",
   "enterTag": "Enter a tag",
-  "pressEnterToAddTag": "Press Enter to add tag: '<%= tagName %>'"
+  "pressEnterToAddTag": "Press Enter to add tag: '<%= tagName %>'",
+  "taskSummary": "<%= type %> Summary"
 }