Teams UI Redesign and A11y Updates (#12142)

* WIP(a11y): task modal updates

* fix(tasks): borders in modal

* fix(tasks): circley locks

* fix(task-modal): placeholders

* WIP(task-modal): disabled states, hide empty options, +/- restyle

* fix(task-modal): box shadows instead of borders, habit control pointer

* fix(task-modal): button states?

* fix(modal): tighten up layout, new spacing utils

* fix(tasks): more stylin

* fix(tasks): habit hovers

* fix(css): checklist labels, a11y colors

* fix(css): one more missed hover issue

* fix(css): lock Challenges, label fixes

* fix(css): scope input/textarea changes

* fix(style): task tweakies

* fix(style): more button fixage

* WIP(component): start select list story

* working example of a templated selectList

* fix(style): more button corrections

* fix(lint): EOL

* fix(buttons): factor btn-secondary to better override Bootstrap

* fix(styles): standardize more buttons

* wip: difficulty select - style fixes

* selectDifficulty works! 🎉 - fix styles

* change the dropdown-item sizes only for the selectList ones

* selectTranslatedArray

* changed many label margins

* more correct dropdown style

* fix(modals): button corrections

* input-group styling + datetime picker without today button

* Style/margins for "repeat every" - extract selectTag.vue

* working tag-selection / update - cleanup

* fix stories

* fix svg color on create modal (purple)

* fix task modal bottom padding

* correct dropdown shadow

* update dropdown-toggle caret size / color

* fixed checklist style

* sync checked state

* selectTag padding

* fix spacing between positive/negative streak inputs

* toggle-checkbox + fix some spacings

* disable repeat-on when its a groupTask

* fix new checklist-item

* fix toggle-checkbox style - fix difficulty style

* fix checklist ui

* add tags label , when there arent any tags selected

* WORKING select-tag component 🎉

* fix taglist story

* show max 5 items in tag dropdown + "X more" label

* fix datetime clear button

* replace m-b-xs to mb-1 (bootstrap) - fix input-group-text style

* fix styles of advanced settings

* fix delete task styles

* always show grippy on hover of the item

* extract modal-text-input mixin + fix the borders/dropshadow

* fix(spacing): revert most to Bootstrap

* feat(checklists): make local copy of master checklist non-editable
also aggressively update checklists because they weren't syncing??

* fix(checklists): handle add/remove options better

* feat(teams): manager notes field

* fix select/dropdown styles

* input border + icon colors

* delete task underline color

* fix checklist "delete icon" vertical position

* selectTag fixes - normal open/close toggle working again - remove icon color

* fixing icons:

Trash can - Delete
Little X - Remove
Big X - Close
Block - Block

* fix taglist margins / icon sizes

* wip margin overview (in storybook)

* fix routerlink

* remove unused method

* new selectTag style + add markdown inside tagList + scrollable tag selection

* fix selectTag / selectList active border

* fix difficulty select (svg default color)

* fix input padding-left + fix reset habit streak fullwidth / padding + "repeat every" gray text (no border)

* feat(teams): improved approval request > approve > reward flow

* fix(tests): address failures

* fix(lint): oops only

* fix(tasks): short-circuit group related logic

* fix(tasks): more short circuiting

* fix(tasks): more lines, less lint

* fix(tasks): how do i keep missing these

* feat(teams): provide assigning user summary

* fix(teams): don't attempt to record assiging user if not supplied

* fix advanced-settings styling / margin

* fix merge + hide advanced streak settings when none enabled

* fix styles

* set Roboto font for advanced settings

* Add Challenge flag to the tag list

* add tag with enter, when no other tag is found

* fix styles + tag cancel button

* refactor footer / margin

* split repeat fields into option mt-3 groups

* button all the things

* fix(tasks): style updates
* no hover state for non-editable tasks on team board
* keep assign/claim footer on task after requesting approval
* disable more fields on user copy of team task, and remove hover states 
for them

* fix(tasks): functional revisions
* "Claim Rewards" instead of "x" in task approved notif
* Remove default transition supplied by Bootstrap, apply individually to 
some elements
* Delete individual tasks and related notifications when master task 
deleted from team board
* Manager notes now save when supplied at task initial creation
* Can no longer dismiss rewards from approved task by hitting Dismiss 
All

* fix(tasks): clean tasksOrder
also adjust related test expectation

* fix(tests): adjust integration expectations

* fix(test): ratzen fratzen only

* fix(teams): checklist, notes

* fix(teams): improve disabled states

* fix(teams): more style fixage

* BREAKING(teams): return 202 instead of 401 for approval request

* fix(teams): better taskboard sync
also re-re-fix checklist borders

* fix(tests): update expectations for breaking change

* refactor(task-modal): lockable label component

* refactor(teams): move task scoring to mixin

* fix(teams): style corrections

* fix(tasks): spacing and wording corrections

* fix(teams): don't bork manager notes

* fix(teams): assignment fix and more approval flow revisions

* WIP(teams): use tag dropdown control for assignment

* refactor(tasks): better spacing, generic multi select

* fix(tasks): various visual and behavior updates

* fix(tasks): incidental style tweaks

* fix(teams): standardize approval request response

* refactor(teams): correct test, use res.respond message param

* fix(storybook): renamed component

* fix(teams): age approval-required To Do's
Fixes #8730

* fix(teams): sync personal data as well as team on mixin sync

* fix(teams): hide unclaim button, not whole footer; fix switch focus

* fix(achievements): unrevert width fix

Co-authored-by: Sabe Jones <sabrecat@gmail.com>

website/client/src/components/userMenu/profile.vue

@@ -9,12 +9,7 @@
     class="profile"
   >
     <div class="header">
-      <span
-        class="close-icon svg-icon inline icon-10"
-        @click="close()"
-        v-html="icons.close"
-      ></span>
-      <div class="profile-actions">
+      <div class="profile-actions d-flex">
         <router-link
           :to="{ path: '/private-messages', query: { uuid: user._id } }"
           replace
@@ -23,9 +18,9 @@
             v-b-tooltip.hover.left="$t('sendMessage')"
             class="btn btn-secondary message-icon"
           >
-            <div
-              class="svg-icon message-icon"
-              v-html="icons.message"
+            <div class="svg-icon message-icon"
+                 v-html="icons.message"
+                 v-once
             ></div>
           </button>
         </router-link>
@@ -42,7 +37,7 @@
         <button
           v-if="user._id !== userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1"
           v-b-tooltip.hover.right="$t('blockWarning')"
-          class="btn btn-secondary block-icon"
+          class="btn btn-secondary block-icon d-flex justify-content-center align-items-center"
           @click="blockUser()"
         >
           <div
@@ -65,7 +60,7 @@
         <button
           v-if="userLoggedIn.contributor.admin"
           v-b-tooltip.hover.right="'Admin - Toggle Tools'"
-          class="btn btn-secondary positive-icon"
+          class="btn btn-secondary positive-icon d-flex justify-content-center align-items-center"
           @click="toggleAdminTools()"
         >
           <div
@@ -292,13 +287,13 @@
         </div>
         <div class="col-12 text-center">
           <button
-            class="btn btn-primary"
+            class="btn btn-primary mr-2"
             @click="save()"
           >
             {{ $t("save") }}
           </button>
           <button
-            class="btn btn-warning"
+            class="btn btn-secondary"
             @click="editing = false"
           >
             {{ $t("cancel") }}
@@ -329,7 +324,7 @@
             >
               <div
                 :id="achievKey + '-achievement'"
-                class="box achievement-container d-flex align-items-center justify-content-center"
+                class="box achievement-container"
                 :class="{'achievement-unearned': !achievement.earned}"
               >
                 <b-popover
@@ -437,6 +432,10 @@
       }
     }
 
