From 9ef13dad68cfff646b1d937c11d3aa56308b4fec Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Thu, 25 May 2023 12:25:08 -0400
Subject: [PATCH] feat(content): starting add styling, string updates

---
 .../src/components/static/chatSunsetFaq.vue   | 218 ++++++++++++++----
 website/common/locales/en/faq.json            |  16 +-
 2 files changed, 179 insertions(+), 55 deletions(-)

diff --git a/website/client/src/components/static/chatSunsetFaq.vue b/website/client/src/components/static/chatSunsetFaq.vue
index 508c7cd9ef..4dab7ba39e 100644
--- a/website/client/src/components/static/chatSunsetFaq.vue
+++ b/website/client/src/components/static/chatSunsetFaq.vue
@@ -1,85 +1,209 @@
 <template>
   <div class="container-fluid">
     <div class="row">
-      <h1>{{ $t('sunsetFaqTitle') }}</h1>
-      <p v-html="$t('sunsetFaqPara1')"></p>  <!-- there's html in here -->
-      <p>{{ $t('sunsetFaqPara2') }}></p>
-      <p>{{ $t('sunsetFaqPara3') }}></p>
-      <p>{{ $t('sunsetFaqPara4') }}></p>
-      <p>{{ $t('sunsetFaqPara5') }}></p>
+      <div>
+        <h1>{{ $t('sunsetFaqTitle') }}</h1>
+      </div>
+      <div>
+        <p v-html="$t('sunsetFaqPara1')"></p>  <!-- there's html in here -->
+        <p>{{ $t('sunsetFaqPara2') }}</p>
+        <p>{{ $t('sunsetFaqPara3') }}</p>
+        <p>{{ $t('sunsetFaqPara4') }}</p>
+        <p>{{ $t('sunsetFaqPara5') }}</p>
+      </div>
 
-      <!-- which services are ending -->
-      <h2>{{ $t('sunsetFaqHeader1') }}</h2>
-      <p>{{ $t('sunsetFaqPara6') }}</p>
+      <!-- Which services are ending -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader1') }}
+        </h3>
+      </div>
+      <div>
+        <p v-html="$t('sunsetFaqPara6')"></p>
+      </div>
 
       <!-- Why are tavern and guild ending? -->
-      <h2>{{ $t('sunsetFaqHeader2') }}</h2>
-      <ul>
-        <li>{{ $t('sunsetFaqList1') }}</li>
-        <li>{{ $t('sunsetFaqList2') }}</li>
-        <li>{{ $t('sunsetFaqList3') }}</li>
-      </ul>
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader2') }}
+        </h3>
+      </div>
+      <div>
+        <ul>
+          <li>{{ $t('sunsetFaqList1') }}</li>
+          <li>{{ $t('sunsetFaqList2') }}</li>
+          <li>{{ $t('sunsetFaqList3') }}</li>
+        </ul>
+      </div>
 
       <!-- Can I still talk to my party/group members? -->
-      <h2>{{ $t('sunsetFaqHeader3') }}</h2>
-      <p>{{ $t('sunsetFaqPara7') }}</p>
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader3') }}
+        </h3>
+      </div>
+      <div>
+        <p>{{ $t('sunsetFaqPara7') }}</p>
+      </div>
 
       <!-- Pausing dailies -->
-      <h2>{{ $t('sunsetFaqHeader4') }}</h2>
-      <p>{{ $t('sunsetFaqPara8') }}</p>
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader4') }}
+        </h3>
+      </div>
+      <div>
+        <p>{{ $t('sunsetFaqPara8') }}</p>
+      </div>
 
       <!-- Accessing group plans -->
-      <h2>{{ $t('sunsetFaqHeader5') }}</h2>
-      <p v-html="$t('sunsetFaqPara9')"></p> <!-- there's html in here -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader5') }}
+        </h3>
+      </div>
+      <div>
+        <p v-html="$t('sunsetFaqPara9')"></p> <!-- there's html in here -->
+      </div>
 
       <!-- Can I access guild chats? -->
-      <h2>{{ $t('sunsetFaqHeader6') }}</h2>
-      <p>{{ $t('sunsetFaqPara10') }}</p>
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader6') }}
+        </h3>
+      </div>
+      <div>
+        <p>{{ $t('sunsetFaqPara10') }}</p>
+      </div>
 
       <!-- How can players find groups? -->
-      <h2>{{ $t('sunsetFaqHeader7') }}</h2>
-      <p>{{ $t('sunsetFaqPara11') }}</p>
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader7') }}
+        </h3>
+      </div>
+      <div>
+        <p>{{ $t('sunsetFaqPara11') }}</p>
+      </div>
 
       <!-- What about contributors? -->
