New client misc with some more misc (#8929)

* Added markdown

* Added styles and option for debug menu

* Added sm icons

* Began styling autocomplete

* Added autocomplete styles

* Added more challenge categories

* Updated challenge participants modal

* Fixed challenge list updating without reload

* Added close and delete challenge

* Fixed form placeholder, adjusted desc style and fixed create button style

* Fixed faq collapsing and style

* Fixed repeating ending

* Fixed delete account

* Fixed party fetch issue

* Fixed scope issue

* Added member count filters

* Fixed create button style

* Fixed badge color display

* Updated tavern styles

* Fixed some party styles

* Updated login styles

* Fixed login redirect

* Fixed initial login process

* Added done local

website/client/components/appFooter.vue

@@ -62,11 +62,14 @@
           .col-6
             h3 Social
             .social-circle
-              a(href='https://twitter.com/habitica', target='_blank') Twitter
+              a(href='https://twitter.com/habitica', target='_blank')
+                .social-icon.svg-icon(v-html='icons.twitter')
             .social-circle
-              a(href='https://www.instagram.com/habitica/', target='_blank') Instagram
+              a(href='https://www.instagram.com/habitica/', target='_blank')
+                .social-icon.svg-icon(v-html='icons.instagram')
             .social-circle
-              a(href='https://www.facebook.com/Habitica', target='_blank') Facebook
+              a(href='https://www.facebook.com/Habitica', target='_blank')
+                .social-icon.facebook.svg-icon(v-html='icons.facebook')
         .row
           .col-10
             | We’re an open source project that depends on our users for support. The money you donate helps us keep the servers running, maintain a small staff, develop new features, and provide incentives for our volunteers.
@@ -77,32 +80,32 @@
     .row
       .col-4
         | © 2017 Habitica. All rights reserved.
+        .debug.float-left(v-if='!IS_PRODUCTION')
+          button.btn.btn-primary(@click='debugMenuShown = !debugMenuShown') Toggle Debug Menu
+          .debug-group(v-if='debugMenuShown')
+            a.btn.btn-default(@click='setHealthLow()') Health = 1
+            a.btn.btn-default(@click='addMissedDay(1)') +1 Missed Day
+            a.btn.btn-default(@click='addMissedDay(2)') +2 Missed Days
+            a.btn.btn-default(@click='addMissedDay(8)') +8 Missed Days
+            a.btn.btn-default(@click='addMissedDay(32)') +32 Missed Days
+            a.btn.btn-default(@click='addTenGems()') +10 Gems
+            a.btn.btn-default(@click='addHourglass()') +1 Mystic Hourglass
+            a.btn.btn-default(@click='addGold()') +500GP
+            a.btn.btn-default(@click='plusTenHealth()') + 10HP
+            a.btn.btn-default(@click='addMana()') +MP
+            a.btn.btn-default(@click='addLevelsAndGold()') +Exp +GP +MP
+            a.btn.btn-default(@click='addOneLevel()') +1 Level
+            a.btn.btn-default(@click='addQuestProgress()' tooltip="+1000 to boss quests. 300 items to collection quests") Quest Progress Up
+            a.btn.btn-default(@click='makeAdmin()') Make Admin
+            a.btn.btn-default(@click='openModifyInventoryModal()') Modify Inventory
       .col-4.text-center
         .logo.svg-icon(v-html='icons.gryphon')
       .col-4.text-right
         span Privacy Policy
         span Terms of Use
-    .row
-      h4 Debug
-      .btn-group-vertical
-        a.btn.btn-default(@click='setHealthLow()') Health = 1
-        a.btn.btn-default(@click='addMissedDay(1)') +1 Missed Day
-        a.btn.btn-default(@click='addMissedDay(2)') +2 Missed Days
-        a.btn.btn-default(@click='addMissedDay(8)') +8 Missed Days
-        a.btn.btn-default(@click='addMissedDay(32)') +32 Missed Days
-        a.btn.btn-default(@click='addTenGems()') +10 Gems
-        a.btn.btn-default(@click='addHourglass()') +1 Mystic Hourglass
-        a.btn.btn-default(@click='addGold()') +500GP
-        a.btn.btn-default(@click='plusTenHealth()') + 10HP
-        a.btn.btn-default(@click='addMana()') +MP
-        a.btn.btn-default(@click='addLevelsAndGold()') +Exp +GP +MP
-        a.btn.btn-default(@click='addOneLevel()') +1 Level
-        a.btn.btn-default(@click='addQuestProgress()' tooltip="+1000 to boss quests. 300 items to collection quests") Quest Progress Up
-        a.btn.btn-default(@click='makeAdmin()') Make Admin
-        a.btn.btn-default(@click='openModifyInventoryModal()') Modify Inventory
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
   footer {
     background-color: #e1e0e3;
     height: 376px;
@@ -133,6 +136,17 @@
     background-color: #c3c0c7;
     display: inline-block;
     margin-right: 1em;
+
+    .social-icon {
+      color: #e1e0e3;
+      width: 16px;
+      margin: 0 auto;
+      margin-top: 1em;
+    }
+
+    .svg-icon.facebook svg {
+      height: 20px;
+    }
   }
 
   .logo.svg-icon {
@@ -140,17 +154,29 @@
     margin: 0 auto;
     color: #c3c0c7;
   }
+
+  .debug-group {
+    position: absolute;
+    background: #fff;
+    top: -300px;
+    border-radius: 2px;
+    padding: 2em;
+  }
 </style>
 
 <script>
 import axios from 'axios';
 import moment from 'moment';
 import { mapState } from 'client/libs/store';
+
 import gryphon from 'assets/svg/gryphon.svg';
+import twitter from 'assets/svg/twitter.svg';
+import facebook from 'assets/svg/facebook.svg';
+import instagram from 'assets/svg/instagram.svg';
 
 import modifyInventory from './modifyInventory';
 
-// const IS_PRODUCTION = process.env.NODE_ENV === 'production'; // eslint-disable-line no-process-env
+const IS_PRODUCTION = process.env.NODE_ENV === 'production'; // eslint-disable-line no-process-env
 
 export default {
   components: {
@@ -160,7 +186,12 @@ export default {
     return {
       icons: Object.freeze({
         gryphon,
+        twitter,
+        facebook,
+        instagram,
       }),
+      debugMenuShown: false,
+      IS_PRODUCTION,
     };
   },
   computed: {
@@ -190,7 +221,6 @@ export default {
       // @TODO: Sync user?
     },
     async addTenGems () {
-      // @TODO: User.addTenGems();
       await axios.post('/api/v3/debug/add-ten-gems');
       // @TODO: Notification.text('+10 Gems!');
       this.user.balance += 2.5;