From bf1ea907206b34e8006ceee14a8a61ba7f660f4d Mon Sep 17 00:00:00 2001
From: Hafiz <hafizbhamidi@gmail.com>
Date: Thu, 6 Nov 2025 13:06:31 -0600
Subject: [PATCH] lint

---
 .../src/components/header/banners/privacy.vue |    4 +-
 .../client/src/components/shops/buyModal.vue  |  412 +++---
 .../components/shops/purchaseConfirmModal.vue |  130 +-
 .../components/shops/quests/buyQuestModal.vue |  200 +--
 .../client/src/components/static/privacy.vue  |   12 +-
 .../src/components/static/staticWrapper.vue   |    7 +-
 .../client/src/components/static/terms.vue    |    2 +-
 .../src/components/tasks/brokenTaskModal.vue  |  110 +-
 .../client/src/components/tasks/column.vue    |    2 +-
 .../tasks/deleteTaskConfirmModal.vue          |  130 +-
 website/client/src/components/tasks/task.vue  |  758 +++++------
 .../client/src/components/tasks/taskModal.vue | 1150 ++++++++---------
 .../client/src/components/ui/toggleSwitch.vue |    2 +-
 .../siteDataRows/privacyPreferencesRow.vue    |   16 +-
 14 files changed, 1471 insertions(+), 1464 deletions(-)

diff --git a/website/client/src/components/header/banners/privacy.vue b/website/client/src/components/header/banners/privacy.vue
index 2e1faf0ac4..6a08194bdc 100644
--- a/website/client/src/components/header/banners/privacy.vue
+++ b/website/client/src/components/header/banners/privacy.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    class="banner d-flex align-items-center justify-content-between py-3 px-4"
-    id="privacy-banner"
     v-if="!hidden"
+    id="privacy-banner"
+    class="banner d-flex align-items-center justify-content-between py-3 px-4"
   >
     <p
       class="mr-3 mb-0"
diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index ce518694c7..3f4e425070 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -5,228 +5,228 @@
       :hide-header="true"
       @change="onChange($event)"
     >
-    <span
-      v-if="withPin"
-      class="badge-dialog"
-      tabindex="0"
-      @click.prevent.stop="togglePinned()"
-      @keypress.enter.prevent.stop="togglePinned()"
-    >
-      <pin-badge
-        :pinned="isPinned"
-      />
-    </span>
-    <div>
       <span
-        class="svg-icon close-icon icon-16 color"
-        aria-hidden="true"
+        v-if="withPin"
+        class="badge-dialog"
         tabindex="0"
-        @click="hideDialog()"
-        @keypress.enter="hideDialog()"
-        v-html="icons.close"
-      ></span>
-    </div>
-    <div
-      v-if="item != null"
-      class="content"
-    >
-      <div class="inner-content">
-        <slot
-          name="item"
-          :item="item"
-        >
-          <div v-if="showAvatar">
-            <avatar
-              :show-visual-buffs="false"
-              :member="user"
-              :avatar-only="true"
-              :hide-class-badge="true"
-              :with-background="true"
-              :override-avatar-gear="getAvatarOverrides(item)"
-              :sprites-margin="'0px auto 0px -24px'"
+        @click.prevent.stop="togglePinned()"
+        @keypress.enter.prevent.stop="togglePinned()"
+      >
+        <pin-badge
+          :pinned="isPinned"
+        />
+      </span>
+      <div>
+        <span
+          class="svg-icon close-icon icon-16 color"
+          aria-hidden="true"
+          tabindex="0"
+          @click="hideDialog()"
+          @keypress.enter="hideDialog()"
+          v-html="icons.close"
+        ></span>
+      </div>
+      <div
+        v-if="item != null"
+        class="content"
+      >
+        <div class="inner-content">
+          <slot
+            name="item"
+            :item="item"
+          >
+            <div v-if="showAvatar">
+              <avatar
+                :show-visual-buffs="false"
+                :member="user"
+                :avatar-only="true"
+                :hide-class-badge="true"
+                :with-background="true"
+                :override-avatar-gear="getAvatarOverrides(item)"
+                :sprites-margin="'0px auto 0px -24px'"
+              />
+            </div>
+            <item
+              v-else-if="item.key === 'gem'"
+              class="flat bordered-item"
+              :item="item"
+              :item-content-class="item.class"
+              :show-popover="false"
             />
+            <item
+              v-else-if="item.key != 'gem'"
+              class="flat bordered-item"
+              :item="item"
+              :item-content-class="item.class"
+              :show-popover="false"
+            />
+          </slot>
+          <div
+            v-if="!showAvatar && user.items[item.purchaseType]"
+            class="owned"
+            :class="totalOwned"
+          >
+            <!-- eslint-disable-next-line max-len -->
+            <span class="owned-text">{{ $t('owned') }}: <span class="user-amount">{{ totalOwned }}</span></span>
           </div>
-          <item
-            v-else-if="item.key === 'gem'"
-            class="flat bordered-item"
+          <h4 class="title">
+            {{ itemText }}
+          </h4>
+          <div class="item-notes">
+            {{ itemNotes }}
+          </div>
+          <slot
+            name="additionalInfo"
             :item="item"
-            :item-content-class="item.class"
-            :show-popover="false"
-          />
-          <item
-            v-else-if="item.key != 'gem'"
-            class="flat bordered-item"
-            :item="item"
-            :item-content-class="item.class"
-            :show-popover="false"
-          />
-        </slot>
-        <div
-          v-if="!showAvatar && user.items[item.purchaseType]"
-          class="owned"
-          :class="totalOwned"
-        >
-          <!-- eslint-disable-next-line max-len -->
-          <span class="owned-text">{{ $t('owned') }}: <span class="user-amount">{{ totalOwned }}</span></span>
-        </div>
-        <h4 class="title">
-          {{ itemText }}
-        </h4>
-        <div class="item-notes">
-          {{ itemNotes }}
-        </div>
-        <slot
-          name="additionalInfo"
-          :item="item"
-        >
-          <equipmentAttributesGrid
-            v-if="showAttributesGrid"
-            class="attributesGrid"
-            :item="item"
-            :user="user"
-          />
-        </slot>
-        <div
-          v-if="item.value > 0 && !(item.key === 'gem' && gemsLeft < 1)"
-          class="purchase-amount"
-        >
-          <div class="item-cost justify-content-center my-3">
-            <span
-              class="cost d-flex mx-auto"
-              :class="getPriceClass()"
-            >
+          >
+            <equipmentAttributesGrid
+              v-if="showAttributesGrid"
+              class="attributesGrid"
+              :item="item"
+              :user="user"
+            />
+          </slot>
+          <div
+            v-if="item.value > 0 && !(item.key === 'gem' && gemsLeft < 1)"
+            class="purchase-amount"
+          >
+            <div class="item-cost justify-content-center my-3">
               <span
-                class="svg-icon icon-24 my-auto mr-1"
-                aria-hidden="true"
-                v-html="icons[getPriceClass()]"
+                class="cost d-flex mx-auto"
+                :class="getPriceClass()"
               >
+                <span
+                  class="svg-icon icon-24 my-auto mr-1"
+                  aria-hidden="true"
+                  v-html="icons[getPriceClass()]"
+                >
+                </span>
+                <span
+                  class="my-auto"
+                  :class="getPriceClass()"
+                >{{ item.value }}</span>
               </span>
-              <span
-                class="my-auto"
-                :class="getPriceClass()"
-              >{{ item.value }}</span>
-            </span>
-          </div>
+            </div>
 
-          <div
-            v-if="showAmountToBuy(item)"
-            class="how-many-to-buy"
-          >
-            {{ $t('howManyToBuy') }}
-          </div>
-          <div
-            v-if="showAmountToBuy(item)"
-          >
-            <number-increment
-              class="number-increment"
-              @updateQuantity="selectedAmountToBuy = $event"
-            />
             <div
-              :class="{'notEnough': notEnoughCurrency}"
-              class="total"
+              v-if="showAmountToBuy(item)"
+              class="how-many-to-buy"
             >
-              <span class="total-text">{{ $t('sendTotal') }}</span>
-              <span
-                class="svg-icon total icon-24"
-                aria-hidden="true"
-                v-html="icons[getPriceClass()]"
-              ></span>
-              <span
-                class="total-text"
-                :class="getPriceClass()"
-              >{{ item.value * selectedAmountToBuy }}</span>
+              {{ $t('howManyToBuy') }}
+            </div>
+            <div
+              v-if="showAmountToBuy(item)"
+            >
+              <number-increment
+                class="number-increment"
+                @updateQuantity="selectedAmountToBuy = $event"
+              />
+              <div
+                :class="{'notEnough': notEnoughCurrency}"
+                class="total"
+              >
+                <span class="total-text">{{ $t('sendTotal') }}</span>
+                <span
+                  class="svg-icon total icon-24"
+                  aria-hidden="true"
+                  v-html="icons[getPriceClass()]"
+                ></span>
+                <span
+                  class="total-text"
+                  :class="getPriceClass()"
+                >{{ item.value * selectedAmountToBuy }}</span>
+              </div>
             </div>
           </div>
+          <div
+            v-if="item.key === 'gem' && gemsLeft < 1"
+            class="no-more-gems"
+          >
+            {{ $t('notEnoughGemsToBuy') }}
+          </div>
+          <div
+            v-if="nonSubscriberHourglasses"
+            class="hourglass-nonsub mt-3"
+          >
+            {{ $t('mysticHourglassNeededNoSub') }}
+          </div>
+          <button
+            v-if="getPriceClass() === 'gems'
+              && !enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)"
+            class="btn btn-primary mb-3"
+            @click="purchaseGems()"
+          >
+            {{ $t('purchaseGems') }}
+          </button>
+          <button
+            v-else-if="nonSubscriberHourglasses"
+            class="btn btn-primary"
+            @click="viewSubscriptions(item)"
+          >
+            {{ $t('viewSubscriptions') }}
+          </button>
+          <button
+            v-else-if="!(item.key === 'gem' && gemsLeft < 1)"
+            class="btn btn-primary"
+            :disabled="item.key === 'gem' && gemsLeft === 0 ||
+              attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid || item.locked ||
+              !preventHealthPotion ||
+              !enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)"
+            :class="{'notEnough': !preventHealthPotion ||
+              !enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)}"
+            tabindex="0"
+            @click="buyItem()"
+          >
+            {{ $t('buyNow') }}
+          </button>
         </div>
-        <div
-          v-if="item.key === 'gem' && gemsLeft < 1"
-          class="no-more-gems"
-        >
-          {{ $t('notEnoughGemsToBuy') }}
-        </div>
-        <div
-          v-if="nonSubscriberHourglasses"
-          class="hourglass-nonsub mt-3"
-        >
-          {{ $t('mysticHourglassNeededNoSub') }}
-        </div>
-        <button
-          v-if="getPriceClass() === 'gems'
-            && !enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)"
-          class="btn btn-primary mb-3"
-          @click="purchaseGems()"
-        >
-          {{ $t('purchaseGems') }}
-        </button>
-        <button
-          v-else-if="nonSubscriberHourglasses"
-          class="btn btn-primary"
-          @click="viewSubscriptions(item)"
-        >
-          {{ $t('viewSubscriptions') }}
-        </button>
-        <button
-          v-else-if="!(item.key === 'gem' && gemsLeft < 1)"
-          class="btn btn-primary"
-          :disabled="item.key === 'gem' && gemsLeft === 0 ||
-            attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid || item.locked ||
-            !preventHealthPotion ||
-            !enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)"
-          :class="{'notEnough': !preventHealthPotion ||
-            !enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)}"
-          tabindex="0"
-          @click="buyItem()"
-        >
-          {{ $t('buyNow') }}
-        </button>
       </div>
