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/tasks/modal-controls/selectDifficulty.vue

@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <select-list :items="items"
+                 :key-prop="'icon'"
+                 class="difficulty-select"
+                 :class="{disabled: disabled}"
+                 :disabled="disabled"
+                 :value="selected"
+                 @select="$emit('select', $event.value)">
+      <template v-slot:item="{ item, button }">
+        <div v-if="item" class="difficulty-item" :class="{ 'isButton': button }">
+          <span class="label">{{ item.label }}</span>
+
+          <div class="svg-icon" >
+            <span v-for="n in item.stars"
+                  v-html="icons.difficultyTrivial"
+            :key="n">
+
+            </span>
+          </div>
+        </div>
+      </template>
+    </select-list>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .difficulty-item {
+    display: flex;
+    align-items: center;
+
+    div.svg-icon {
+      ::v-deep svg {
+        fill: $gray-200;
+      }
+    }
+
+    &:hover, &.isButton {
+      div.svg-icon {
+        ::v-deep svg {
+          fill: var(--svg-color);
+        }
+      }
+    }
+  }
+
+  .label {
+    flex: 1;
+  }
+
+  div.svg-icon {
+    flex-grow: 0;
+    width: 80px;
+    display: flex;
+    justify-content: flex-end;
+    margin-left: 0.375rem;
+
+    span {
+      display: inline;
+    }
+
+    ::v-deep svg {
+      margin-left: 0.125rem;
+      width: 0.625rem;
+      height: 0.625rem;
+      object-fit: contain;
+
+      fill: $gray-200;
+    }
+  }
+</style>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .difficulty-select {
+
+    &.disabled {
+      .btn-secondary:disabled, .btn-secondary.disabled, .dropdown >
+      .btn-secondary.dropdown-toggle:not(.btn-success):disabled, .dropdown >
+      .btn-secondary.dropdown-toggle:not(.btn-success).disabled, .show >
+      .btn-secondary.dropdown-toggle:not(.btn-success):disabled, .show >
+      .btn-secondary.dropdown-toggle:not(.btn-success).disabled {
+        background: $gray-700;
+      }
+    }
+    // restyle the selected item
+    .dropdown-toggle {
+
+      &.disabled {
+        box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+
+        &::after {
+          color: $gray-300;
+          border-top-color: $gray-300;
+        }
+
+        .label {
+          color: $gray-200;
+        }
+      }
+
+      .label {
+        flex: 0;
+      }
+
+      div.svg-icon {
+        justify-content: flex-start;
+      }
+    }
+
+    // highlight the svg icons,
+    // when focusing with keyboard (it is outside of the template item
+    .dropdown-item:focus .difficulty-item {
+      div.svg-icon {
+        svg {
+          fill: var(--svg-color);
+        }
+      }
+    }
+  }
+</style>
+
+<script>
+import difficultyNormalIcon from '@/assets/svg/difficulty-normal.svg';
+import difficultyTrivialIcon from '@/assets/svg/difficulty-trivial.svg';
+import difficultyMediumIcon from '@/assets/svg/difficulty-medium.svg';
+import difficultyHardIcon from '@/assets/svg/difficulty-hard.svg';
+import selectList from '@/components/ui/selectList';
+
+
+export default {
+  components: {
+    selectList,
+  },
+  data () {
+    const items = [
+      {
+        value: 0.1,
+        label: this.$t('trivial'),
+        stars: 1,
+      },
+      {
+        value: 1,
+        label: this.$t('easy'),
+        stars: 2,
+      },
+      {
+        value: 1.5,
+        label: this.$t('medium'),
+        stars: 3,
+      },
+      {
+        value: 2,
+        label: this.$t('hard'),
+        stars: 4,
+      },
+    ];
+
+    return {
+      items,
+      icons: Object.freeze({
+        difficultyNormal: difficultyNormalIcon,
+        difficultyTrivial: difficultyTrivialIcon,
+        difficultyMedium: difficultyMediumIcon,
+        difficultyHard: difficultyHardIcon,
+      }),
+      selected: items.find(i => i.value === this.value),
+    };
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+    },
+    value: {
+      type: Number,
+    },
+  },
+};
+</script>