From fdbeda19e2c3c74d6485f15059da66b9d5fa2354 Mon Sep 17 00:00:00 2001
From: SabreCat <sabe@habitica.com>
Date: Mon, 8 Aug 2022 12:13:15 -0500
Subject: [PATCH] fix(tasks): icons and select lists

---
 website/client/src/assets/svg/icon-users.svg  | 14 -------------
 website/client/src/assets/svg/users.svg       | 21 +------------------
 .../header/banners/teamsTesting.vue           | 20 +++---------------
 .../src/components/tasks/approvalFooter.vue   |  6 +++---
 .../tasks/modal-controls/multiList.vue        | 12 +++--------
 .../tasks/modal-controls/selectMulti.vue      |  8 +++++++
 6 files changed, 18 insertions(+), 63 deletions(-)
 delete mode 100644 website/client/src/assets/svg/icon-users.svg

diff --git a/website/client/src/assets/svg/icon-users.svg b/website/client/src/assets/svg/icon-users.svg
deleted file mode 100644
index b13f52878c..0000000000
--- a/website/client/src/assets/svg/icon-users.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <path d="M11.2 13.2c0-1.231-.467-2.35-1.23-3.2h1.23c1.765 0 3.2 1.435 3.2 3.2h-3.2zm-9.6 0c0-1.765 1.435-3.2 3.2-3.2h1.6c1.765 0 3.2 1.435 3.2 3.2h-8zm4-9.6a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8zm3.452.415a2.4 2.4 0 1 1 0 3.97c.34-.587.548-1.26.548-1.985 0-.726-.209-1.398-.548-1.985zm4.154 4.829A3.986 3.986 0 0 0 14.4 6c0-2.206-1.794-4-4-4-.904 0-1.73.313-2.4.82A3.959 3.959 0 0 0 5.6 2c-2.206 0-4 1.794-4 4 0 1.112.458 2.118 1.194 2.844A4.795 4.795 0 0 0 0 13.2a1.6 1.6 0 0 0 1.6 1.6h12.8a1.6 1.6 0 0 0 1.6-1.6 4.795 4.795 0 0 0-2.794-4.356z" id="2aa2jluu5a"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <mask id="hhgg3a2mqb" fill="#fff">
-            <use xlink:href="#2aa2jluu5a"/>
-        </mask>
-        <use fill="#878190" xlink:href="#2aa2jluu5a"/>
-        <g mask="url(#hhgg3a2mqb)" fill="#878190">
-            <path d="M0 0h16v16H0z"/>
-        </g>
-    </g>
-</svg>
diff --git a/website/client/src/assets/svg/users.svg b/website/client/src/assets/svg/users.svg
index ca1d736b16..8d4d0ec37e 100644
--- a/website/client/src/assets/svg/users.svg
+++ b/website/client/src/assets/svg/users.svg
@@ -1,20 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
-    <defs>
-        <path id="rt3mruthma" d="M11.2 13.2c0-1.231-.467-2.35-1.23-3.2h1.23c1.765 0 3.2 1.435 3.2 3.2h-3.2zm-9.6 0c0-1.765 1.435-3.2 3.2-3.2h1.6c1.765 0 3.2 1.435 3.2 3.2h-8zm4-9.6C6.926 3.6 8 4.674 8 6c0 1.326-1.074 2.4-2.4 2.4-1.326 0-2.4-1.074-2.4-2.4 0-1.326 1.074-2.4 2.4-2.4zm3.452.415C9.436 3.754 9.9 3.6 10.4 3.6c1.326 0 2.4 1.074 2.4 2.4 0 1.326-1.074 2.4-2.4 2.4-.5 0-.964-.154-1.348-.415.34-.587.548-1.26.548-1.985 0-.726-.209-1.398-.548-1.985zm4.154 4.829C13.942 8.118 14.4 7.112 14.4 6c0-2.206-1.794-4-4-4-.904 0-1.73.313-2.4.82C7.33 2.314 6.504 2 5.6 2c-2.206 0-4 1.794-4 4 0 1.112.458 2.118 1.194 2.844C1.146 9.604 0 11.266 0 13.2c0 .884.716 1.6 1.6 1.6h12.8c.884 0 1.6-.716 1.6-1.6 0-1.934-1.146-3.596-2.794-4.356z"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <g>
-            <g>
-                <g transform="translate(-1228 -1456) translate(1216 1416) translate(12 40)">
-                    <mask id="6szqyv7o1b" fill="#fff">
-                        <use xlink:href="#rt3mruthma"/>
-                    </mask>
-                    <use fill="#878190" xlink:href="#rt3mruthma"/>
-                    <g fill="#878190" mask="url(#6szqyv7o1b)">
-                        <path d="M0 0H16V16H0z"/>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12.8"><path d="M11.2,12.8A4.79,4.79,0,0,0,10,9.6H11.2a3.21,3.21,0,0,1,3.2,3.2Zm-9.6,0A3.21,3.21,0,0,1,4.8,9.6H6.4a3.21,3.21,0,0,1,3.2,3.2Zm4-9.6A2.4,2.4,0,1,1,3.2,5.6,2.39,2.39,0,0,1,5.6,3.2Zm3.45.42A2.35,2.35,0,0,1,10.4,3.2a2.4,2.4,0,1,1,0,4.8,2.35,2.35,0,0,1-1.35-.42,3.84,3.84,0,0,0,0-4Zm4.16,4.82A4,4,0,0,0,8,2.42,4,4,0,0,0,5.6,1.6,4,4,0,0,0,2.79,8.44,4.82,4.82,0,0,0,0,12.8a1.6,1.6,0,0,0,1.6,1.6H14.4A1.6,1.6,0,0,0,16,12.8a4.82,4.82,0,0,0-2.79-4.36Z" transform="translate(0 -1.6)" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/website/client/src/components/header/banners/teamsTesting.vue b/website/client/src/components/header/banners/teamsTesting.vue
index 4db36ecc46..40f2c1e0f1 100644
--- a/website/client/src/components/header/banners/teamsTesting.vue
+++ b/website/client/src/components/header/banners/teamsTesting.vue
@@ -9,14 +9,12 @@
       slot="content"
       class="content m-auto d-flex justify-content-center align-items-center"
     >