-    </div>
-    <countdown-banner
-      v-if="item.end && item.owned == null"
-      :end-date="endDate"
-      class="limitedTime available"
-    />
-    <div
-      v-if="item.key === 'rebirth_orb' && item.value > 0 && user.stats.lvl >= 100"
-      class="free-rebirth d-flex align-items-center"
-    >
-      <div class="m-auto">
-        <span
-          class="svg-icon inline icon-16 mr-2 pt-015"
-          v-html="icons.whiteClock"
-        ></span>
-        <span v-html="$t('nextFreeRebirth', {days: nextFreeRebirth})"></span>
-      </div>
-    </div>
-    <div
-      v-if="item.key === 'gem'"
-      class="d-flex justify-content-center align-items-center"
-    >
-      <div
-        v-if="gemsLeft > 0"
-        class="gems-left d-flex justify-content-center align-items-center"
-      >
-        <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
-        {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
-      </div>
-      <div
-        v-if="gemsLeft === 0"
-        class="out-of-gems-banner d-flex justify-content-center align-items-center"
-      >
-        <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
-        {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
-      </div>
-    </div>
-    <div
-      slot="modal-footer"
-    >
-      <span class="user-balance ml-3 my-auto">{{ $t('yourBalance') }}</span>
-      <balanceInfo
-        class="mr-3"
-        :currency-needed="getPriceClass()"
-        :amount-needed="item.value"
+      <countdown-banner
+        v-if="item.end && item.owned == null"
+        :end-date="endDate"
+        class="limitedTime available"
       />
-    </div>
+      <div
+        v-if="item.key === 'rebirth_orb' && item.value > 0 && user.stats.lvl >= 100"
+        class="free-rebirth d-flex align-items-center"
+      >
+        <div class="m-auto">
+          <span
+            class="svg-icon inline icon-16 mr-2 pt-015"
+            v-html="icons.whiteClock"
+          ></span>
+          <span v-html="$t('nextFreeRebirth', {days: nextFreeRebirth})"></span>
+        </div>
+      </div>
+      <div
+        v-if="item.key === 'gem'"
+        class="d-flex justify-content-center align-items-center"
+      >
+        <div
+          v-if="gemsLeft > 0"
+          class="gems-left d-flex justify-content-center align-items-center"
+        >
+          <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
+          {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
+        </div>
+        <div
+          v-if="gemsLeft === 0"
+          class="out-of-gems-banner d-flex justify-content-center align-items-center"
+        >
+          <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
+          {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
+        </div>
+      </div>
+      <div
+        slot="modal-footer"
+      >
+        <span class="user-balance ml-3 my-auto">{{ $t('yourBalance') }}</span>
+        <balanceInfo
+          class="mr-3"
+          :currency-needed="getPriceClass()"
+          :amount-needed="item.value"
+        />
+      </div>
     </b-modal>
     <purchaseConfirmModal />
   </div>
diff --git a/website/client/src/components/shops/purchaseConfirmModal.vue b/website/client/src/components/shops/purchaseConfirmModal.vue
index 8e19966534..c6de398d57 100644
--- a/website/client/src/components/shops/purchaseConfirmModal.vue
+++ b/website/client/src/components/shops/purchaseConfirmModal.vue
@@ -1,65 +1,65 @@
-<template>
-  <b-modal
-    id="purchase-confirm-modal"
-    size="md"
-    :hide-footer="true"
-  >
-    <div class="text-center">
-      <h2 class="col-12">
-        {{ confirmationMessage }}
-      </h2>
-    </div>
-    <div class="modal-footer d-flex justify-content-between">
-      <button
-        class="btn btn-primary"
-        @click="confirm()"
-      >
-        {{ $t('confirm') }}
-      </button>
-      <button
-        class="btn btn-secondary"
-        @click="cancel()"
-      >
-        {{ $t('cancel') }}
-      </button>
-    </div>
-  </b-modal>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      confirmationMessage: '',
-      resolveCallback: null,
-    };
-  },
-  mounted () {
-    this.$root.$on('habitica:purchase-confirm', config => {
-      this.confirmationMessage = config.message;
-      this.resolveCallback = config.resolve;
-      this.$root.$emit('bv::show::modal', 'purchase-confirm-modal');
-    });
-  },
-  beforeDestroy () {
-    this.$root.$off('habitica:purchase-confirm');
-  },
-  methods: {
-    confirm () {
-      if (this.resolveCallback) {
-        this.resolveCallback(true);
-      }
-      this.close();
-    },
-    cancel () {
-      if (this.resolveCallback) {
-        this.resolveCallback(false);
-      }
-      this.close();
-    },
-    close () {
-      this.$root.$emit('bv::hide::modal', 'purchase-confirm-modal');
-    },
-  },
-};
-</script>
+<template>
+  <b-modal
+    id="purchase-confirm-modal"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="text-center">
+      <h2 class="col-12">
+        {{ confirmationMessage }}
+      </h2>
+    </div>
+    <div class="modal-footer d-flex justify-content-between">
+      <button
+        class="btn btn-primary"
+        @click="confirm()"
+      >
+        {{ $t('confirm') }}
+      </button>
+      <button
+        class="btn btn-secondary"
+        @click="cancel()"
+      >
+        {{ $t('cancel') }}
+      </button>
+    </div>
+  </b-modal>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      confirmationMessage: '',
+      resolveCallback: null,
+    };
+  },
+  mounted () {
+    this.$root.$on('habitica:purchase-confirm', config => {
+      this.confirmationMessage = config.message;
+      this.resolveCallback = config.resolve;
+      this.$root.$emit('bv::show::modal', 'purchase-confirm-modal');
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('habitica:purchase-confirm');
+  },
+  methods: {
+    confirm () {
+      if (this.resolveCallback) {
+        this.resolveCallback(true);
+      }
+      this.close();
+    },
+    cancel () {
+      if (this.resolveCallback) {
+        this.resolveCallback(false);
+      }
+      this.close();
+    },
+    close () {
+      this.$root.$emit('bv::hide::modal', 'purchase-confirm-modal');
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/shops/quests/buyQuestModal.vue b/website/client/src/components/shops/quests/buyQuestModal.vue
index 003b504ac9..b096d13c69 100644
--- a/website/client/src/components/shops/quests/buyQuestModal.vue
+++ b/website/client/src/components/shops/quests/buyQuestModal.vue
@@ -5,116 +5,116 @@
       :hide-header="true"
       @change="onChange($event)"
     >
-    <span
-      v-if="withPin"
-      class="badge-dialog"
-      @click.prevent.stop="togglePinned()"
-    >
-      <pin-badge
-        :pinned="isPinned"
-      />
-    </span>
-    <div class="dialog-close">
-      <close-icon @click="hideDialog()" />
-    </div>
-    <h2 class="text-center textCondensed">
-      {{ $t('questDetails') }}
-    </h2>
-    <div
-      v-if="item != null"
-      class="content"
-    >
-      <div class="inner-content">
-        <questDialogContent
-          :item="item"
-          :abbreviated="true"
+      <span
+        v-if="withPin"
+        class="badge-dialog"
+        @click.prevent.stop="togglePinned()"
+      >
+        <pin-badge
+          :pinned="isPinned"
         />
-        <div
-          v-if="item.addlNotes"
-          class="mx-4 mb-3"
-        >
-          {{ item.addlNotes }}
-        </div>
-        <quest-rewards :quest="item" />
-        <div
-          v-if="!item.locked"
-          class="purchase-amount"
-        >
-          <div class="item-cost">
-            <span
-              class="cost"
-              :class="priceType"
-            >
+      </span>
+      <div class="dialog-close">
+        <close-icon @click="hideDialog()" />
+      </div>
+      <h2 class="text-center textCondensed">
+        {{ $t('questDetails') }}
+      </h2>
+      <div
+        v-if="item != null"
+        class="content"
+      >
+        <div class="inner-content">
+          <questDialogContent
+            :item="item"
+            :abbreviated="true"
+          />
+          <div
+            v-if="item.addlNotes"
+            class="mx-4 mb-3"
+          >
+            {{ item.addlNotes }}
+          </div>
+          <quest-rewards :quest="item" />
+          <div
+            v-if="!item.locked"
+            class="purchase-amount"
+          >
+            <div class="item-cost">
               <span
-                class="svg-icon inline icon-24"
-                aria-hidden="true"
-                v-html="icons[priceType]"
+                class="cost"
+                :class="priceType"
               >
+                <span
+                  class="svg-icon inline icon-24"
+                  aria-hidden="true"
+                  v-html="icons[priceType]"
+                >
+                </span>
+                <span
+                  :class="priceType"
+                >{{ item.value }}</span>
+              </span>
+            </div>
+            <div class="how-many-to-buy">
+              <strong>{{ $t('howManyToBuy') }}</strong>
+            </div>
+            <div>
+              <number-increment
+                @updateQuantity="selectedAmountToBuy = $event"
+              />
+            </div>
+            <div class="total-row">
+              <span class="total-text">
+                {{ $t('sendTotal') }}
               </span>
               <span
+                class="svg-icon inline icon-20"
+                aria-hidden="true"
+                v-html="currencyIcon"
+              ></span>
+              <span
+                class="total"
                 :class="priceType"
-              >{{ item.value }}</span>
-            </span>
-          </div>
-          <div class="how-many-to-buy">
-            <strong>{{ $t('howManyToBuy') }}</strong>
-          </div>
-          <div>
-            <number-increment
-              @updateQuantity="selectedAmountToBuy = $event"
-            />
-          </div>
-          <div class="total-row">
-            <span class="total-text">
-              {{ $t('sendTotal') }}
-            </span>
-            <span
-              class="svg-icon inline icon-20"
-              aria-hidden="true"
-              v-html="currencyIcon"
-            ></span>
-            <span
-              class="total"
-              :class="priceType"
-            >{{ item.value * selectedAmountToBuy }}</span>
+              >{{ item.value * selectedAmountToBuy }}</span>
+            </div>
           </div>
+          <button
+            v-if="priceType === 'gems'
+              && !enoughCurrency(priceType, item.value * selectedAmountToBuy)
+              && !item.locked"
+            class="btn btn-primary mb-3"
+            @click="purchaseGems()"
+          >
+            {{ $t('purchaseGems') }}
+          </button>
+          <button
+            v-else
+            class="btn btn-primary mb-4"
+            :class="{'notEnough': !enoughCurrency(priceType, item.value * selectedAmountToBuy)}"
+            :disabled="numberInvalid"
+            @click="buyItem()"
+          >
+            {{ $t('buyNow') }}
+          </button>
         </div>
-        <button
-          v-if="priceType === 'gems'
-            && !enoughCurrency(priceType, item.value * selectedAmountToBuy)
-            && !item.locked"
-          class="btn btn-primary mb-3"
-          @click="purchaseGems()"
-        >
-          {{ $t('purchaseGems') }}
-        </button>
-        <button
-          v-else
-          class="btn btn-primary mb-4"
-          :class="{'notEnough': !enoughCurrency(priceType, item.value * selectedAmountToBuy)}"
-          :disabled="numberInvalid"
-          @click="buyItem()"
-        >
-          {{ $t('buyNow') }}
-        </button>
       </div>
-    </div>
-    <countdown-banner
-      v-if="item.end"
-      :end-date="endDate"
-    />
-    <div
-      slot="modal-footer"
-      class="clearfix"
-    >
-      <span class="balance float-left">{{ $t('yourBalance') }}</span>
-      <balanceInfo
-        class="float-right"
-        :with-hourglass="priceType === 'hourglasses'"
-        :currency-needed="priceType"
-        :amount-needed="item.value"
+      <countdown-banner
+        v-if="item.end"
+        :end-date="endDate"
       />
-    </div>
+      <div
+        slot="modal-footer"
+        class="clearfix"
+      >
+        <span class="balance float-left">{{ $t('yourBalance') }}</span>
+        <balanceInfo
+          class="float-right"
+          :with-hourglass="priceType === 'hourglasses'"
+          :currency-needed="priceType"
+          :amount-needed="item.value"
+        />
+      </div>
     </b-modal>
     <purchaseConfirmModal />
   </div>
diff --git a/website/client/src/components/static/privacy.vue b/website/client/src/components/static/privacy.vue
index df56103d94..a576c5254a 100644
--- a/website/client/src/components/static/privacy.vue
+++ b/website/client/src/components/static/privacy.vue
@@ -64,9 +64,11 @@
       <li>sexual orientation; and</li>
       <li>information collected from a known child.</li>
     </ul>
-    <p><strong>
-      NOTE: Please do not provide us “sensitive personal information” or “sensitive personal data”, as those terms are defined under applicable privacy laws, unless we directly request that you do so. If you feel, after careful consideration, that it is necessary to provide us certain sensitive personal information or data, please provide us the minimum amount of such information or data that is necessary.
-    </strong></p>
+    <p>
+      <strong>
+        NOTE: Please do not provide us “sensitive personal information” or “sensitive personal data”, as those terms are defined under applicable privacy laws, unless we directly request that you do so. If you feel, after careful consideration, that it is necessary to provide us certain sensitive personal information or data, please provide us the minimum amount of such information or data that is necessary.
+      </strong>
+    </p>
     <h3 id="section_1_1">
       1.1 Information You Provide Directly
     </h3>
@@ -617,7 +619,7 @@
       7. General Audience Services
     </h2>
     <p>
-      The Service is intended for users 18 years or older; you are not permitted to access or use the Service if you are younger than 18. We do not knowingly collect personal information from children under the age of 18 through the Service. We encourage parents and legal guardians to monitor their children’s Internet usage and to help enforce our Privacy Policy by instructing their children to never provide personal information without their permission. If you have reason to believe that a child under the age of 18 has provided personal information to us, please contact us at <a href='mailto:privacy@habitica.com'>privacy@habitica.com</a>, and we will delete that information from our databases.
+      The Service is intended for users 18 years or older; you are not permitted to access or use the Service if you are younger than 18. We do not knowingly collect personal information from children under the age of 18 through the Service. We encourage parents and legal guardians to monitor their children’s Internet usage and to help enforce our Privacy Policy by instructing their children to never provide personal information without their permission. If you have reason to believe that a child under the age of 18 has provided personal information to us, please contact us at <a href="mailto:privacy@habitica.com">privacy@habitica.com</a>, and we will delete that information from our databases.
     </p>
 
     <h2 id="section_8">
@@ -708,7 +710,7 @@
 
     <p><strong><u>Nevada Residents</u></strong></p>
     <p>
-      Nevada residents may opt out of the sale of certain “covered information” collected by operators of websites or online services. We currently do not sell covered information, as “sale” is defined by such law, and do not have plans to do so. In accordance with Nevada law, you may submit to us a verified request instructing us not to sell your covered information by sending an email to <a href='mailto:privacy@habitica.com'>privacy@habitica.com</a>.
+      Nevada residents may opt out of the sale of certain “covered information” collected by operators of websites or online services. We currently do not sell covered information, as “sale” is defined by such law, and do not have plans to do so. In accordance with Nevada law, you may submit to us a verified request instructing us not to sell your covered information by sending an email to <a href="mailto:privacy@habitica.com">privacy@habitica.com</a>.
     </p>
     <p><strong><u>Notice to United Kingdom/European/Switzerland Residents.</u></strong></p>
     <p>
diff --git a/website/client/src/components/static/staticWrapper.vue b/website/client/src/components/static/staticWrapper.vue
index bc2b1707c0..80430cdea8 100644
--- a/website/client/src/components/static/staticWrapper.vue
+++ b/website/client/src/components/static/staticWrapper.vue
@@ -15,8 +15,8 @@
       <router-view />
     </div>
     <div
-      id="bottom-background"
       v-if="loginFlow"
+      id="bottom-background"
       class="bg-purple-300"
     >
       <div class="seamless_mountains_demo_repeat"></div>
@@ -31,7 +31,10 @@
       id="bottom-wrap"
       class="purple-4"
     >
-      <div id="bottom-background" v-if="!loginFlow">
+      <div
+        v-if="!loginFlow"
+        id="bottom-background"
+      >
         <div class="seamless_mountains_demo_repeat"></div>
         <div class="midground_foreground_extended2"></div>
       </div>
diff --git a/website/client/src/components/static/terms.vue b/website/client/src/components/static/terms.vue
index 1e530ee203..e1e52206d4 100644
--- a/website/client/src/components/static/terms.vue
+++ b/website/client/src/components/static/terms.vue
@@ -158,7 +158,7 @@
       BY PURCHASING PREMIUM YOU EXPRESSLY UNDERSTAND AND AGREE TO OUR REFUND POLICY:
     </p>
     <p>
-      YOU CAN REQUEST A REFUND OF YOUR MOST RECENT PAYMENT TO US BY CONTACTING US AT <a href='mailto:admin@habitica.com'>ADMIN@HABITICA.COM</a>. THE AMOUNT OF YOUR REFUND, IF ANY, WILL BE BASED ON (1) THE AMOUNT OF YOUR PURCHASED BUT UNUSED SUBSCRIPTION BENEFITS AND (2) THE TERMS IMPOSED ON US BY OUR PAYMENT PROCESSING VENDORS (E.G., WITH RESPECT TO THE DURATION OF THE REFUND PERIOD).
+      YOU CAN REQUEST A REFUND OF YOUR MOST RECENT PAYMENT TO US BY CONTACTING US AT <a href="mailto:admin@habitica.com">ADMIN@HABITICA.COM</a>. THE AMOUNT OF YOUR REFUND, IF ANY, WILL BE BASED ON (1) THE AMOUNT OF YOUR PURCHASED BUT UNUSED SUBSCRIPTION BENEFITS AND (2) THE TERMS IMPOSED ON US BY OUR PAYMENT PROCESSING VENDORS (E.G., WITH RESPECT TO THE DURATION OF THE REFUND PERIOD).
     </p>
     <p>
       FOR ANY CUSTOMER WHO PURCHASED PREMIUM IN APPLE INC.'s APP STORE ("APP STORE"), PLEASE CONTACT APPLE INC.'s SUPPORT TEAM: <a
diff --git a/website/client/src/components/tasks/brokenTaskModal.vue b/website/client/src/components/tasks/brokenTaskModal.vue
index fe704b5d8f..b31654df88 100644
--- a/website/client/src/components/tasks/brokenTaskModal.vue
+++ b/website/client/src/components/tasks/brokenTaskModal.vue
@@ -5,66 +5,66 @@
       title="Broken Challenge"
       size="sm"
       :hide-footer="true"
-    >
-    <div
-      v-if="brokenChallengeTask && brokenChallengeTask.challenge"
-      class="modal-body"
     >
       <div
-        v-if="brokenChallengeTask.challenge.broken === 'TASK_DELETED'
-          || brokenChallengeTask.challenge.broken === 'CHALLENGE_TASK_NOT_FOUND'"
+        v-if="brokenChallengeTask && brokenChallengeTask.challenge"
+        class="modal-body"
       >
-        <h2>{{ $t('brokenTask') }}</h2>
-        <div>
-          <button
-            class="btn btn-primary"
-            @click="unlink('keep')"
-          >
-            {{ $t('keepIt') }}
-          </button>
-          <button
-            class="btn btn-danger"
-            @click="removeTask(obj)"
-          >
-            {{ $t('removeIt') }}
-          </button>
+        <div
+          v-if="brokenChallengeTask.challenge.broken === 'TASK_DELETED'
+            || brokenChallengeTask.challenge.broken === 'CHALLENGE_TASK_NOT_FOUND'"
+        >
+          <h2>{{ $t('brokenTask') }}</h2>
+          <div>
+            <button
+              class="btn btn-primary"
+              @click="unlink('keep')"
+            >
+              {{ $t('keepIt') }}
+            </button>
+            <button
+              class="btn btn-danger"
+              @click="removeTask(obj)"
+            >
+              {{ $t('removeIt') }}
+            </button>
+          </div>
+        </div>
+        <div v-if="brokenChallengeTask.challenge.broken === 'CHALLENGE_DELETED'">
+          <h2>{{ $t('brokenChallenge') }}</h2>
+          <div>
+            <button
+              class="btn btn-primary"
+              @click="unlink('keep-all')"
+            >
+              {{ $t('keepTasks') }}
+            </button>
+            <button
+              class="btn btn-danger"
+              @click="unlink('remove-all')"
+            >
+              {{ $t('removeTasks') }}
+            </button>
+          </div>
+        </div>
+        <div v-if="brokenChallengeTask.challenge.broken === 'CHALLENGE_CLOSED'">
+          <h2 v-html="$t('challengeCompleted', {user: brokenChallengeTask.challenge.winner})"></h2>
+          <div>
+            <button
+              class="btn btn-primary"
+              @click="unlink('keep-all')"
+            >
+              {{ $t('keepTasks') }}
+            </button>
+            <button
+              class="btn btn-danger"
+              @click="unlink('remove-all')"
+            >
+              {{ $t('removeTasks') }}
+            </button>
+          </div>
         </div>
       </div>
-      <div v-if="brokenChallengeTask.challenge.broken === 'CHALLENGE_DELETED'">
-        <h2>{{ $t('brokenChallenge') }}</h2>
-        <div>
-          <button
-            class="btn btn-primary"
-            @click="unlink('keep-all')"
-          >
-            {{ $t('keepTasks') }}
-          </button>
-          <button
-            class="btn btn-danger"
-            @click="unlink('remove-all')"
-          >
-            {{ $t('removeTasks') }}
-          </button>
-        </div>
-      </div>
-      <div v-if="brokenChallengeTask.challenge.broken === 'CHALLENGE_CLOSED'">
-        <h2 v-html="$t('challengeCompleted', {user: brokenChallengeTask.challenge.winner})"></h2>
-        <div>
-          <button
-            class="btn btn-primary"
-            @click="unlink('keep-all')"
-          >
-            {{ $t('keepTasks') }}
-          </button>
-          <button
-            class="btn btn-danger"
-            @click="unlink('remove-all')"
-          >
-            {{ $t('removeTasks') }}
-          </button>
-        </div>
-      </div>
-    </div>
     </b-modal>
     <deleteTaskConfirmModal />
   </div>
diff --git a/website/client/src/components/tasks/column.vue b/website/client/src/components/tasks/column.vue
index a54c07b58f..1bf975ba7a 100644
--- a/website/client/src/components/tasks/column.vue
+++ b/website/client/src/components/tasks/column.vue
@@ -87,7 +87,7 @@
         ref="tasksList"
         class="sortable-tasks"
         :disabled="activeFilter.label === 'scheduled' || !canBeDragged()"
-        scrollSensitivity="64"
+        scroll-sensitivity="64"
         :delay-on-touch-only="true"
         :delay="100"
         @update="taskSorted"
diff --git a/website/client/src/components/tasks/deleteTaskConfirmModal.vue b/website/client/src/components/tasks/deleteTaskConfirmModal.vue
index 5344ddb33b..e880595813 100644
--- a/website/client/src/components/tasks/deleteTaskConfirmModal.vue
+++ b/website/client/src/components/tasks/deleteTaskConfirmModal.vue
@@ -1,65 +1,65 @@
-<template>
-  <b-modal
-    id="delete-task-confirm-modal"
-    size="md"
-    :hide-footer="true"
-  >
-    <div class="text-center">
-      <h2 class="col-12">
-        {{ confirmationMessage }}
-      </h2>
-    </div>
-    <div class="modal-footer d-flex justify-content-between">
-      <button
-        class="btn btn-danger"
-        @click="confirm()"
-      >
-        {{ $t('delete') }}
-      </button>
-      <button
-        class="btn btn-secondary"
-        @click="cancel()"
-      >
-        {{ $t('cancel') }}
-      </button>
-    </div>
-  </b-modal>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      confirmationMessage: '',
-      resolveCallback: null,
-    };
-  },
-  mounted () {
-    this.$root.$on('habitica:delete-task-confirm', config => {
-      this.confirmationMessage = config.message;
-      this.resolveCallback = config.resolve;
-      this.$root.$emit('bv::show::modal', 'delete-task-confirm-modal');
-    });
-  },
-  beforeDestroy () {
-    this.$root.$off('habitica:delete-task-confirm');
-  },
-  methods: {
-    confirm () {
-      if (this.resolveCallback) {
-        this.resolveCallback(true);
-      }
-      this.close();
-    },
-    cancel () {
-      if (this.resolveCallback) {
-        this.resolveCallback(false);
-      }
-      this.close();
-    },
-    close () {
-      this.$root.$emit('bv::hide::modal', 'delete-task-confirm-modal');
-    },
-  },
-};
-</script>
+<template>
+  <b-modal
+    id="delete-task-confirm-modal"
+    size="md"
+    :hide-footer="true"
+  >
+    <div class="text-center">
+      <h2 class="col-12">
+        {{ confirmationMessage }}
+      </h2>
+    </div>
+    <div class="modal-footer d-flex justify-content-between">
+      <button
+        class="btn btn-danger"
+        @click="confirm()"
+      >
+        {{ $t('delete') }}
+      </button>
+      <button
+        class="btn btn-secondary"
+        @click="cancel()"
+      >
+        {{ $t('cancel') }}
+      </button>
+    </div>
+  </b-modal>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      confirmationMessage: '',
+      resolveCallback: null,
+    };
+  },
+  mounted () {
+    this.$root.$on('habitica:delete-task-confirm', config => {
+      this.confirmationMessage = config.message;
+      this.resolveCallback = config.resolve;
+      this.$root.$emit('bv::show::modal', 'delete-task-confirm-modal');
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('habitica:delete-task-confirm');
+  },
+  methods: {
+    confirm () {
+      if (this.resolveCallback) {
+        this.resolveCallback(true);
+      }
+      this.close();
+    },
+    cancel () {
+      if (this.resolveCallback) {
+        this.resolveCallback(false);
+      }
+      this.close();
+    },
+    close () {
+      this.$root.$emit('bv::hide::modal', 'delete-task-confirm-modal');
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/tasks/task.vue b/website/client/src/components/tasks/task.vue
index 443f73cda6..e46614a468 100644
--- a/website/client/src/components/tasks/task.vue
+++ b/website/client/src/components/tasks/task.vue
@@ -3,422 +3,422 @@
     <div
       class="task-wrapper"
       draggable
-    >
-    <div
-      class="task transition"
-      :class="[{
-        'groupTask': task.group.id,
-        'task-not-editable': !teamManagerAccess,
-        'task-not-scoreable': showTaskLockIcon,
-        'link-exempt': !isChallengeTask && !isGroupTask,
-      }, `type_${task.type}`
-      ]"
-      @click="castEnd($event, task)"
     >
       <div
-        class="d-flex"
-        :class="{'task-not-scoreable': showTaskLockIcon }"
+        class="task transition"
+        :class="[{
+          'groupTask': task.group.id,
+          'task-not-editable': !teamManagerAccess,
+          'task-not-scoreable': showTaskLockIcon,
+          'link-exempt': !isChallengeTask && !isGroupTask,
+        }, `type_${task.type}`
+        ]"
+        @click="castEnd($event, task)"
       >
