From 99bf6349e1b0b4af46d0abf9e9f5db7a8545a241 Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabrecat@gmail.com>
Date: Wed, 19 May 2021 16:00:12 -0500
Subject: [PATCH] fix(assignment): update single select dropdown style

---
 .../tasks/modal-controls/selectSingle.vue     | 45 +++----------------
 .../client/src/components/tasks/taskModal.vue | 16 ++++++-
 2 files changed, 20 insertions(+), 41 deletions(-)

diff --git a/website/client/src/components/tasks/modal-controls/selectSingle.vue b/website/client/src/components/tasks/modal-controls/selectSingle.vue
index 3d471d0019..5563874a4a 100644
--- a/website/client/src/components/tasks/modal-controls/selectSingle.vue
+++ b/website/client/src/components/tasks/modal-controls/selectSingle.vue
@@ -21,23 +21,13 @@
       </b-dropdown-header>
       <template v-slot:button-content>
         <div
-          v-if="selectedItem !== null"
-          class="selected-item mr-1 d-inline-flex align-items-center"
+          class="mr-1 d-inline-flex align-items-center"
           @click.stop="selectItem({id: selectedItem})"
+          v-markdown="
+            allItemsMap[selectedItem] ? `@${allItemsMap[selectedItem].name}`
+            : emptyMessage
+          "
         >
-          <div
-            v-markdown="allItemsMap[selectedItem].name"
-            class="multi-label my-auto ml-75 mr-2"
-          ></div>
-          <div
-            class="remove ml-auto mr-75"
-            v-html="icons.remove"
-          ></div>
-        </div>
-        <div
-          v-else
-        >
-          {{ emptyMessage }}
         </div>
       </template>
       <div
@@ -92,27 +82,6 @@
       letter-spacing: normal;
       color: $gray-100;
     }
-
-    &:hover {
-      .remove svg path {
-        stroke: $maroon-50;
-      }
-    }
-
-    .remove {
-      display: inline-block;
-      object-fit: contain;
-      margin-top: -0.125rem;
-
-      svg {
-        width: 0.5rem;
-        height: 0.5rem;
-
-        path {
-          stroke: $gray-200;
-        }
-      }
-    }
   }
 
   .select-multi {
@@ -206,7 +175,6 @@
 <script>
 import Vue from 'vue';
 import markdownDirective from '@/directives/markdown';
-import removeIcon from '@/assets/svg/remove.svg';
 
 export default {
   directives: {
@@ -238,9 +206,6 @@ export default {
       isOpened: false,
       selected: this.selectedItem,
       search: '',
-      icons: Object.freeze({
-        remove: removeIcon,
-      }),
     };
   },
   computed: {
diff --git a/website/client/src/components/tasks/taskModal.vue b/website/client/src/components/tasks/taskModal.vue
index a06a537613..391443aef1 100644
--- a/website/client/src/components/tasks/taskModal.vue
+++ b/website/client/src/components/tasks/taskModal.vue
@@ -451,10 +451,18 @@
           <div class="form-group row mt-3 mb-3">
             <label
               v-once
-              class="col-12 mb-1"
+              class="col-10 mb-1"
             >{{ $t('assignedTo') }}</label>
+            <a
+              v-if="assignedMember"
+              class="col-2 text-right mt-1"
+              @click="toggleAssignment(assignedMember._id)"
+            >
+              {{ $t('clear') }}
+            </a>
             <div class="col-12">
               <select-single
+                :key="assignedMember"
                 :all-items="membersNameAndId"
                 :empty-message="$t('unassigned')"
                 :search-placeholder="$t('chooseTeamMember')"
@@ -627,6 +635,12 @@
   @import '~@/assets/scss/colors.scss';
 
   #task-modal {
+    a {
+      font-size: 12px;
+      line-height: 1.33;
+      color: $blue-10;
+    }
+
     .modal-dialog.modal-sm {
       max-width: 448px;
     }