fix: Add some UI adjustments -MEED-10159-10161-10162

webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCard.vue

@@ -17,15 +17,15 @@
 <template>
   <div id="projectCard">
     <v-flex :class="flipCard && 'taskCardFlip taskCardFlipped' || 'taskCardFlip'">
-      <div class="taskCardFront py-3 px-2">
+      <div class="taskCardFront py-3 pe-4">
         <project-card-front
           :project="project"
           @openDrawer="openEditDrawer"
           @closed="onCloseDrawer"
           @refreshProjects="refreshProjects"
           @flip="flipCard = true; flip()" />
       </div>
-      <div class="tasksCardBack pa-3">
+      <div class="tasksCardBack py-3 pe-4">
         <project-card-Reverse
           ref="reversCard"
           :project="project"

webapps/src/main/webapp/vue-app/tasks-management/components/Project/ProjectCardList.vue

@@ -39,7 +39,7 @@
     </div>
     <div v-else>
       <v-card flat class="transparent">
-        <v-item-group class="pa-4">
+        <v-item-group class="py-4">
           <v-container class="full-width pa-0">
             <v-row class="ma-0 border-box-sizing">
               <v-col

webapps/src/main/webapp/vue-app/tasks/components/TaskEmptyRow.vue

@@ -1,11 +1,43 @@
 <template>
   <div class="mx-auto mt-n5 d-flex flex-column">
     <v-icon
-      color="secondary"
+      color="tertiary"
       size="60"
       class="mb-2">
       fas fa-tasks
     </v-icon>
-    <p class="mt-2 mb-0 text-sub-title">{{ $t('label.start.adding.tasks') }}</p>
+    <p class="mt-2 mb-4">{{ $t('label.start.adding.tasks') }}</p>
+    <v-btn
+      id="addNewTaskButton"
+      :small="$root.isMobile"
+      color="primary"
+      outlined
+      @click="openTaskDrawer">
+      <span>
+        {{ $t('label.addTask') }}
+      </span>
+    </v-btn> 
   </div>
-</template>
+</template>
+<script>
+export default {
+  props: {
+    project: {
+      type: String,
+      default: ''
+    },
+  },  
+  methods: {
+    openTaskDrawer() {
+      const defaultTask={
+        id: null,
+        status: {project: this.project},
+        priority: 'NONE',
+        description: '',
+        title: ''
+      };
+      this.$root.$emit('open-task-drawer', defaultTask);
+    },
+  }
+};
+</script>

webapps/src/main/webapp/vue-app/tasks/components/TasksApp.vue

@@ -24,7 +24,7 @@
           class="widget-text-header text-truncate" 
           @click="navigateTo('tasks/myTasks','ALL')">{{ $t('label.tasks.header') }}</a>
       </template>
-      <template #action>
+      <template v-if="tasksSize" #action>
         <v-btn
           :title="$t('label.addTask')"
           icon
@@ -96,7 +96,9 @@
         class="d-flex flex-column flex-grow-1 justify-center align-center"
         min-height="188"
         flat>
-        <task-empty-row v-if="displayPlaceholder" />
+        <task-empty-row
+          v-if="displayPlaceholder"
+          :project="project" />
       </v-card>
     </widget-wrapper>
     <task-drawer