-        <!-- Habits left side control-->
         <div
-          v-if="task.type === 'habit'"
-          class="left-control d-flex justify-content-center pt-3"
-          :class="[{
-            'control-bottom-box': task.group.id && !isOpenTask,
-            'control-top-box': approvalsClass
-          }, controlClass.up.bg]"
+          class="d-flex"
+          :class="{'task-not-scoreable': showTaskLockIcon }"
         >
+          <!-- Habits left side control-->
           <div
-            class="task-control habit-control"
+            v-if="task.type === 'habit'"
+            class="left-control d-flex justify-content-center pt-3"
             :class="[{
-              'habit-control-positive-enabled': task.up && !showTaskLockIcon,
-              'habit-control-positive-disabled': !task.up && !showTaskLockIcon,
-              'task-not-scoreable': showTaskLockIcon,
-            }, controlClass.up.inner]"
-            tabindex="0"
-            role="button"
-            :aria-label="$t('scoreUp')"
-            :aria-disabled="showTaskLockIcon || (!task.up && !showTaskLockIcon)"
-            @click="score('up')"
-            @keypress.enter="score('up')"
+              'control-bottom-box': task.group.id && !isOpenTask,
+              'control-top-box': approvalsClass
+            }, controlClass.up.bg]"
           >
             <div