-      <h2>{{ $t('sunsetFaqHeader8') }}</h2>
-      <p v-html="$t('sunsetFaqPara12')"></p> <!-- there's html in here -->
-      <p v-html="$t('sunsetFaqPara13')"></p> <!-- there's html in here -->
-      <p v-html="$t('sunsetFaqPara14')"></p> <!-- there's html in here -->
-      <p v-html="$t('sunsetFaqPara15')"></p> <!-- there's html in here -->
-      <p v-html="$t('sunsetFaqPara16')"></p> <!-- there's html in here -->
-      <p v-html="$t('sunsetFaqPara17')"></p> <!-- there's html in here -->
-      <p v-html="$t('sunsetFaqPara18')"></p> <!-- there's html in here -->
-      <p v-html="$t('sunsetFaqPara19')"></p> <!-- there's html in here -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader8') }}
+        </h3>
+      </div>
+      <div>
+        <p v-html="$t('sunsetFaqPara12')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara13')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara14')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara15')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara16')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara17')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara18')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara19')"></p> <!-- there's html in here -->
+      </div>
 
       <!-- Challenges -->
-      <h2>{{ $t('sunsetFaqHeader9') }}</h2>
-      <ul>
-        <li>{{ $t('sunsetFaqList4') }}</li>
-        <li>{{ $t('sunsetFaqList5') }}</li>
-        <li>{{ $t('sunsetFaqList6') }}</li>
-        <li>{{ $t('sunsetFaqList7') }}</li>
-      </ul>
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader9') }}
+        </h3>
+      </div>
+      <div>
+        <ul>
+          <li>{{ $t('sunsetFaqList4') }}</li>
+          <li>{{ $t('sunsetFaqList5') }}</li>
+          <li>{{ $t('sunsetFaqList6') }}</li>
+          <li>{{ $t('sunsetFaqList7') }}</li>
+        </ul>
+      </div>
 
       <!-- Questions about how to use Habitica -->
-      <h2>{{ $t('sunsetFaqHeader10') }}</h2>
-      <li v-html="$t('sunsetFaqList8')"></li> <!-- there's html in here -->
-      <li v-html="$t('sunsetFaqList9')"></li> <!-- there's html in here -->
-      <li v-html="$t('sunsetFaqList10')"></li> <!-- there's html in here -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader10') }}
+        </h3>
+      </div>
+      <div>
+        <li v-html="$t('sunsetFaqList8')"></li> <!-- there's html in here -->
+        <li v-html="$t('sunsetFaqList9')"></li> <!-- there's html in here -->
+        <li v-html="$t('sunsetFaqList10')"></li> <!-- there's html in here -->
+      </div>
 
       <!-- Community Guidelines and TOS -->
-      <h2>{{ $t('sunsetFaqHeader11') }}</h2>
-      <p v-html="$t('sunsetFaqPara20')"></p>
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader11') }}
+        </h3>
+      </div>
+      <div>
+        <p v-html="$t('sunsetFaqPara20')"></p>
+      </div>
     </div>
+
+    <!-- sidebar -->
+    <!-- staff -->
+    <div class="col-12 col-sm-4 sidebar">
+      <div class="section">
+        <div class="px-4">
+          <sidebar-section :title="$t('staff')" />
+          <div class="row">
+            <div
+              v-for="user in staff"
+              :key="user.uuid"
+              class="col-6 staff"
+              :class="{
+                staff: user.type === 'Staff',}"
+            >
+              <div>
+                <router-link
+                  class="title"
+                  :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
+                >
+                  {{ user.name }}
+                </router-link>
+                <div
+                  v-if="user.type === 'Staff'"
+                  class="svg-icon staff-icon"
+                  v-html="icons.tierStaff"
+                ></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <!-- final div! -->
   </div>
 </template>
 
 <style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+  @import '~@/assets/scss/mixins.scss';
 
+  .headings {
+    font-size: 16px; // for some reason, em doesn't give the desired result
+    font-weight: 400;
+    line-height: 1.75;
+    color: $purple-200;
+  }
+
+  .sidebar {
+    background-color: $gray-600;
+    padding: 0 0 0 0;
+  }
 
 </style>
 
 <script>