-      <img src="~@/assets/images/bug.png" class="mr-11px">
       <span class="mr-1">
-        <strong>You're using the Habitica Groups Beta.</strong>
+        <strong>You're previewing new Habitica Groups!</strong>
       </span>
-      <a href="mailto:testing@habitica.com" class="send-feedback">
-        Please submit bugs and feedback here.
+      <a href="mailto:admin@habitica.com" class="send-feedback">
+        Have a question?
       </a>
-      <img src="~@/assets/images/bug.png" class="ml-11px flip">
     </div>
   </base-banner>
 </template>
@@ -40,18 +38,6 @@
     }
   }
 
-  .flip {
-    transform: scaleX(-1);
-  }
-
-  .ml-11px {
-    margin-left: 11px;
-  }
-
-  .mr-11px {
-    margin-right: 11px;
-  }
-
   .send-feedback {
     color: $white;
     text-decoration: underline;
diff --git a/website/client/src/components/tasks/approvalFooter.vue b/website/client/src/components/tasks/approvalFooter.vue
index a364ea54b6..f2b128f9db 100644
--- a/website/client/src/components/tasks/approvalFooter.vue
+++ b/website/client/src/components/tasks/approvalFooter.vue
@@ -44,7 +44,7 @@
     >
       <div
         v-if="assignedUsersCount > 0"
-        class="svg-icon icon-16 ml-2 users-icon color"
+        class="svg-icon ml-2 users-icon color"
         :class="{'green-10': completionsCount === assignedUsersCount}"
         v-html="icons.users"
       ></div>
@@ -210,7 +210,7 @@
   }
 
   .users-icon {
-    margin-top: -1px;
+    width: 16px;
   }
 </style>
 
@@ -220,7 +220,7 @@ import reduce from 'lodash/reduce';
 import { mapState } from '@/libs/store';
 import checkIcon from '@/assets/svg/check.svg';
 import lockIcon from '@/assets/svg/lock.svg';
-import usersIcon from '@/assets/svg/icon-users.svg';
+import usersIcon from '@/assets/svg/users.svg';
 import lastComplete from '@/assets/svg/last-complete.svg';
 
 export default {
diff --git a/website/client/src/components/tasks/modal-controls/multiList.vue b/website/client/src/components/tasks/modal-controls/multiList.vue
index da774ca139..08fbf214c1 100644
--- a/website/client/src/components/tasks/modal-controls/multiList.vue
+++ b/website/client/src/components/tasks/modal-controls/multiList.vue
@@ -4,16 +4,16 @@
     :class="{ 'break': maxItems === 0 }"
   >
     <template v-if="items.length === 0">
-      <div class="items-none">
+      <div class="items-none mb-1">
         {{ emptyMessage }}
       </div>
     </template>
     <template v-else>
       <div
-        v-for="item in truncatedSelectedItems"
+        v-for="item in items"
         :key="item.id"
         :title="item.name"
-        class="multi-item mr-1 d-inline-flex align-items-center"
+        class="multi-item mr-1 mb-1 d-inline-flex align-items-center"
         :class="{'margin-adjust': maxItems !== 0, 'pill-invert': pillInvert}"
 
         @click.stop="removeItem($event, item)"
@@ -27,12 +27,6 @@
           v-html="icons.remove"
         ></div>
       </div>
-      <div
-        v-if="remainingSelectedItems.length > 0"
-        class="items-more ml-75"
-      >
-        +{{ remainingSelectedItems.length }}
-      </div>
     </template>
   </div>
 </template>
diff --git a/website/client/src/components/tasks/modal-controls/selectMulti.vue b/website/client/src/components/tasks/modal-controls/selectMulti.vue
index f8781a8d73..44cb6c6c45 100644
--- a/website/client/src/components/tasks/modal-controls/selectMulti.vue
+++ b/website/client/src/components/tasks/modal-controls/selectMulti.vue
@@ -29,6 +29,7 @@
       </b-dropdown-header>
       <template v-slot:button-content>
         <multi-list
+          class="d-flex flex-wrap"
           :items="selectedItemsAsObjects"
           :add-new="addNew"
           :pill-invert="pillInvert"
@@ -85,6 +86,13 @@
 
 $itemHeight: 2rem;
 
+.inline-dropdown {
+  &.select-multi .dropdown-toggle {
+    height: auto;
+    padding-bottom: 0px;
+  }
+}
+
 .select-multi {
   .dropdown-toggle {
     padding-left: 0.75rem;