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;
-  line-height: 1.77;
+  font-size: 16px;
+  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"
-          >Habitica Help guild</a>
+            @click.prevent="openBugReportModal(true)"
+          > {{ $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
-          v-markdown="$t('overviewQuestions', {
-            faqUrl: '/static/faq/',
-            helpGuildUrl: '/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a'
-          })"
-        ></p>
+        <p>
+          <span v-html="$t('overviewQuestionsRevised')"></span>
+          <a
+            target="_blank"
+            @click.prevent="openBugReportModal(true)"
+          >
+            {{ $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'],