+import sidebarSection from '../sidebarSection';
+
 export default {
+  componenets: {
+    sidebarSection,
+  },
 
   async mounted () {
     this.$store.dispatch('common:setTitle', {
diff --git a/website/common/locales/en/faq.json b/website/common/locales/en/faq.json
index 687cd163f4..a444d1bf5a 100644
--- a/website/common/locales/en/faq.json
+++ b/website/common/locales/en/faq.json
@@ -156,7 +156,7 @@
   "sunsetFaqPara8": "This feature has been relocated to Settings. The functions of Pause Damage will not be affected by the end of the Tavern and Guild services.",
 
   "sunsetFaqHeader5": "How will I access my Group Plan if it’s an upgraded Guild?",
-  "sunsetFaqPara9": "<strong>Browser</strong>: Click on the Group Plan navigation in the top bar.\n\n<strong>Android:</strong> Tap your name at the top of the screen when viewing a task list to switch to your shared tasks. To access your chat, tap the chat icon in the header on that screen.\n\n<strong>iOS</strong>: Tap the name of your Group Plan in the menu.",
+  "sunsetFaqPara9": "<strong>Browser</strong>: Click on the Group Plan navigation in the top bar.<br /><strong>Android:</strong> Tap your name at the top of the screen when viewing a task list to switch to your shared tasks. To access your chat, tap the chat icon in the header on that screen.<br /><strong>iOS</strong>: Tap the name of your Group Plan in the menu.",
 
   "sunsetFaqHeader6": "Will players be able to retrieve their Guild chats after the services end?",
   "sunsetFaqPara10": "Players will not be able to retrieve chat data from the Tavern and Guilds after the services end.",
@@ -166,13 +166,13 @@
 
   "sunsetFaqHeader8": "How does this affect Habitica contributors?",
   "sunsetFaqPara12": "As an open-source project, we welcome and encourage many types of contributions. To show our appreciation we will be sending the Heroic gear set to everyone that has a contributor tier as of <strong>[date]</strong>. When Tavern and Guild services end, there will be some changes to contributions as well. You can read more about the plan for each type below.",
-  "sunsetFaqPara13": "<strong>Blacksmiths</strong>\n\nWe still welcome open-source help through our GitHub and will continue awarding tiers for qualifying contributions. Blacksmith collaboration and discussion has largely taken place over GitHub and that will continue.",
-  "sunsetFaqPara14": "<strong>Linguists</strong>\n\nWe continue to welcome help with translating the apps and website and will still be awarding contributor tiers for qualifying contributions. Learn more about our updated procedures for translation here.",
-  "sunsetFaqPara15": "<strong>Challengers</strong>\n\nThe team encourages you to continue creating high quality Challenges. We would like to explore new ways of promoting Challenge discoverability in and outside of the app.",
-  "sunsetFaqPara16": "<strong>Socialites</strong>\n\nThis type of contribution will be ending with the Tavern and Guild discontinuation. We are extremely grateful for the work that our friendly and helpful players have done answering questions in our chat spaces.",
-  "sunsetFaqPara17": "<strong>Comrades</strong>\n\nScripts and add-ons are helpful to a shrinking section of our user base as the mobile apps increasingly become the only way that most users access Habitica. Contributors wishing to create 3rd party tools to customize their Habitica experience can continue doing so, but we will no longer be awarding Comrade tiers as we focus on contributions that enhance Habitica in a way that is accessible to our player base as a whole.",
-  "sunsetFaqPara18": "<strong>Artisans</strong>\n\nWe are discontinuing artisan contributions. Most art production has already been moved in-house to keep up with our content releases. We are deeply grateful for the fantastic art made over the years by our contributor community.",
-  "sunsetFaqPara19": "<strong>Wiki Wizards</strong>\n\nThe Habitica Wiki is a wonderful tool created by players for players that has helped so many. We continue to support this effort, but will no longer be tracking or offering tiers for Wiki editing as we shift our focus towards Linguist, Blacksmith, and Challenger contributions within Habitica.",
+  "sunsetFaqPara13": "<strong>Blacksmiths</strong><br />We still welcome open-source help through our GitHub and will continue awarding tiers for qualifying contributions. Blacksmith collaboration and discussion has largely taken place over GitHub and that will continue.",
+  "sunsetFaqPara14": "<strong>Linguists</strong><br />We continue to welcome help with translating the apps and website and will still be awarding contributor tiers for qualifying contributions. Learn more about our updated procedures for translation here.",
+  "sunsetFaqPara15": "<strong>Challengers</strong><br />The team encourages you to continue creating high quality Challenges. We would like to explore new ways of promoting Challenge discoverability in and outside of the app.",
+  "sunsetFaqPara16": "<strong>Socialites</strong><br />This type of contribution will be ending with the Tavern and Guild discontinuation. We are extremely grateful for the work that our friendly and helpful players have done answering questions in our chat spaces.",
+  "sunsetFaqPara17": "<strong>Comrades</strong><br />Scripts and add-ons are helpful to a shrinking section of our user base as the mobile apps increasingly become the only way that most users access Habitica. Contributors wishing to create 3rd party tools to customize their Habitica experience can continue doing so, but we will no longer be awarding Comrade tiers as we focus on contributions that enhance Habitica in a way that is accessible to our player base as a whole.",
+  "sunsetFaqPara18": "<strong>Artisans</strong><br />We are discontinuing artisan contributions. Most art production has already been moved in-house to keep up with our content releases. We are deeply grateful for the fantastic art made over the years by our contributor community.",
+  "sunsetFaqPara19": "<strong>Wiki Wizards</strong><br />The Habitica Wiki is a wonderful tool created by players for players that has helped so many. We continue to support this effort, but will no longer be tracking or offering tiers for Wiki editing as we shift our focus towards Linguist, Blacksmith, and Challenger contributions within Habitica.",
 
   "sunsetFaqHeader9": "How will Challenges be affected?",
   "sunsetFaqList4": "Public Challenges will continue as a feature in Habitica and will be accessible via the Challenges section.",