Sept 20 fixes (#9054)

* Fixed start quest from items

* More style fixes

* Changed gem modal to 20

* Removed unused image

* Added initial header styles for home page

website/client/components/groups/startQuestModal.vue

@@ -31,8 +31,6 @@
     }
   }
 
-
-
   .quest-details {
     margin: 0 auto;
     text-align: left;
@@ -112,8 +110,6 @@ import twitterIcon from 'assets/svg/twitter.svg';
 import starIcon from 'assets/svg/star.svg';
 import goldIcon from 'assets/svg/gold.svg';
 import difficultyStarIcon from 'assets/svg/difficulty-star.svg';
-
-
 import questDialogDrops from '../shops/quests/questDialogDrops';
 import questDialogContent from '../shops/quests/questDialogContent';
 
@@ -166,11 +162,14 @@ export default {
         partySize: this.group.memberCount,
       });
 
+      let groupId = this.group._id || this.user.party._id;
+
       const key = this.selectedQuest;
-      const response = await this.$store.dispatch('guilds:inviteToQuest', {groupId: this.group._id, key});
+      const response = await this.$store.dispatch('guilds:inviteToQuest', {groupId, key});
       const quest = response.data.data;
 
-      this.$store.state.party.data.quest = quest;
+      if (this.$store.state.party.data) this.$store.state.party.data.quest = quest;
+
       this.$root.$emit('hide::modal', 'start-quest-modal');
     },
   },

website/client/components/payments/buyGemsModal.vue

@@ -43,7 +43,7 @@
               .card-img-top
                 .mx-auto(v-html='icons.twentyOneGems', style='"height: 55px; width: 47.5px; margin-top: 1.85em;"')
               .card-body
-                .gem-count 21
+                .gem-count 20
                 .gem-text {{ $t('gems') }}
                 .divider
                 button.btn.btn-primary(@click='gemAmount = 21') {{gemAmount === 21 ? $t('selected') : '$5.00'}}

website/client/components/static/header.vue

@@ -37,7 +37,8 @@
           to='/static/contact',
         )
           a.nav-link(v-once) {{ $t('contactUs') }}
-      button.btn.btn-primary.pull-right(@click='playButtonClick()') {{ $t('playButtonFull') }}
+      button.btn.btn-primary.pull-right(@click='playButtonClick()', v-if='$route.name !== "home"') {{ $t('playButtonFull') }}
+      a.btn.btn-primary.login-button.pull-right(href='/login', v-else) {{ $t('login') }}
 </template>
 
 <style lang='scss' scoped>

website/client/components/static/home.vue

@@ -216,7 +216,6 @@
 
   #intro-signup {
     background-image: url('~client/assets/svg/for-css/confetti.svg');
-    margin-top: 4em;
 
     img {
       margin: 0 auto;
@@ -240,12 +239,13 @@
       padding: .5em;
       background: transparent;
       margin-right: .5em;
-      color: #fff;
+      color: #bda8ff;
     }
 
     .social-button:hover {
       cursor: pointer;
       border-color: #fff;
+      color: #fff;
     }
 
     .social-icon {
@@ -303,6 +303,12 @@
       border-color: #432874;
       color: $purple-400;
       border: solid 2px transparent;
+      transition-timing-function: ease;
+      transition: .5s;
+    }
+
+    .input-valid {
+      color: #fff;
     }
 
     input:focus {

website/client/components/static/staticWrapper.vue

@@ -1,6 +1,6 @@
 <template lang='pug'>
   div
-    static-header
+    static-header(:class='{"home-header": $route.name === "home"}')
 
     .static-wrapper
       router-view
@@ -14,6 +14,44 @@
         .midground_foreground_extended2
 </template>
 
+<style lang='scss'>
+  .home-header {
+    background: #6133b4 !important;
+    position: static;
+    box-shadow: none !important;
+    height: 100px !important;
+    padding-left: 5em !important;
+    padding-right: 5em !important;
+
+    .logo.svg-icon {
+      width: 200px !important;
+    }
+
+    .nav-item a {
+      font-size: 14px !important;
+      color: #d5c8ff !important;
+      padding-top: 2.8em !important;
+    }
+
+    .nav-item a:hover {
+      background: transparent !important;
+      color: #fff !important;
+    }
+
+    .login-button {
+      padding-right: 1em;
+      margin-top: 1.7em !important;
+      border-radius: 2px;
+      background-color: #b288ff;
+      box-shadow: 0 4px 4px 0 rgba(26, 24, 29, 0.16), 0 1px 8px 0 rgba(26, 24, 29, 0.12) !important;
+    }
+
+    .login-button:hover {
+      background-color: #b288ff;
+    }
+  }
+</style>
+
 <style lang='scss'>
   @import '~client/assets/scss/colors.scss';
 

website/client/mixins/payments.js

@@ -62,7 +62,7 @@ export default {
         amount,
         name: 'Habitica',
         description: sub ? this.$t('subscribe') : this.$t('checkout'),
-        image: '/apple-touch-icon-144-precomposed.png',
+        // image: '/apple-touch-icon-144-precomposed.png',
         panelLabel: sub ? this.$t('subscribe') : this.$t('checkout'),
         async token (res) {
           let url = '/stripe/checkout?a=a'; // just so I can concat &x=x below