From 61d396204f33aee68298d101cb11bb6d68a53fd1 Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabrecat@gmail.com>
Date: Tue, 27 Jul 2021 11:25:31 -0500
Subject: [PATCH] fix(teams): more layout tweakage

---
 website/client/src/assets/scss/create-task.scss | 17 +++++++++++------
 .../components/group-plans/taskInformation.vue  |  8 ++++----
 website/client/src/components/tasks/user.vue    |  6 +++---
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/website/client/src/assets/scss/create-task.scss b/website/client/src/assets/scss/create-task.scss
index 5689228c5f..da2c4cc9ed 100644
--- a/website/client/src/assets/scss/create-task.scss
+++ b/website/client/src/assets/scss/create-task.scss
@@ -6,10 +6,17 @@
   align-items: center;
 
   .dropdown {
+    width: 140px;
     border-radius: 2px;
     box-shadow: 0 3px 6px 0 rgba(26, 24, 29, 0.16), 0 3px 6px 0 rgba(26, 24, 29, 0.24);
     background-color: $white;
     margin-top: 2px;
+    position: absolute;
+    right: 0px;
+
+    .task-icon {
+      width: 35%;
+    }
 
     .dropdown-item:hover {
       .svg-icon {
@@ -17,13 +24,11 @@
       }
     }
     .svg-icon {
-      width: 20px;
-      height: 20px;
       color: $gray-200;
 
       &.icon-habit {
-        width: 24px;
-        height: 16px;
+        width: 30px;
+        height: 20px;
       }
 
       &.icon-daily {
@@ -37,8 +42,8 @@
       }
 
       &.icon-reward {
-        width: 24px;
-        height: 18px;
+        width: 26px;
+        height: 20px;
       }
     }
   }
diff --git a/website/client/src/components/group-plans/taskInformation.vue b/website/client/src/components/group-plans/taskInformation.vue
index 9a542fc149..58fb84277a 100644
--- a/website/client/src/components/group-plans/taskInformation.vue
+++ b/website/client/src/components/group-plans/taskInformation.vue
@@ -28,7 +28,7 @@
         >
       </div>
       <div
-        class="create-task-area d-flex align-items-top"
+        class="create-task-area ml-auto d-flex align-items-top"
       >
         <div
           class="day-start mb-auto d-flex align-items-center"
@@ -39,7 +39,7 @@
           <div
             id="create-task-btn"
             v-if="canCreateTasks"
-            class="create-btn btn-primary diamond-btn btn"
+            class="create-btn ml-2 btn-primary diamond-btn btn"
             :class="{open: openCreateBtn}"
             @click.stop.prevent="openCreateBtn = !openCreateBtn"
             @keypress.enter="openCreateBtn = !openCreateBtn"
@@ -61,14 +61,14 @@
               @click="createTask(type)"
               class="dropdown-item d-flex pl-2 py-1"
             >
-              <div class="w-25 d-flex align-items-center justify-content-center">
+              <div class="d-flex align-items-center justify-content-center task-icon">
                 <div
                   class="svg-icon m-auto"
                   :class="`icon-${type}`"
                   v-html="icons[type]"
                 ></div>
               </div>
-              <div class="w-75 ml-1">
+              <div class="ml-1">
                 {{ $t(type) }}
               </div>
             </div>
diff --git a/website/client/src/components/tasks/user.vue b/website/client/src/components/tasks/user.vue
index 8b153e9389..f98c0c0d10 100644
--- a/website/client/src/components/tasks/user.vue
+++ b/website/client/src/components/tasks/user.vue
@@ -166,7 +166,7 @@
         <div class="create-task-area">
           <div
             id="create-task-btn"
-            class="create-btn diamond-btn btn"
+            class="create-btn ml-auto btn-primary diamond-btn btn"
             :class="{open: openCreateBtn}"
             @click.stop.prevent="openCreateBtn = !openCreateBtn"
             @keypress.enter="openCreateBtn = !openCreateBtn"
@@ -188,14 +188,14 @@
               @click="createTask(type)"
               class="dropdown-item d-flex pl-2 py-1"
             >
-              <div class="w-25 d-flex align-items-center justify-content-center">
+              <div class="d-flex align-items-center justify-content-center task-icon">
                 <div
                   class="svg-icon m-auto"
                   :class="`icon-${type}`"
                   v-html="icons[type]"
                 ></div>
               </div>
-              <div class="w-75 ml-1">
+              <div class="ml-1">
                 {{ $t(type) }}
               </div>
             </div>