fix(teams): update single select style and correct create/edit issue

website/client/src/components/tasks/modal-controls/selectSingle.vue

@@ -4,6 +4,7 @@
       ref="dropdown"
       class="inline-dropdown select-multi"
       :toggle-class="isOpened ? 'active' : null"
+      :class="{'margin-adjust': selectedItem}"
       @show="wasOpened()"
       @hide="hideCallback($event)"
       @toggle="openOrClose($event)"
@@ -21,9 +22,18 @@
       <template v-slot:button-content>
         <div
           v-if="selectedItem !== null"
+          class="selected-item mr-1 d-inline-flex align-items-center"
+          @click.stop="selectItem({id: selectedItem})"
+        >
+          <div
             v-markdown="allItemsMap[selectedItem].name"
-          class="label"
+            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
         >
@@ -50,25 +60,12 @@
             class="label"
           ></div>
           <div
-            v-if="item.challenge"
+            v-if="item.addlText"
-            class="addl-text"
-          >
-            {{ $t('challenge') }}
-          </div>
-          <div
-            v-else-if="item.addlText"
             class="addl-text"
           >
             {{ item.addlText }}
           </div>
         </b-dropdown-item-button>
-
-        <div
-          v-if="addNew"
-          class="hint"
-        >
-          {{ $t('pressEnterToAddTag', { tagName: search }) }}
-        </div>
       </div>
     </b-dropdown>
   </div>
@@ -79,6 +76,45 @@
 
   $itemHeight: 2rem;
 
+  .selected-item {
+    display: inline-block;
+    height: 1.5rem;
+    border-radius: 100px;
+    background-color: $white;
+    border: solid 1px $gray-400;
+    position: relative;
+    top: -1px;
+
+    .multi-label {
+      height: 1rem;
+      font-size: 12px;
+      line-height: 16px;
+      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 {
     .dropdown-toggle {
       padding-left: 0.75rem;
@@ -170,6 +206,7 @@
 <script>
 import Vue from 'vue';
 import markdownDirective from '@/directives/markdown';
+import removeIcon from '@/assets/svg/remove.svg';
 
 export default {
   directives: {
@@ -188,10 +225,6 @@ export default {
     emptyMessage: {
       type: String,
     },
-    pillInvert: {
-      type: Boolean,
-      default: false,
-    },
     searchPlaceholder: {
       type: String,
     },
@@ -205,6 +238,9 @@ export default {
       isOpened: false,
       selected: this.selectedItem,
       search: '',
+      icons: Object.freeze({
+        remove: removeIcon,
+      }),
     };
   },
   computed: {

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

@@ -1491,25 +1491,20 @@ export default {
       this.$emit('cancel');
     },
     async toggleAssignment (memberId) {
-      if (this.purpose !== 'create') {
+      if (this.purpose === 'edit') {
-        if (this.assignedMember === null) {
+        if (this.assignedMember && this.assignedMember !== memberId) {
-          await this.$store.dispatch('tasks:unassignTask', {
-            taskId: this.task._id,
-            userId: memberId,
-          });
-        } else {
           await this.$store.dispatch('tasks:unassignTask', {
             taskId: this.task._id,
             userId: this.assignedMember,
           });
-
+        }
+        if (memberId) {
           await this.$store.dispatch('tasks:assignTask', {
             taskId: this.task._id,
             userId: memberId,
           });
         }
       }
-
       this.assignedMember = memberId;
     },
     focusInput () {