New client many fixes (#8981)

* Footer style fixes

* Limited string display

* Fixed background reload

* Began adding more avatar items

* Fixed challenge updated cats and official to be seen by admins

* Fixed min prize

* Fixed required fields

* Added my challenges and find challenges to menu

* Removed nav to party page when have no party

* Updated user and notifications icon

* Added accept, reject and messages

* Added selfcare

* Underline links

* Added forgot password

* Fixed task adding

* Disabled habit options that should be

* Added markdown to tags

* Added confirm to delete

* Fixed cancel/delete style

* Fixed rounding

* Added gold icon

* Fixed task icon styles

* Fixed margin botton

* Fixed some repeat styles

* Fixed custom reward style

* Hide like count 0

* Added new tavern images

* Redirect to party page after create

* Hid leader options from non leaders

* Removed manager options from non group plan

* Fixed some nav styles

* Fixed overlay color

* Prevented edit data from being transfered to create

* Added hover state for spells

* Add performance fixes for chat avatars

* Fixed merge conflicts

* Updated fron navigation

* Fixed reg gryphon logo

* Began adding gem modal functionality

* Added purchase gems with gold

* Fixed restore

* Replaced description with summary

* Spells that target tasks fix

* Added initial challenge task load

* Fixed lint issue

website/client/components/tasks/spells.vue

@@ -49,6 +49,10 @@ div(v-if='user.stats.lvl > 10')
     white-space: initial;
   }
 
+  .spell:hover {
+    cursor: pointer;
+  }
+
   .spell {
     background: #ffffff;
     margin-bottom: 1em;
@@ -244,16 +248,16 @@ export default {
           return;
         }
 
-        // @TODO: do we need to fetcht the party everytime? We should probably just check store
-        let party = await this.$store.dispatch('guilds:getGroup', {groupId: 'party'});
+        let party = this.$store.state.party.members;
         party = isArray(party) ? party : [];
         party = party.concat(this.user);
-        this.$store.state.party.data = party;
         this.castEnd(party, 'party');
       } else if (spell.target === 'tasks') {
-        let tasks = this.$store.state.tasks.habits.concat(this.user.dailys)
-          .concat(this.$store.state.tasks.rewards)
-          .concat(this.$store.state.tasks.todos);
+        let userTasks = this.$store.state.tasks.data;
+        let tasks = userTasks.habits
+          .concat(userTasks.dailys)
+          .concat(userTasks.rewards)
+          .concat(userTasks.todos);
         // exclude challenge tasks
         tasks = tasks.filter((task) => {
           if (!task.challenge) return true;

website/client/components/tasks/task.vue

@@ -49,7 +49,7 @@
 
     // Habits right side control
     .right-control.d-flex.align-items-center.justify-content-center(v-if="task.type === 'habit'", :class="controlClass.down")
-      .task-control.habit-control(:class="controlClass.down + '-control-habit'", @click="isUser ? score('down') : null")
+      .task-control.habit-control(:class="controlClass.down + '-control-habit'", @click="(isUser && controlClass.down !== 'task-habit-disabled') ? score('down') : null")
         .svg-icon.negative(v-html="icons.negative")
     // Rewards right side control
     .right-control.d-flex.align-items-center.justify-content-center.reward-control(v-if="task.type === 'reward'", :class="controlClass", @click="isUser ? score('down') : null")
@@ -62,7 +62,7 @@
   @import '~client/assets/scss/colors.scss';
 
   .task {
-    margin-bottom: 8px;
+    margin-bottom: 2px;
     box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
     background: transparent;
     border-radius: 2px;
@@ -78,6 +78,10 @@
     }
   }
 
+  .task-habit-disabled-control-habit:hover {
+    cursor: initial;
+  }
+
   .task-title {
     padding-bottom: 8px;
     color: $gray-10;
@@ -247,6 +251,7 @@
     .small-text {
       margin-top: 4px;
       color: $yellow-10;
+      font-style: initial;
     }
   }
 </style>
@@ -276,6 +281,11 @@
     color: $gray-300;
     white-space: nowrap;
   }
+
+  .task-reward {
+    // @TODO: I'm unsure of where this is defined. Can't find it in search. So, I am using important for now
+    background-color: rgba(255, 217, 160, 0.28) !important;
+  }
 </style>
 
 <script>

website/client/components/tasks/taskModal.vue

@@ -11,10 +11,14 @@
         slot="modal-header",
         :class="[cssClass]",
       )
-        h1 {{ title }}
+        .row
+          h1.col-8 {{ title }}
+          .col-4
+            span.cancel-task-btn(v-once, @click="cancel()") {{ $t('cancel') }}
+            button.btn.btn-secondary(type="submit", v-once) {{ $t('save') }}
         .form-group
           label(v-once) {{ `${$t('title')}*` }}
-          input.form-control(type='text', :class="[`${cssClass}-modal-input`]", required, v-model="task.text")
+          input.form-control.title-input(type='text', :class="[`${cssClass}-modal-input`]", required, v-model="task.text", autofocus)
         .form-group
           label(v-once) {{ $t('notes') }}
           textarea.form-control(:class="[`${cssClass}-modal-input`]", v-model="task.notes", rows="3")