-              v-if="showTaskLockIcon"
-              class="svg-icon lock"
-              :class="task.up ? controlClass.up.icon : 'positive'"
-              v-html="icons.lock"
-            ></div>
-            <div
-              v-else
-              class="svg-icon positive"
-              v-html="icons.positive"
-            ></div>
-          </div>
-        </div>
-        <!-- Dailies and todos left side control-->
-        <div
-          v-if="task.type === 'daily' || task.type === 'todo'"
-          class="left-control d-flex justify-content-center"
-          :class="[{
-            'control-bottom-box': task.group.id && !isOpenTask,
-            'control-top-box': approvalsClass}, controlClass.bg]"
-        >
-          <div
-            class="task-control daily-todo-control"
-            :class="[
-              { 'task-not-scoreable': showTaskLockIcon },
-              controlClass.inner,
-            ]"
-            tabindex="0"
-            role="checkbox"
-            @click="score(showCheckIcon ? 'down' : 'up' )"
-            @keypress.enter="score(showCheckIcon ? 'down' : 'up' )"
-          >
-            <div
-              v-if="showTaskLockIcon"
-              class="svg-icon lock"
-              :class="controlClass.icon"
-              v-html="icons.lock"
-            ></div>
-            <div
-              v-else
-              class="svg-icon check"
-              :class="{
-                'display-check-icon': showCheckIcon,
-                [controlClass.checkbox]: true,
-              }"
-              v-html="icons.check"
-            ></div>
-          </div>
-        </div>
-        <!-- Task title, description and icons-->
-        <div
-          class="task-content"
-          :class="contentClass"
-        >
-          <div
-            class="task-clickable-area pt-1 pl-75 pb-0"
-            :class="{ 'cursor-auto': !teamManagerAccess }"
-            tabindex="0"
-            @click="edit($event, task)"
-            @keypress.enter="edit($event, task)"
-          >
-            <div class="d-flex justify-content-between">
-              <h3
-                v-markdown="task.text"
-                class="task-title markdown"
-                :class="{ 'has-notes': task.notes }"
-              ></h3>
-              <menu-dropdown
-                v-if="!isRunningYesterdailies && showOptions"
-                ref="taskDropdown"
-                v-b-tooltip.hover.top="$t('options')"
-                tabindex="0"
-                class="task-dropdown mr-1"
-                :right="task.type === 'reward'"
-              >
-                <div slot="dropdown-toggle">
-                  <div
-                    class="svg-icon dropdown-icon"
-                    v-html="icons.menu"
-                  ></div>
-                </div>
-                <div slot="dropdown-content">
-                  <div
-                    v-if="showEdit"
-                    ref="editTaskItem"
-                    class="dropdown-item edit-task-item"
-                    tabindex="0"
-                    @keypress.enter="edit($event, task)"
-                  >
-                    <span class="dropdown-icon-item">
-                      <span
-                        class="svg-icon inline edit-icon"
-                        v-html="icons.edit"
-                      ></span>
-                      <span class="text">{{ $t('edit') }}</span>
-                    </span>
-                  </div>
-                  <div
-                    class="dropdown-item"
-                    tabindex="0"
-                    @click="moveToTop"
-                    @keypress.enter="moveToTop"
-                  >
-                    <span class="dropdown-icon-item">
-                      <span
-                        class="svg-icon inline push-to-top"
-                        v-html="icons.top"
-                      ></span>
-                      <span class="text">{{ $t('taskToTop') }}</span>
-                    </span>
-                  </div>
-                  <div
-                    class="dropdown-item"
-                    tabindex="0"
-                    @click="moveToBottom"
-                    @keypress.enter="moveToBottom"
-                  >
-                    <span class="dropdown-icon-item">
-                      <span
-                        class="svg-icon inline push-to-bottom"
-                        v-html="icons.bottom"
-                      ></span>
-                      <span class="text">{{ $t('taskToBottom') }}</span>
-                    </span>
-                  </div>
-                  <div
-                    v-if="showDelete"
-                    class="dropdown-item"
-                    tabindex="0"
-                    @click="destroy"
-                    @keypress.enter="destroy"
-                  >
-                    <span class="dropdown-icon-item delete-task-item">
-                      <span
-                        class="svg-icon inline delete"
-                        v-html="icons.delete"
-                      ></span>
-                      <span class="text">{{ $t('delete') }}</span>
-                    </span>
-                  </div>
-                </div>
-              </menu-dropdown>
-            </div>
-            <div
-              v-markdown="task.notes"
-              class="task-notes small-text"
-              :class="{'has-checklist': task.notes && hasChecklist}"
-            ></div>
-          </div>
-          <div
-            v-if="canViewchecklist"
-            class="checklist"
-            :class="{isOpen: !task.collapseChecklist}"
-          >
-            <div class="d-inline-flex">
-              <div
-                v-b-tooltip.hover.right="$t(`${task.collapseChecklist
-                  ? 'expand': 'collapse'}Checklist`)"
-                class="collapse-checklist mb-2 d-flex align-items-center expand-toggle"
-                :class="{open: !task.collapseChecklist}"
-                tabindex="0"
-                @click="collapseChecklist(task)"
-                @keypress.enter="collapseChecklist(task)"
-              >
-                <div
-                  v-once
-                  class="svg-icon"
-                  v-html="icons.checklist"
-                ></div>
-                <span>{{ checklistProgress }}</span>
-              </div>
-            </div>
-            <!-- eslint-disable vue/no-use-v-if-with-v-for -->
-            <div
-              v-for="item in task.checklist"
-              v-if="!task.collapseChecklist"
-              :key="item.id"
-              class="custom-control custom-checkbox checklist-item"
-              :class="{'checklist-item-done': item.completed, 'cursor-auto': showTaskLockIcon}"
-            >
-              <!-- eslint-enable vue/no-use-v-if-with-v-for -->
-              <input
-                :id="`checklist-${item.id}-${random}`"
-                class="custom-control-input"
-                tabindex="0"
-                type="checkbox"
-                :checked="item.completed"
-                :disabled="castingSpell || showTaskLockIcon"
-                @change="toggleChecklistItem(item)"
-                @keypress.enter="toggleChecklistItem(item)"
-              >
-              <label
-                v-markdown="item.text"
-                class="custom-control-label"
-                :class="{ 'cursor-auto': showTaskLockIcon }"
-                :for="`checklist-${item.id}-${random}`"
-              ></label>
-            </div>
-          </div>
-          <div class="icons small-text d-flex align-items-center">
-            <div
-              v-if="task.type === 'todo' && task.date"
-              class="d-flex align-items-center"
-              :class="{'due-overdue': checkIfOverdue() }"
+              class="task-control habit-control"
+              :class="[{
+                'habit-control-positive-enabled': task.up && !showTaskLockIcon,
+                'habit-control-positive-disabled': !task.up && !showTaskLockIcon,
+                'task-not-scoreable': showTaskLockIcon,
+              }, controlClass.up.inner]"
+              tabindex="0"
+              role="button"
+              :aria-label="$t('scoreUp')"
+              :aria-disabled="showTaskLockIcon || (!task.up && !showTaskLockIcon)"
+              @click="score('up')"
+              @keypress.enter="score('up')"
             >
               <div
-                v-b-tooltip.hover.bottom="$t('dueDate')"
-                class="svg-icon calendar my-auto"
-                v-html="icons.calendar"
+                v-if="showTaskLockIcon"
+                class="svg-icon lock"
+                :class="task.up ? controlClass.up.icon : 'positive'"
+                v-html="icons.lock"
+              ></div>
+              <div
+                v-else
+                class="svg-icon positive"
+                v-html="icons.positive"
               ></div>
-              <span>{{ formatDueDate() }}</span>
             </div>
-            <div class="icons-right d-flex justify-content-end">
+          </div>
+          <!-- Dailies and todos left side control-->
+          <div
+            v-if="task.type === 'daily' || task.type === 'todo'"
+            class="left-control d-flex justify-content-center"
+            :class="[{
+              'control-bottom-box': task.group.id && !isOpenTask,
+              'control-top-box': approvalsClass}, controlClass.bg]"
+          >
+            <div
+              class="task-control daily-todo-control"
+              :class="[
+                { 'task-not-scoreable': showTaskLockIcon },
+                controlClass.inner,
+              ]"
+              tabindex="0"
+              role="checkbox"
+              @click="score(showCheckIcon ? 'down' : 'up' )"
+              @keypress.enter="score(showCheckIcon ? 'down' : 'up' )"
+            >
               <div
-                v-if="showStreak"
-                class="d-flex align-items-center"
-              >
-                <div
-                  v-b-tooltip.hover.bottom="task.type === 'daily'
-                    ? $t('streakCounter') : $t('counter')"
-                  class="svg-icon streak"
-                  v-html="icons.streak"
-                ></div>
-                <span v-if="task.type === 'daily'">{{ task.streak }}</span>
-                <span v-if="task.type === 'habit'">
-                  <span
-                    v-if="task.up && task.counterUp != 0 && task.down"
-                    class="m-0"
-                  >+{{ task.counterUp }}</span>
-                  <span
-                    v-else-if=" task.counterUp !=0 && task.counterDown ==0"
-                    class="m-0"
-                  >{{ task.counterUp }}</span>
-                  <span
-                    v-else-if="task.up"
-                    class="m-0"
-                  >0</span>
-                  <span
-                    v-if="task.up && task.down"
-                    class="m-0"
-                  >&nbsp;|&nbsp;</span>
-                  <span
-                    v-if="task.down && task.counterDown != 0 && task.up"
-                    class="m-0"
-                  >-{{ task.counterDown }}</span>
-                  <span
-                    v-else-if="task.counterDown !=0 && task.counterUp ==0"
-                    class="m-0"
-                  >{{ task.counterDown }}</span>
-                  <span
-                    v-else-if="task.down"
-                    class="m-0"
-                  >0</span>
-                </span>
-              </div>
+                v-if="showTaskLockIcon"
+                class="svg-icon lock"
+                :class="controlClass.icon"
+                v-html="icons.lock"
+              ></div>
               <div
-                v-if="task.challenge && task.challenge.id"
-                class="d-flex align-items-center"
-              >
-                <div
-                  v-if="!task.challenge.broken"
-                  v-b-tooltip.hover.bottom="shortName"
-                  class="svg-icon challenge"
-                  v-html="icons.challenge"
-                ></div>
-                <div
-                  v-if="task.challenge.broken"
-                  v-b-tooltip.hover.bottom="$t('brokenChaLink')"
-                  class="svg-icon challenge broken"
-                  @click="handleBrokenTask(task)"
-                  v-html="icons.brokenChallengeIcon"
-                ></div>
-              </div>
-              <div
-                v-if="hasTags && !task.group.id"
-                :id="`tags-icon-${task._id}`"
-                class="d-flex align-items-center"
-              >
-                <div
-                  class="svg-icon tags"
-                  v-html="icons.tags"
-                ></div>
-              </div>
-              <b-popover
-                v-if="hasTags && !task.group.id"
-                :target="`tags-icon-${task._id}`"
-                triggers="hover"
-                placement="bottom"
-              >
-                <div class="tags-popover">
-                  <div class="d-flex align-items-center tags-container">
+                v-else
+                class="svg-icon check"
+                :class="{
+                  'display-check-icon': showCheckIcon,
+                  [controlClass.checkbox]: true,
+                }"
+                v-html="icons.check"
+              ></div>
+            </div>
+          </div>
+          <!-- Task title, description and icons-->
+          <div
+            class="task-content"
+            :class="contentClass"
+          >
+            <div
+              class="task-clickable-area pt-1 pl-75 pb-0"
+              :class="{ 'cursor-auto': !teamManagerAccess }"
+              tabindex="0"
+              @click="edit($event, task)"
+              @keypress.enter="edit($event, task)"
+            >
+              <div class="d-flex justify-content-between">
+                <h3
+                  v-markdown="task.text"
+                  class="task-title markdown"
+                  :class="{ 'has-notes': task.notes }"
+                ></h3>
+                <menu-dropdown
+                  v-if="!isRunningYesterdailies && showOptions"
+                  ref="taskDropdown"
+                  v-b-tooltip.hover.top="$t('options')"
+                  tabindex="0"
+                  class="task-dropdown mr-1"
+                  :right="task.type === 'reward'"
+                >
+                  <div slot="dropdown-toggle">
                     <div
-                      v-once
-                      class="tags-popover-title"
-                    >
-                      {{ `${$t('tags')}:` }}
-                    </div>
-                    <div
-                      v-for="tag in getTagsFor(task)"
-                      :key="tag"
-                      v-markdown="tag"
-                      class="tag-label"
+                      class="svg-icon dropdown-icon"
+                      v-html="icons.menu"
                     ></div>
                   </div>
+                  <div slot="dropdown-content">
+                    <div
+                      v-if="showEdit"
+                      ref="editTaskItem"
+                      class="dropdown-item edit-task-item"
+                      tabindex="0"
+                      @keypress.enter="edit($event, task)"
+                    >
+                      <span class="dropdown-icon-item">
+                        <span
+                          class="svg-icon inline edit-icon"
+                          v-html="icons.edit"
+                        ></span>
+                        <span class="text">{{ $t('edit') }}</span>
+                      </span>
+                    </div>
+                    <div
+                      class="dropdown-item"
+                      tabindex="0"
+                      @click="moveToTop"
+                      @keypress.enter="moveToTop"
+                    >
+                      <span class="dropdown-icon-item">
+                        <span
+                          class="svg-icon inline push-to-top"
+                          v-html="icons.top"
+                        ></span>
+                        <span class="text">{{ $t('taskToTop') }}</span>
+                      </span>
+                    </div>
+                    <div
+                      class="dropdown-item"
+                      tabindex="0"
+                      @click="moveToBottom"
+                      @keypress.enter="moveToBottom"
+                    >
+                      <span class="dropdown-icon-item">
+                        <span
+                          class="svg-icon inline push-to-bottom"
+                          v-html="icons.bottom"
+                        ></span>
+                        <span class="text">{{ $t('taskToBottom') }}</span>
+                      </span>
+                    </div>
+                    <div
+                      v-if="showDelete"
+                      class="dropdown-item"
+                      tabindex="0"
+                      @click="destroy"
+                      @keypress.enter="destroy"
+                    >
+                      <span class="dropdown-icon-item delete-task-item">
+                        <span
+                          class="svg-icon inline delete"
+                          v-html="icons.delete"
+                        ></span>
+                        <span class="text">{{ $t('delete') }}</span>
+                      </span>
+                    </div>
+                  </div>
+                </menu-dropdown>
+              </div>
+              <div
+                v-markdown="task.notes"
+                class="task-notes small-text"
+                :class="{'has-checklist': task.notes && hasChecklist}"
+              ></div>
+            </div>
+            <div
+              v-if="canViewchecklist"
+              class="checklist"
+              :class="{isOpen: !task.collapseChecklist}"
+            >
+              <div class="d-inline-flex">
+                <div
+                  v-b-tooltip.hover.right="$t(`${task.collapseChecklist
+                    ? 'expand': 'collapse'}Checklist`)"
+                  class="collapse-checklist mb-2 d-flex align-items-center expand-toggle"
+                  :class="{open: !task.collapseChecklist}"
+                  tabindex="0"
+                  @click="collapseChecklist(task)"
+                  @keypress.enter="collapseChecklist(task)"
+                >
+                  <div
+                    v-once
+                    class="svg-icon"
+                    v-html="icons.checklist"
+                  ></div>
+                  <span>{{ checklistProgress }}</span>
                 </div>
-              </b-popover>
+              </div>
+              <!-- eslint-disable vue/no-use-v-if-with-v-for -->
+              <div
+                v-for="item in task.checklist"
+                v-if="!task.collapseChecklist"
+                :key="item.id"
+                class="custom-control custom-checkbox checklist-item"
+                :class="{'checklist-item-done': item.completed, 'cursor-auto': showTaskLockIcon}"
+              >
+                <!-- eslint-enable vue/no-use-v-if-with-v-for -->
+                <input
+                  :id="`checklist-${item.id}-${random}`"
+                  class="custom-control-input"
+                  tabindex="0"
+                  type="checkbox"
+                  :checked="item.completed"
+                  :disabled="castingSpell || showTaskLockIcon"
+                  @change="toggleChecklistItem(item)"
+                  @keypress.enter="toggleChecklistItem(item)"
+                >
+                <label
+                  v-markdown="item.text"
+                  class="custom-control-label"
+                  :class="{ 'cursor-auto': showTaskLockIcon }"
+                  :for="`checklist-${item.id}-${random}`"
+                ></label>
+              </div>
+            </div>
+            <div class="icons small-text d-flex align-items-center">
+              <div
+                v-if="task.type === 'todo' && task.date"
+                class="d-flex align-items-center"
+                :class="{'due-overdue': checkIfOverdue() }"
+              >
+                <div
+                  v-b-tooltip.hover.bottom="$t('dueDate')"
+                  class="svg-icon calendar my-auto"
+                  v-html="icons.calendar"
+                ></div>
+                <span>{{ formatDueDate() }}</span>
+              </div>
+              <div class="icons-right d-flex justify-content-end">
+                <div
+                  v-if="showStreak"
+                  class="d-flex align-items-center"
+                >
+                  <div
+                    v-b-tooltip.hover.bottom="task.type === 'daily'
+                      ? $t('streakCounter') : $t('counter')"
+                    class="svg-icon streak"
+                    v-html="icons.streak"
+                  ></div>
+                  <span v-if="task.type === 'daily'">{{ task.streak }}</span>
+                  <span v-if="task.type === 'habit'">
+                    <span
+                      v-if="task.up && task.counterUp != 0 && task.down"
+                      class="m-0"
+                    >+{{ task.counterUp }}</span>
+                    <span
+                      v-else-if=" task.counterUp !=0 && task.counterDown ==0"
+                      class="m-0"
+                    >{{ task.counterUp }}</span>
+                    <span
+                      v-else-if="task.up"
+                      class="m-0"
+                    >0</span>
+                    <span
+                      v-if="task.up && task.down"
+                      class="m-0"
+                    >&nbsp;|&nbsp;</span>
+                    <span
+                      v-if="task.down && task.counterDown != 0 && task.up"
+                      class="m-0"
+                    >-{{ task.counterDown }}</span>
+                    <span
+                      v-else-if="task.counterDown !=0 && task.counterUp ==0"
+                      class="m-0"
+                    >{{ task.counterDown }}</span>
+                    <span
+                      v-else-if="task.down"
+                      class="m-0"
+                    >0</span>
+                  </span>
+                </div>
+                <div
+                  v-if="task.challenge && task.challenge.id"
+                  class="d-flex align-items-center"
+                >
+                  <div
+                    v-if="!task.challenge.broken"
+                    v-b-tooltip.hover.bottom="shortName"
+                    class="svg-icon challenge"
+                    v-html="icons.challenge"
+                  ></div>
+                  <div
+                    v-if="task.challenge.broken"
+                    v-b-tooltip.hover.bottom="$t('brokenChaLink')"
+                    class="svg-icon challenge broken"
+                    @click="handleBrokenTask(task)"
+                    v-html="icons.brokenChallengeIcon"
+                  ></div>
+                </div>
+                <div
+                  v-if="hasTags && !task.group.id"
+                  :id="`tags-icon-${task._id}`"
+                  class="d-flex align-items-center"
+                >
+                  <div
+                    class="svg-icon tags"
+                    v-html="icons.tags"
+                  ></div>
+                </div>
+                <b-popover
+                  v-if="hasTags && !task.group.id"
+                  :target="`tags-icon-${task._id}`"
+                  triggers="hover"
+                  placement="bottom"
+                >
+                  <div class="tags-popover">
+                    <div class="d-flex align-items-center tags-container">
+                      <div
+                        v-once
+                        class="tags-popover-title"
+                      >
+                        {{ `${$t('tags')}:` }}
+                      </div>
+                      <div
+                        v-for="tag in getTagsFor(task)"
+                        :key="tag"
+                        v-markdown="tag"
+                        class="tag-label"
+                      ></div>
+                    </div>
+                  </div>
+                </b-popover>
+              </div>
             </div>
           </div>
-        </div>
-        <!-- Habits right side control-->
-        <div
-          v-if="task.type === 'habit'"
-          class="right-control d-flex justify-content-center pt-3"
-          :class="[{
-            'control-bottom-box': task.group.id && !isOpenTask,
-            'control-top-box': approvalsClass}, controlClass.down.bg]"
-        >
+          <!-- Habits right side control-->
           <div
-            class="task-control habit-control"
+            v-if="task.type === 'habit'"
+            class="right-control d-flex justify-content-center pt-3"
             :class="[{
-              'habit-control-negative-enabled': task.down && !showTaskLockIcon,
-              'habit-control-negative-disabled': !task.down && !showTaskLockIcon,
-              'task-not-scoreable': showTaskLockIcon,
-            }, controlClass.down.inner]"
+              'control-bottom-box': task.group.id && !isOpenTask,
+              'control-top-box': approvalsClass}, controlClass.down.bg]"
+          >
+            <div
+              class="task-control habit-control"
+              :class="[{
+                'habit-control-negative-enabled': task.down && !showTaskLockIcon,
+                'habit-control-negative-disabled': !task.down && !showTaskLockIcon,
+                'task-not-scoreable': showTaskLockIcon,
+              }, controlClass.down.inner]"
+              tabindex="0"
+              role="button"
+              :aria-label="$t('scoreDown')"
+              :aria-disabled="showTaskLockIcon || (!task.down && !showTaskLockIcon)"
+              @click="score('down')"
+              @keypress.enter="score('down')"
+            >
+              <div
+                v-if="showTaskLockIcon"
+                class="svg-icon lock"
+                :class="task.down ? controlClass.down.icon : 'negative'"
+                v-html="icons.lock"
+              ></div>
+              <div
+                v-else
+                class="svg-icon negative"
+                v-html="icons.negative"
+              ></div>
+            </div>
+          </div>
+          <!-- Rewards right side control-->
+          <div
+            v-if="task.type === 'reward'"
+            class="right-control d-flex align-items-center justify-content-center reward-control"
+            :class="[
+              { 'task-not-scoreable': showTaskLockIcon },
+              controlClass.bg,
+            ]"
             tabindex="0"
-            role="button"
-            :aria-label="$t('scoreDown')"
-            :aria-disabled="showTaskLockIcon || (!task.down && !showTaskLockIcon)"
             @click="score('down')"
             @keypress.enter="score('down')"
           >
             <div
               v-if="showTaskLockIcon"
-              class="svg-icon lock"
-              :class="task.down ? controlClass.down.icon : 'negative'"
+              class="svg-icon color lock"
               v-html="icons.lock"
             ></div>
             <div
               v-else
-              class="svg-icon negative"
-              v-html="icons.negative"
+              class="svg-icon mb-1"
+              v-html="icons.gold"
             ></div>
+            <div class="small-text">
+              {{ task.value }}
+            </div>
           </div>
         </div>
-        <!-- Rewards right side control-->
-        <div
-          v-if="task.type === 'reward'"
-          class="right-control d-flex align-items-center justify-content-center reward-control"
-          :class="[
-            { 'task-not-scoreable': showTaskLockIcon },
-            controlClass.bg,
-          ]"
-          tabindex="0"
-          @click="score('down')"
-          @keypress.enter="score('down')"
-        >
-          <div
-            v-if="showTaskLockIcon"
-            class="svg-icon color lock"
-            v-html="icons.lock"
-          ></div>
-          <div
-            v-else
-            class="svg-icon mb-1"
-            v-html="icons.gold"
-          ></div>
-          <div class="small-text">
-            {{ task.value }}
-          </div>
-        </div>
+        <approval-footer
+          v-if="task.group.id && !isOpenTask"
+          :task="task"
+          :group="group"
+        />
       </div>
-      <approval-footer
-        v-if="task.group.id && !isOpenTask"
-        :task="task"
-        :group="group"
-      />
-    </div>
     </div>
     <deleteTaskConfirmModal />
   </div>
diff --git a/website/client/src/components/tasks/taskModal.vue b/website/client/src/components/tasks/taskModal.vue
index 929b06e6ee..de6abe360f 100644
--- a/website/client/src/components/tasks/taskModal.vue
+++ b/website/client/src/components/tasks/taskModal.vue
@@ -2,611 +2,611 @@
   <div>
     <b-modal
       id="task-modal"
-    :no-close-on-esc="true"
-    :no-close-on-backdrop="true"
-    size="sm"
-    :hide-footer="true"
-    @hidden="onClose()"
-    @show="syncTask()"
-    @shown="focusInput()"
-  >
-    <div
-      v-if="task"
-      slot="modal-header"
-      class="task-modal-header p-4"
-      :class="cssClass('bg')"
+      :no-close-on-esc="true"
+      :no-close-on-backdrop="true"
+      size="sm"
+      :hide-footer="true"
+      @hidden="onClose()"
+      @show="syncTask()"
+      @shown="focusInput()"
     >
-      <div class="d-flex align-items-center mb-3">
-        <h2
-          class="my-auto"
-          :class="cssClass('headings')"
-        >
-          {{ title }}
-        </h2>
-        <div
-          class="ml-auto d-flex align-items-center"
-        >
-          <button
-            class="cancel-task-btn mr-3"
+      <div
+        v-if="task"
+        slot="modal-header"
+        class="task-modal-header p-4"
+        :class="cssClass('bg')"
+      >
+        <div class="d-flex align-items-center mb-3">
+          <h2
+            class="my-auto"
             :class="cssClass('headings')"
-            type="button"
-            @click="cancel()"
           >
-            {{ $t('cancel') }}
-          </button>
-          <button
-            class="btn btn-secondary d-flex align-items-center justify-content-center"
-            :class="{'btn-disabled': !canSave}"
-            type="button"
-            @click="submit()"
+            {{ title }}
+          </h2>
+          <div
+            class="ml-auto d-flex align-items-center"
           >
-            <div
-              v-if="purpose === 'edit'"
-              class="m-auto"
+            <button
+              class="cancel-task-btn mr-3"
+              :class="cssClass('headings')"
+              type="button"
+              @click="cancel()"
             >
-              {{ $t('save') }}
-            </div>
-            <div
-              v-if="purpose === 'create'"
-              class="m-auto"
+              {{ $t('cancel') }}
+            </button>
+            <button
+              class="btn btn-secondary d-flex align-items-center justify-content-center"
+              :class="{'btn-disabled': !canSave}"
+              type="button"
+              @click="submit()"
             >
-              {{ $t('create') }}
-            </div>
-          </button>
+              <div
+                v-if="purpose === 'edit'"
+                class="m-auto"
+              >
+                {{ $t('save') }}
+              </div>
+              <div
+                v-if="purpose === 'create'"
+                class="m-auto"
+              >
+                {{ $t('create') }}
+              </div>
+            </button>
+          </div>
         </div>
-      </div>
-      <div class="form-group">
-        <lockable-label
-          :class-override="cssClass('headings')"
-          :locked="challengeAccessRequired"
-          :text="`${$t('text')}*`"
-        />
-        <input
-          ref="inputToFocus"
-          v-model="task.text"
-          class="form-control input-title"
-          :class="cssClass('input')"
-          type="text"
-          required="required"
-          spellcheck="true"
-          :disabled="challengeAccessRequired"
-          :placeholder="$t('addATitle')"
+        <div class="form-group">
+          <lockable-label
+            :class-override="cssClass('headings')"
+            :locked="challengeAccessRequired"
+            :text="`${$t('text')}*`"
+          />
+          <input
+            ref="inputToFocus"
+            v-model="task.text"
+            class="form-control input-title"
+            :class="cssClass('input')"
+            type="text"
+            required="required"
+            spellcheck="true"
+            :disabled="challengeAccessRequired"
+            :placeholder="$t('addATitle')"
+          >
+        </div>
+        <div
+          class="form-group mb-0"
         >
+          <div class="d-flex">
+            <lockable-label
+              class="mr-auto"
+              :class-override="cssClass('headings')"
+              :text="`${$t('notes')}`"
+            />
+            <small
+              class="my-1"
+            >
+              <a
+                target="_blank"
+                href="https://github.com/HabitRPG/habitica/wiki/Markdown-in-Habitica"
+                :class="cssClass('headings')"
+              >{{ $t('markdownHelpLink') }}</a>
+            </small>
+          </div>
+          <textarea
+            v-model="task.notes"
+            class="form-control input-notes"
+            :class="cssClass('input')"
+            :placeholder="$t('addNotes')"
+          ></textarea>
+        </div>
       </div>
       <div
-        class="form-group mb-0"
+        v-if="task"
+        class="task-modal-content px-4"
+        :class="cssClass('content')"
       >
-        <div class="d-flex">
-          <lockable-label
-            class="mr-auto"
-            :class-override="cssClass('headings')"
-            :text="`${$t('notes')}`"
-          />
-          <small
-            class="my-1"
-          >
-            <a
-              target="_blank"
-              href="https://github.com/HabitRPG/habitica/wiki/Markdown-in-Habitica"
-              :class="cssClass('headings')"
-            >{{ $t('markdownHelpLink') }}</a>
-          </small>
-        </div>
-        <textarea
-          v-model="task.notes"
-          class="form-control input-notes"
-          :class="cssClass('input')"
-          :placeholder="$t('addNotes')"
-        ></textarea>
-      </div>
-    </div>
-    <div
-      v-if="task"
-      class="task-modal-content px-4"
-      :class="cssClass('content')"
-    >
-      <form
-        @submit.stop.prevent="submit()"
-      >
-        <div
-          v-if="task.type === 'reward'"
-          class="option mt-3"
-        >
-          <div class="form-group">
-            <label
-              v-once
-              class="mb-1"
-            >{{ $t('cost') }}</label>
-            <div class="input-group">
-              <div class="input-group-prepend input-group-icon align-items-center">
-                <div
-                  class="svg-icon gold"
-                  v-html="icons.gold"
-                ></div>
-              </div>
-              <input
-                v-model="task.value"
-                class="form-control"
-                type="number"
-                required="required"
-                placeholder="Enter a Value"
-                step="0.01"
-                min="0"
-              >
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="checklistEnabled"
-          class="option mt-3"
-        >
-          <checklist
-            :items.sync="task.checklist"
-          />
-        </div>
-        <div
-          v-if="task.type === 'habit'"
-          class="d-flex justify-content-center mt-3"
-        >
-          <button
-            type="button"
-            class="habit-option-container no-transition
-              d-flex flex-column justify-content-center align-items-center"
-            :class="!task.up ? cssClass('habit-control-disabled') : ''"
-            :disabled="challengeAccessRequired"
-            @click="toggleUpDirection()"
-          >
-            <div
-              class="habit-option-button no-transition
-                d-flex justify-content-center align-items-center mb-2"
-              :class="task.up ? cssClass('bg') : ''"
-            >
-              <div
-                class="habit-option-icon svg-icon no-transition"
-                :class="task.up ? '' : 'icon-disabled'"
-                v-html="icons.positive"
-              ></div>
-            </div>
-            <div
-              class="habit-option-label no-transition"
-              :class="task.up ? cssClass('icon') : 'label-disabled'"
-            >
-              {{ $t('positive') }}
-            </div>
-          </button>
-          <button
-            type="button"
-            class="habit-option-container no-transition
-              d-flex flex-column justify-content-center align-items-center"
-            :class="!task.down ? cssClass('habit-control-disabled') : ''"
-            :disabled="challengeAccessRequired"
-            @click="toggleDownDirection()"
-          >
-            <div
-              class="habit-option-button no-transition
-                d-flex justify-content-center align-items-center mb-2"
-              :class="task.down ? cssClass('bg') : ''"
-            >
-              <div
-                class="habit-option-icon no-transition svg-icon negative mx-auto"
-                :class="task.down ? '' : 'icon-disabled'"
-                v-html="icons.negative"
-              ></div>
-            </div>
-            <div
-              class="habit-option-label no-transition"
-              :class="task.down ? cssClass('icon') : 'label-disabled'"
-            >
-              {{ $t('negative') }}
-            </div>
-          </button>
-        </div>
-        <template
-          v-if="task.type !== 'reward'"
-        >
-          <div class="d-flex mt-3 align-items-center">
-            <lockable-label
-              :locked="challengeAccessRequired"
-              :text="$t('difficulty')"
-            />
-            <information-icon
-              tooltip-id="difficultyHelp"
-              :tooltip="$t('difficultyHelp')"
-            />
-          </div>
-          <select-difficulty
-            :value="task.priority"
-            :disabled="challengeAccessRequired"
-            @select="setDifficulty($event)"
-          />
-        </template>
-        <div
-          v-if="task.type === 'todo' && (!challengeAccessRequired || task.date)"
-          class="option mt-3"
-        >
-          <div class="form-group">
-            <lockable-label
-              :locked="challengeAccessRequired"
-              :text="$t('dueDate')"
-            />
-            <datepicker
-              :date.sync="task.date"
-              :disabled="challengeAccessRequired"
-              :highlighted="calendarHighlights"
-              :clear-button="true"
-            />
-          </div>
-        </div>
-        <div
-          v-if="task.type === 'daily'"
-          class="option mt-3"
-        >
-          <div class="form-group">
-            <lockable-label
-              :locked="challengeAccessRequired"
-              :text="$t('startDate')"
-            />
-            <datepicker
-              :date.sync="task.startDate"
-              :disabled="challengeAccessRequired"
-              :highlighted="calendarHighlights"
-            />
-          </div>
-        </div>
-        <div
-          v-if="task.type === 'daily'"
-          class="option mt-3"
-        >
-          <div class="form-group">
-            <lockable-label
-              :locked="challengeAccessRequired"
-              :text="$t('repeats')"
-            />
-            <select-translated-array
-              :disabled="challengeAccessRequired"
-              :items="['daily', 'weekly', 'monthly', 'yearly']"
-              :value="task.frequency"
-              @select="task.frequency = $event"
-            />
-          </div>
-        </div>
-        <div
-          v-if="task.type === 'daily'"
-          class="option mt-3"
-        >
-          <div class="form-group">
-            <lockable-label
-              :locked="challengeAccessRequired"
-              :text="$t('repeatEvery')"
-            />
-            <div
-              class="input-group-outer"
-              :class="{disabled: challengeAccessRequired}"
-            >
-              <div class="input-group">
-                <input
-                  v-model="task.everyX"
-                  class="form-control"
-                  type="number"
-                  min="0"
-                  max="9999"
-                  required="required"
-                  :disabled="challengeAccessRequired"
-                >
-              </div>
-              <div class="input-group-spaced input-group-text">
-                {{ repeatSuffix }}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="task.type === 'daily' && task.frequency === 'weekly'"
-          class="option mt-3"
-        >
-          <div class="form-group">
-            <lockable-label
-              :locked="challengeAccessRequired"
-              :text="$t('repeatOn')"
-            />
-            <div class="toggle-group">
-              <toggle-checkbox
-                v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']"
-                :key="dayNumber"
-                :tab-index="dayNumber"
-                :checked.sync="task.repeat[day]"
-                :disabled="challengeAccessRequired"
-                :text="weekdaysMin(dayNumber)"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="task.type === 'daily' && task.frequency === 'monthly'"
-          class="option mt-3"
-        >
-          <label
-            v-once
-            class="d-block mb-1"
-          >{{ $t('repeatOn') }}</label>
-          <div class="form-radio">
-            <div class="custom-control custom-radio custom-control-inline">
-              <input
-                id="repeat-dayOfMonth"
-                v-model="repeatsOn"
-                class="custom-control-input"
-                type="radio"
-                value="dayOfMonth"
-                name="repeatsOn"
-              >
-              <label
-                class="custom-control-label"
-                for="repeat-dayOfMonth"
-              >{{ $t('dayOfMonth') }}</label>
-            </div>
-            <div class="custom-control custom-radio custom-control-inline">
-              <input
-                id="repeat-dayOfWeek"
-                v-model="repeatsOn"
-                class="custom-control-input"
-                type="radio"
-                value="dayOfWeek"
-                name="repeatsOn"
-              >
-              <label
-                class="custom-control-label"
-                for="repeat-dayOfWeek"
-              >{{ $t('dayOfWeek') }}</label>
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="!groupId"
-          class="tags-select option mt-3"
-        >
-          <div class="tags-inline form-group row">
-            <label
-              v-once
-              class="col-12 mb-1"
-            >{{ $t('tags') }}</label>
-            <div class="col-12">
-              <select-multi
-                ref="selectTag"
-                :selected-items="task.tags"
-                :all-items="user.tags"
-                :add-new="true"
-                :empty-message="$t('addTags')"
-                :search-placeholder="$t('enterTag')"
-                @changed="task.tags = $event"
-                @addNew="addTag"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="task.type === 'habit' && !groupId"
-          class="option mt-3"
-        >
-          <div class="form-group">
-            <lockable-label
-              :locked="challengeAccessRequired"
-              :text="$t('resetCounter')"
-            />
-            <select-translated-array
-              :disabled="challengeAccessRequired"
-              :items="['daily', 'weekly', 'monthly']"
-              :value="task.frequency"
-              @select="task.frequency = $event"
-            />
-          </div>
-        </div>
-        <div
-          v-if="groupId"
-          class="option group-options mt-3"
-        >
-          <div class="form-group row mt-3 mb-3">
-            <label
-              v-once
-              class="col-10 mb-1"
-            >{{ $t('assignTo') }}</label>
-            <a
-              v-if="assignedMembers.length > 0"
-              class="col-2 text-right mt-1"
-              @click="clearAssignments"
-            >
-              {{ $t('clear') }}
-            </a>
-            <div class="col-12">
-              <select-multi
-                ref="assignMembers"
-                :all-items="membersNameAndId"
-                :empty-message="$t('unassigned')"
-                :pill-invert="true"
-                :search-placeholder="$t('chooseTeamMember')"
-                :selected-items="assignedMembers"
-                @toggle="toggleAssignment($event)"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="advancedSettingsAvailable"
-          class="advanced-settings mt-3"
+        <form
+          @submit.stop.prevent="submit()"
         >
           <div
-            class="advanced-settings-toggle d-flex justify-content-between align-items-center"
-            @click="showAdvancedOptions = !showAdvancedOptions"
+            v-if="task.type === 'reward'"
+            class="option mt-3"
           >
-            <h3>{{ $t('advancedSettings') }}</h3>
-            <div class="toggle-up">
-              <div
-                class="svg-icon"
-                :class="{'toggle-open': showAdvancedOptions}"
-                v-html="icons.chevron"
-              ></div>
+            <div class="form-group">
+              <label
+                v-once
+                class="mb-1"
+              >{{ $t('cost') }}</label>
+              <div class="input-group">
+                <div class="input-group-prepend input-group-icon align-items-center">
+                  <div
+                    class="svg-icon gold"
+                    v-html="icons.gold"
+                  ></div>
+                </div>
+                <input
+                  v-model="task.value"
+                  class="form-control"
+                  type="number"
+                  required="required"
+                  placeholder="Enter a Value"
+                  step="0.01"
+                  min="0"
+                >
+              </div>
             </div>
           </div>
-          <b-collapse
-            id="advancedOptionsCollapse"
-            v-model="showAdvancedOptions"
+          <div
+            v-if="checklistEnabled"
+            class="option mt-3"
           >
-            <div>
+            <checklist
+              :items.sync="task.checklist"
+            />
+          </div>
+          <div
+            v-if="task.type === 'habit'"
+            class="d-flex justify-content-center mt-3"
+          >
+            <button
+              type="button"
+              class="habit-option-container no-transition
+              d-flex flex-column justify-content-center align-items-center"
+              :class="!task.up ? cssClass('habit-control-disabled') : ''"
+              :disabled="challengeAccessRequired"
+              @click="toggleUpDirection()"
+            >
               <div
-                v-if="advancedSettingsShowRestoreStreak"
-                class="option mt-3"
+                class="habit-option-button no-transition
+                d-flex justify-content-center align-items-center mb-2"
+                :class="task.up ? cssClass('bg') : ''"
               >
-                <div class="form-group">
-                  <label
-                    v-once
-                    class="mb-1"
-                  >{{ $t('restoreStreak') }}</label>
-                  <div class="input-group">
-                    <div class="input-group-prepend streak-addon input-group-icon">
-                      <div
-                        v-once
-                        class="svg-icon"
-                        v-html="icons.streak"
-                      ></div>
-                    </div>
-                    <input
-                      v-model="task.streak"
-                      class="form-control"
-                      type="number"
-                      min="0"
-                      required="required"
-                    >
-                  </div>
-                </div>
+                <div
+                  class="habit-option-icon svg-icon no-transition"
+                  :class="task.up ? '' : 'icon-disabled'"
+                  v-html="icons.positive"
+                ></div>
               </div>
               <div
-                v-if="advancedSettingsShowAdjustCounter"
-                class="option mt-3"
+                class="habit-option-label no-transition"
+                :class="task.up ? cssClass('icon') : 'label-disabled'"
               >
-                <div class="form-group">
-                  <label
-                    v-once
-                    class="mb-1"
-                  >{{ $t('adjustCounter') }}</label>
-                  <div
-                    class="row streak-inputs"
-                    :class="{'both': task.up && task.down}"
+                {{ $t('positive') }}
+              </div>
+            </button>
+            <button
+              type="button"
+              class="habit-option-container no-transition
+              d-flex flex-column justify-content-center align-items-center"
+              :class="!task.down ? cssClass('habit-control-disabled') : ''"
+              :disabled="challengeAccessRequired"
+              @click="toggleDownDirection()"
+            >
+              <div
+                class="habit-option-button no-transition
+                d-flex justify-content-center align-items-center mb-2"
+                :class="task.down ? cssClass('bg') : ''"
+              >
+                <div
+                  class="habit-option-icon no-transition svg-icon negative mx-auto"
+                  :class="task.down ? '' : 'icon-disabled'"
+                  v-html="icons.negative"
+                ></div>
+              </div>
+              <div
+                class="habit-option-label no-transition"
+                :class="task.down ? cssClass('icon') : 'label-disabled'"
+              >
+                {{ $t('negative') }}
+              </div>
+            </button>
+          </div>
+          <template
+            v-if="task.type !== 'reward'"
+          >
+            <div class="d-flex mt-3 align-items-center">
+              <lockable-label
+                :locked="challengeAccessRequired"
+                :text="$t('difficulty')"
+              />
+              <information-icon
+                tooltip-id="difficultyHelp"
+                :tooltip="$t('difficultyHelp')"
+              />
+            </div>
+            <select-difficulty
+              :value="task.priority"
+              :disabled="challengeAccessRequired"
+              @select="setDifficulty($event)"
+            />
+          </template>
+          <div
+            v-if="task.type === 'todo' && (!challengeAccessRequired || task.date)"
+            class="option mt-3"
+          >
+            <div class="form-group">
+              <lockable-label
+                :locked="challengeAccessRequired"
+                :text="$t('dueDate')"
+              />
+              <datepicker
+                :date.sync="task.date"
+                :disabled="challengeAccessRequired"
+                :highlighted="calendarHighlights"
+                :clear-button="true"
+              />
+            </div>
+          </div>
+          <div
+            v-if="task.type === 'daily'"
+            class="option mt-3"
+          >
+            <div class="form-group">
+              <lockable-label
+                :locked="challengeAccessRequired"
+                :text="$t('startDate')"
+              />
+              <datepicker
+                :date.sync="task.startDate"
+                :disabled="challengeAccessRequired"
+                :highlighted="calendarHighlights"
+              />
+            </div>
+          </div>
+          <div
+            v-if="task.type === 'daily'"
+            class="option mt-3"
+          >
+            <div class="form-group">
+              <lockable-label
+                :locked="challengeAccessRequired"
+                :text="$t('repeats')"
+              />
+              <select-translated-array
+                :disabled="challengeAccessRequired"
+                :items="['daily', 'weekly', 'monthly', 'yearly']"
+                :value="task.frequency"
+                @select="task.frequency = $event"
+              />
+            </div>
+          </div>
+          <div
+            v-if="task.type === 'daily'"
+            class="option mt-3"
+          >
+            <div class="form-group">
+              <lockable-label
+                :locked="challengeAccessRequired"
+                :text="$t('repeatEvery')"
+              />
+              <div
+                class="input-group-outer"
+                :class="{disabled: challengeAccessRequired}"
+              >
+                <div class="input-group">
+                  <input
+                    v-model="task.everyX"
+                    class="form-control"
+                    type="number"
+                    min="0"
+                    max="9999"
+                    required="required"
+                    :disabled="challengeAccessRequired"
                   >
-                    <div
-                      v-if="task.up"
-                      class="positive"
-                      :class="{'col-6': task.down, 'col-12': !task.down}"
-                    >
-                      <div class="input-group">
-                        <div class="input-group-prepend positive-addon input-group-icon">
-                          <div
-                            v-once
-                            class="svg-icon"
-                            v-html="icons.positive"
-                          ></div>
-                        </div>
-                        <input
-                          v-model="task.counterUp"
-                          class="form-control"
-                          type="number"
-                          min="0"
-                          required="required"
-                        >
-                      </div>
-                    </div>
-                    <div
-                      v-if="task.down"
-                      class="negative"
-                      :class="{'col-6': task.up, 'col-12': !task.up}"
-                    >
-                      <div class="input-group">
-                        <div class="input-group-prepend negative-addon input-group-icon">
-                          <div
-                            v-once
-                            class="svg-icon"
-                            v-html="icons.negative"
-                          ></div>
-                        </div>
-                        <input
-                          v-model="task.counterDown"
-                          class="form-control"
-                          type="number"
-                          min="0"
-                          required="required"
-                        >
-                      </div>
-                    </div>
-                  </div>
                 </div>
-              </div>
-              <div
-                v-if="advancedSettingsShowTaskAlias"
-                class="option mt-3"
-              >
-                <div class="form-group">
-                  <label
-                    v-once
-                    class="mb-1"
-                  >{{ $t('taskAlias') }}
-
-                    <information-icon
-                      tooltip-id="taskAlias"
-                      :tooltip="$t('taskAliasPopover')"
-                    />
-                  </label>
-                  <div class="input-group">
-                    <input
-                      v-model="task.alias"
-                      class="form-control"
-                      :placeholder="$t('taskAliasPlaceholder')"
-                      type="text"
-                    >
-                  </div>
+                <div class="input-group-spaced input-group-text">
+                  {{ repeatSuffix }}
                 </div>
               </div>
             </div>
-          </b-collapse>
-        </div>
-        <div
-          v-if="purpose !== 'create' && !challengeAccessRequired"
-          class="d-flex justify-content-center mt-4 mb-4"
-        >
-          <button
-            class="delete-task-btn d-flex"
-            type="button"
-            @click="destroy()"
+          </div>
+          <div
+            v-if="task.type === 'daily' && task.frequency === 'weekly'"
+            class="option mt-3"
+          >
+            <div class="form-group">
+              <lockable-label
+                :locked="challengeAccessRequired"
+                :text="$t('repeatOn')"
+              />
+              <div class="toggle-group">
+                <toggle-checkbox
+                  v-for="(day, dayNumber) in ['su','m','t','w','th','f','s']"
+                  :key="dayNumber"
+                  :tab-index="dayNumber"
+                  :checked.sync="task.repeat[day]"
+                  :disabled="challengeAccessRequired"
+                  :text="weekdaysMin(dayNumber)"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="task.type === 'daily' && task.frequency === 'monthly'"
+            class="option mt-3"
+          >
+            <label
+              v-once
+              class="d-block mb-1"
+            >{{ $t('repeatOn') }}</label>
+            <div class="form-radio">
+              <div class="custom-control custom-radio custom-control-inline">
+                <input
+                  id="repeat-dayOfMonth"
+                  v-model="repeatsOn"
+                  class="custom-control-input"
+                  type="radio"
+                  value="dayOfMonth"
+                  name="repeatsOn"
+                >
+                <label
+                  class="custom-control-label"
+                  for="repeat-dayOfMonth"
+                >{{ $t('dayOfMonth') }}</label>
+              </div>
+              <div class="custom-control custom-radio custom-control-inline">
+                <input
+                  id="repeat-dayOfWeek"
+                  v-model="repeatsOn"
+                  class="custom-control-input"
+                  type="radio"
+                  value="dayOfWeek"
+                  name="repeatsOn"
+                >
+                <label
+                  class="custom-control-label"
+                  for="repeat-dayOfWeek"
+                >{{ $t('dayOfWeek') }}</label>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="!groupId"
+            class="tags-select option mt-3"
+          >
+            <div class="tags-inline form-group row">
+              <label
+                v-once
+                class="col-12 mb-1"
+              >{{ $t('tags') }}</label>
+              <div class="col-12">
+                <select-multi
+                  ref="selectTag"
+                  :selected-items="task.tags"
+                  :all-items="user.tags"
+                  :add-new="true"
+                  :empty-message="$t('addTags')"
+                  :search-placeholder="$t('enterTag')"
+                  @changed="task.tags = $event"
+                  @addNew="addTag"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="task.type === 'habit' && !groupId"
+            class="option mt-3"
+          >
+            <div class="form-group">
+              <lockable-label
+                :locked="challengeAccessRequired"
+                :text="$t('resetCounter')"
+              />
+              <select-translated-array
+                :disabled="challengeAccessRequired"
+                :items="['daily', 'weekly', 'monthly']"
+                :value="task.frequency"
+                @select="task.frequency = $event"
+              />
+            </div>
+          </div>
+          <div
+            v-if="groupId"
+            class="option group-options mt-3"
+          >
+            <div class="form-group row mt-3 mb-3">
+              <label
+                v-once
+                class="col-10 mb-1"
+              >{{ $t('assignTo') }}</label>
+              <a
+                v-if="assignedMembers.length > 0"
+                class="col-2 text-right mt-1"
+                @click="clearAssignments"
+              >
+                {{ $t('clear') }}
+              </a>
+              <div class="col-12">
+                <select-multi
+                  ref="assignMembers"
+                  :all-items="membersNameAndId"
+                  :empty-message="$t('unassigned')"
+                  :pill-invert="true"
+                  :search-placeholder="$t('chooseTeamMember')"
+                  :selected-items="assignedMembers"
+                  @toggle="toggleAssignment($event)"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="advancedSettingsAvailable"
+            class="advanced-settings mt-3"
           >
             <div
-              v-once
-              class="svg-icon"
-              v-html="icons.destroy"
-            ></div>
-            <span class="delete-text mt-1">
-              {{ $t('deleteTaskType', { type: $t(task.type) }) }}
-            </span>
-          </button>
-        </div>
-        <div
-          v-if="purpose === 'create'"
-          slot="modal-footer"
-          class="task-modal-footer d-flex justify-content-center align-items-center mt-4 mb-4"
-        >
-          <button
-            class="btn btn-primary btn-footer
-            d-flex align-items-center justify-content-center"
-            :class="{'btn-disabled': !canSave}"
-            type="button"
-            @click="submit()"
+              class="advanced-settings-toggle d-flex justify-content-between align-items-center"
+              @click="showAdvancedOptions = !showAdvancedOptions"
+            >
+              <h3>{{ $t('advancedSettings') }}</h3>
+              <div class="toggle-up">
+                <div
+                  class="svg-icon"
+                  :class="{'toggle-open': showAdvancedOptions}"
+                  v-html="icons.chevron"
+                ></div>
+              </div>
+            </div>
+            <b-collapse
+              id="advancedOptionsCollapse"
+              v-model="showAdvancedOptions"
+            >
+              <div>
+                <div
+                  v-if="advancedSettingsShowRestoreStreak"
+                  class="option mt-3"
+                >
+                  <div class="form-group">
+                    <label
+                      v-once
+                      class="mb-1"
+                    >{{ $t('restoreStreak') }}</label>
+                    <div class="input-group">
+                      <div class="input-group-prepend streak-addon input-group-icon">
+                        <div
+                          v-once
+                          class="svg-icon"
+                          v-html="icons.streak"
+                        ></div>
+                      </div>
+                      <input
+                        v-model="task.streak"
+                        class="form-control"
+                        type="number"
+                        min="0"
+                        required="required"
+                      >
+                    </div>
+                  </div>
+                </div>
+                <div
+                  v-if="advancedSettingsShowAdjustCounter"
+                  class="option mt-3"
+                >
+                  <div class="form-group">
+                    <label
+                      v-once
+                      class="mb-1"
+                    >{{ $t('adjustCounter') }}</label>
+                    <div
+                      class="row streak-inputs"
+                      :class="{'both': task.up && task.down}"
+                    >
+                      <div
+                        v-if="task.up"
+                        class="positive"
+                        :class="{'col-6': task.down, 'col-12': !task.down}"
+                      >
+                        <div class="input-group">
+                          <div class="input-group-prepend positive-addon input-group-icon">
+                            <div
+                              v-once
+                              class="svg-icon"
+                              v-html="icons.positive"
+                            ></div>
+                          </div>
+                          <input
+                            v-model="task.counterUp"
+                            class="form-control"
+                            type="number"
+                            min="0"
+                            required="required"
+                          >
+                        </div>
+                      </div>
+                      <div
+                        v-if="task.down"
+                        class="negative"
+                        :class="{'col-6': task.up, 'col-12': !task.up}"
+                      >
+                        <div class="input-group">
+                          <div class="input-group-prepend negative-addon input-group-icon">
+                            <div
+                              v-once
+                              class="svg-icon"
+                              v-html="icons.negative"
+                            ></div>
+                          </div>
+                          <input
+                            v-model="task.counterDown"
+                            class="form-control"
+                            type="number"
+                            min="0"
+                            required="required"
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  v-if="advancedSettingsShowTaskAlias"
+                  class="option mt-3"
+                >
+                  <div class="form-group">
+                    <label
+                      v-once
+                      class="mb-1"
+                    >{{ $t('taskAlias') }}
+
+                      <information-icon
+                        tooltip-id="taskAlias"
+                        :tooltip="$t('taskAliasPopover')"
+                      />
+                    </label>
+                    <div class="input-group">
+                      <input
+                        v-model="task.alias"
+                        class="form-control"
+                        :placeholder="$t('taskAliasPlaceholder')"
+                        type="text"
+                      >
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </b-collapse>
+          </div>
+          <div
+            v-if="purpose !== 'create' && !challengeAccessRequired"
+            class="d-flex justify-content-center mt-4 mb-4"
           >
-            {{ $t('create') }}
-          </button>
-        </div>
-        <div
-          v-else
-          class="task-modal-footer mt-4"
-        >
-        </div>
-      </form>
-    </div>
+            <button
+              class="delete-task-btn d-flex"
+              type="button"
+              @click="destroy()"
+            >
+              <div
+                v-once
+                class="svg-icon"
+                v-html="icons.destroy"
+              ></div>
+              <span class="delete-text mt-1">
+                {{ $t('deleteTaskType', { type: $t(task.type) }) }}
+              </span>
+            </button>
+          </div>
+          <div
+            v-if="purpose === 'create'"
+            slot="modal-footer"
+            class="task-modal-footer d-flex justify-content-center align-items-center mt-4 mb-4"
+          >
+            <button
+              class="btn btn-primary btn-footer
+            d-flex align-items-center justify-content-center"
+              :class="{'btn-disabled': !canSave}"
+              type="button"
+              @click="submit()"
+            >
+              {{ $t('create') }}
+            </button>
+          </div>
+          <div
+            v-else
+            class="task-modal-footer mt-4"
+          >
+          </div>
+        </form>
+      </div>
     </b-modal>
     <deleteTaskConfirmModal />
   </div>
diff --git a/website/client/src/components/ui/toggleSwitch.vue b/website/client/src/components/ui/toggleSwitch.vue
index f59c1d2fcf..bec91758d8 100644
--- a/website/client/src/components/ui/toggleSwitch.vue
+++ b/website/client/src/components/ui/toggleSwitch.vue
@@ -25,8 +25,8 @@
           type="checkbox"
           :checked="isChecked"
           :value="value"
-          @change="handleChange"
           :disabled="disabled"
+          @change="handleChange"
         >
         <label
           class="toggle-switch-label"
diff --git a/website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue b/website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue
index 66866f97cc..d1af19ffd6 100644
--- a/website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue
+++ b/website/client/src/pages/settings/siteDataRows/privacyPreferencesRow.vue
@@ -1,7 +1,8 @@
 <template>
   <tr>
-    <td colspan="3"
+    <td
       v-if="!mixinData.inlineSettingMixin.modalVisible"
+      colspan="3"
     >
       <div class="d-flex justify-content-between align-items-center">
         <h3
@@ -18,8 +19,9 @@
         </a>
       </div>
     </td>
-    <td colspan="3"
+    <td
       v-if="mixinData.inlineSettingMixin.modalVisible"
+      colspan="3"
     >
       <h3
         v-once
@@ -59,8 +61,8 @@
               {{ $t('performanceAnalytics') }}
             </label>
             <toggle-switch
-              class="mb-auto"
               v-model="user.preferences.analyticsConsent"
+              class="mb-auto"
               @change="prefToggled()"
             />
           </div>
@@ -151,14 +153,14 @@ import { mapState } from '@/libs/store';
 import alert from '@/assets/svg/for-css/alert.svg?raw';
 
 export default {
-  mixins: [
-    GenericUserPreferencesMixin,
-    InlineSettingMixin,
-  ],
   components: {
     SaveCancelButtons,
     ToggleSwitch,
   },
+  mixins: [
+    GenericUserPreferencesMixin,
+    InlineSettingMixin,
+  ],
   data () {
     return {
       icons: Object.freeze({