+    .standard-page {
+      padding-bottom: 0rem;
+    }
+
     .modal-content {
       background: #f9f9f9;
     }
@@ -570,8 +569,8 @@
 
     .achievement-wrapper {
       width: 94px;
-      min-width: 94px !important;
       max-width: 94px;
+      min-width: 94px;
       margin-right: 12px;
       margin-left: 12px;
       padding: 0px;
@@ -580,6 +579,7 @@
     .box {
       margin: 0 auto;
       margin-bottom: 1em;
+      padding-top: 1.2em;
       background: $white;
     }
 
@@ -730,7 +730,6 @@ import lock from '@/assets/svg/lock.svg';
 import challenge from '@/assets/svg/challenge.svg';
 import member from '@/assets/svg/member-icon.svg';
 import staff from '@/assets/svg/tier-staff.svg';
-import svgClose from '@/assets/svg/close.svg';
 import error404 from '../404';
 // @TODO: EMAILS.COMMUNITY_MANAGER_EMAIL
 const COMMUNITY_MANAGER_EMAIL = 'admin@habitica.com';
@@ -758,7 +757,6 @@ export default {
         lock,
         member,
         staff,
-        close: svgClose,
       }),
       adminToolsLoaded: false,
       userIdToMessage: '',
@@ -1022,9 +1020,6 @@ export default {
       const status = this.achievementsCategories[categoryKey].open;
       this.achievementsCategories[categoryKey].open = !status;
     },
-    close () {
-      this.$root.$emit('bv::hide::modal', 'profile');
-    },
   },
 };
 </script>