fix(sunset): update layouts and links

website/client/src/components/404.vue

@@ -3,7 +3,7 @@
     <div class="col-6 text-center mx-auto mb-5">
       <!-- @TODO i18n. How to setup the strings with the router-link inside?-->
       <img
-        class="my-5"
+        :class="retiredChatPage ? 'mt-5' : 'image-404'"
         src="~@/assets/images/404.png"
       >
       <div v-if="retiredChatPage">
@@ -17,7 +17,7 @@
         <h1>
           Sometimes even the bravest adventurer gets lost.
         </h1>
-        <p>
+        <p class="mb-0">
           Looks like this link is broken or the page may have moved, sorry!
         </p>
         <p>
@@ -56,14 +56,20 @@ export default {
 <style lang="scss" scoped>
 @import '~@/assets/scss/colors.scss';
 
-h1 {
+h1, .static-wrapper h1 {
   color: $purple-200;
+  line-height: 1.33;
+  margin-top: 3rem;
   margin-bottom: 1rem;
 }
 
 p {
-  font-size: 18px;
+  font-size: 16px;
-  line-height: 1.77;
+  line-height: 1.75;
+}
+
+.image-404 {
+  margin-top: 104px;
 }
 
 </style>

website/client/src/components/static/contact.vue

@@ -35,8 +35,8 @@
           : 
           <a
             target="_blank"
-            href="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a"
+            @click.prevent="openBugReportModal(true)"
-          >Habitica Help guild</a>
+          > {{ $t('askQuestion') }}</a>
           <br>
           {{ $t('businessInquiries') }}
           &colon;&nbsp;

website/client/src/components/static/overview.vue

@@ -12,12 +12,15 @@
           <p v-markdown="$t(`webStep${step}Text`, stepVars[step])"></p>
           <hr>
         </div>
-        <p
+        <p>
-          v-markdown="$t('overviewQuestions', {
+          <span v-html="$t('overviewQuestionsRevised')"></span>
-            faqUrl: '/static/faq/',
+          <a
-            helpGuildUrl: '/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a'
+            target="_blank"
-          })"
+            @click.prevent="openBugReportModal(true)"
-        ></p>
+          >
+            {{ $t('askQuestion') }}
+          </a>
+        </p>
       </div>
     </div>
   </div>
@@ -35,11 +38,13 @@
 
 <script>
 import markdownDirective from '@/directives/markdown';
+import reportBug from '@/mixins/reportBug.js';
 
 export default {
   directives: {
     markdown: markdownDirective,
   },
+  mixins: [reportBug],
   data () {
     return {
       stepsNum: ['1', '2', '3'],

website/common/locales/en/overview.json

@@ -10,5 +10,5 @@
   "step3": "Step 3: Customize and Explore Habitica",
   "webStep3Text": "Once you're familiar with the basics, you can get even more out of Habitica with these nifty features:\n * Organize your Tasks with [tags](https://habitica.fandom.com/wiki/Tags) (edit a Task to add them).\n * Customize your [Avatar](https://habitica.fandom.com/wiki/Avatar) by clicking the user icon in the upper-right corner.\n * Buy your [Equipment](https://habitica.fandom.com/wiki/Equipment) under Rewards or from the [Shops](<%= shopUrl %>), and change it under [Inventory > Equipment](<%= equipUrl %>).\n * Connect with other users via the [Tavern](https://habitica.fandom.com/wiki/Tavern).\n * Hatch [Pets](https://habitica.fandom.com/wiki/Pets) by collecting [Eggs](https://habitica.fandom.com/wiki/Eggs) and [Hatching Potions](https://habitica.fandom.com/wiki/Hatching_Potions). [Feed](https://habitica.fandom.com/wiki/Food) them to create [Mounts](https://habitica.fandom.com/wiki/Mounts).\n * At level 10: Choose a particular [Class](https://habitica.fandom.com/wiki/Class_System) and then use Class-specific [skills](https://habitica.fandom.com/wiki/Skills) (levels 11 to 14).\n * Form a Party with your friends (by clicking [Party](<%= partyUrl %>) in the navigation bar) to stay accountable and earn a Quest scroll.\n * Defeat monsters and collect objects on [Quests](https://habitica.fandom.com/wiki/Quests) (you will be given a quest at level 15).",
 
-  "overviewQuestions": "Have questions? Check out the [FAQ](<%= faqUrl %>)! If your question isn't mentioned there, you can ask for further help in the [Habitica Help guild](<%= helpGuildUrl %>).\n\nGood luck with your tasks!"
+  "overviewQuestionsRevised": "Have questions? Check out the <a href='/static/faq'>FAQ</a>! If your question isn't mentioned there, you can ask for further help using this form: "
 }