@@ -22,6 +26,7 @@
         .option(v-if="task.type === 'reward'")
           label(v-once) {{ $t('cost') }}
           input(type="number", v-model="task.value", required, min="0")
+          .svg-icon.gold(v-html="icons.gold")
         .option(v-if="['daily', 'todo'].indexOf(task.type) > -1")
           label(v-once) {{ $t('checklist') }}
           br
@@ -69,14 +74,16 @@
           label(v-once) {{ $t('startDate') }}
           datepicker(v-model="task.startDate")
         .option(v-if="task.type === 'daily'")
-          label(v-once) {{ $t('repeats') }}
-          b-dropdown(:text="$t(task.frequency)")
-            b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
-              | {{ $t(frequency) }}
-          label(v-once) {{ $t('repeatEvery') }}
-          input.form-control(type="number", v-model="task.everyX", min="0", required)
-          | {{ repeatSuffix }}
-          br
+          .form-group
+            label(v-once) {{ $t('repeats') }}
+            b-dropdown(:text="$t(task.frequency)")
+              b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
+                | {{ $t(frequency) }}
+          .form-group
+            label(v-once) {{ $t('repeatEvery') }}
+            input(type="number", v-model="task.everyX", min="0", required)
+            | {{ repeatSuffix }}
+            br
           template(v-if="task.frequency === 'weekly'")
             .form-check-inline.weekday-check(
               v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']",
@@ -141,7 +148,6 @@
             @change="updateRequiresApproval")
 
       .task-modal-footer(slot="modal-footer")
-        button.btn.btn-primary(type="submit", v-once) {{ $t('save') }}
         span.cancel-task-btn(v-once, v-if="purpose === 'create'", @click="cancel()") {{ $t('cancel') }}
         span.delete-task-btn(v-once, v-else, @click="destroy()") {{ $t('delete') }}
 </template>
@@ -311,6 +317,10 @@
       }
     }
 
+    .cancel-task-btn {
+      margin-right: .5em;
+    }
+
     .task-modal-footer {
       margin: 0 auto;
       padding-bottom: 24px;
@@ -319,7 +329,6 @@
       margin-top: 50px;
 
       .delete-task-btn, .cancel-task-btn {
-        margin-left: 16px;
         cursor: pointer;
 
         &:hover, &:focus, &:active {
@@ -343,6 +352,14 @@
   }
 </style>
 
+<style lang="scss" scoped>
+  .gold {
+    width: 24px;
+    margin-left: 5em;
+    margin-top: -2.4em;
+  }
+</style>
+
 <script>
 import bModal from 'bootstrap-vue/lib/components/modal';
 import { mapGetters, mapActions, mapState } from 'client/libs/store';
@@ -361,6 +378,7 @@ import difficultyNormalIcon from 'assets/svg/difficulty-normal.svg';
 import positiveIcon from 'assets/svg/positive.svg';
 import negativeIcon from 'assets/svg/negative.svg';
 import deleteIcon from 'assets/svg/delete.svg';
+import goldIcon from 'assets/svg/gold.svg';
 
 export default {
   components: {
@@ -385,6 +403,7 @@ export default {
         negative: negativeIcon,
         positive: positiveIcon,
         destroy: deleteIcon,
+        gold: goldIcon,
       }),
       requiresApproval: false, // We can't set task.group fields so we use this field to toggle
       members: [],
@@ -527,6 +546,7 @@ export default {
       this.$root.$emit('hide::modal', 'task-modal');
     },
     destroy () {
+      if (!confirm('Are you sure you want to delete this task?')) return;
       this.destroyTask(this.task);
       this.$root.$emit('hide::modal', 'task-modal');
     },

website/client/components/tasks/user.vue

@@ -35,7 +35,7 @@
                           @change="toggleTag(tag)",
                         )
                         span.custom-control-indicator
-                        span.custom-control-description {{ tag.name }}
+                        span.custom-control-description(v-markdown='tag.name')
 
             .filter-panel-footer.clearfix
               template(v-if="editingTags === true")
@@ -117,9 +117,9 @@
 </template>
 
 <style lang="scss">
-#create-dropdown .dropdown-toggle::after {
-  display: none;
-}
+  #create-dropdown .dropdown-toggle::after {
+    display: none;
+  }
 </style>
 
 <style lang="scss" scoped>
@@ -142,7 +142,16 @@
   }
 
   .dropdown-icon-item .svg-icon {
-    width: 16px;
+    width: 22px;
+    color: #C3C0C7;
+  }
+
+  .dropdown-icon-item:hover .svg-icon, .dropdown-item.active .svg-icon {
+    color: $purple-500;
+  }
+
+  .dropdown-icon-item .text {
+    font-weight: bold;
   }
 
   button.btn.btn-secondary.filter-button {
@@ -278,6 +287,7 @@
 import TaskColumn from './column';
 import TaskModal from './taskModal';
 import spells from './spells';
+import markdown from 'client/directives/markdown';
 
 import positiveIcon from 'assets/svg/positive.svg';
 import filterIcon from 'assets/svg/filter.svg';
@@ -315,6 +325,9 @@ export default {
     spells,
     SelectMembersModal,
   },
+  directives: {
+    markdown,
+  },
   data () {
     return {
       columns: ['habit', 'daily', 'todo', 'reward'],