feat(content): add staff and tiers

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

@@ -1,10 +1,13 @@
 <template>
-  <div class="container-fluid">
-    <div class="row">
+  <div class="col-12 col-sm-8 clearfix standard-page mx-auto">
+    <div class="col-12 col-sm-8 clearfix standard-page">
       <div>
-        <h1>{{ $t('sunsetFaqTitle') }}</h1>
+        <h1 v-once>
+          {{ $t('sunsetFaqTitle') }}
+        </h1>
       </div>
-      <div>
+      <div class="section">
+        <div class>
           <p v-html="$t('sunsetFaqPara1')"></p>  <!-- there's html in here -->
           <p>{{ $t('sunsetFaqPara2') }}</p>
           <p>{{ $t('sunsetFaqPara3') }}</p>
@@ -140,13 +143,14 @@
           <p v-html="$t('sunsetFaqPara20')"></p>
         </div>
       </div>
+    </div>
 
     <!-- sidebar -->
     <!-- staff -->
-    <div class="col-12 col-sm-4 sidebar">
+    <div class="col-12 col-sm-4 sidebar float-right">
       <div class="section">
         <div class="px-4">
-          <sidebar-section :title="$t('staff')" />
+          <sidebar-section :title="$t('staff')">
             <div class="row">
               <div
                 v-for="user in staff"
@@ -170,6 +174,115 @@
                 </div>
               </div>
             </div>
+          </sidebar-section>
+          <sidebar-section :title="$t('playerTiers')">
+            <div class="row">
+              <div class="col-12">
+                <ul class="tier-list">
+                  <li
+                    v-once
+                    class="tier1"
+                  >
+                    {{ $t('tier1') }}
+                    <div
+                      class="svg-icon tier1-icon"
+                      v-html="icons.tier1"
+                    ></div>
+                  </li>
+                  <li
+                    v-once
+                    class="tier2"
+                  >
+                    {{ $t('tier2') }}
+                    <div
+                      class="svg-icon tier2-icon"
+                      v-html="icons.tier2"
+                    ></div>
+                  </li>
+                  <li
+                    v-once
+                    class="tier3"
+                  >
+                    {{ $t('tier3') }}
+                    <div
+                      class="svg-icon tier3-icon"
+                      v-html="icons.tier3"
+                    ></div>
+                  </li>
+                  <li
+                    v-once
+                    class="tier4"
+                  >
+                    {{ $t('tier4') }}
+                    <div
+                      class="svg-icon tier4-icon"
+                      v-html="icons.tier4"
+                    ></div>
+                  </li>
+                  <li
+                    v-once
+                    class="tier5"
+                  >
+                    {{ $t('tier5') }}
+                    <div
+                      class="svg-icon tier5-icon"
+                      v-html="icons.tier5"
+                    ></div>
+                  </li>
+                  <li
+                    v-once
+                    class="tier6"
+                  >
+                    {{ $t('tier6') }}
+                    <div
+                      class="svg-icon tier6-icon"
+                      v-html="icons.tier6"
+                    ></div>
+                  </li>
+                  <li
+                    v-once
+                    class="tier7"
+                  >
+                    {{ $t('tier7') }}
+                    <div
+                      class="svg-icon tier7-icon"
+                      v-html="icons.tier7"
+                    ></div>
+                  </li>
+                  <li
+                    v-once
+                    class="moderator"
+                  >
+                    {{ $t('tierModerator') }}
+                    <div
+                      class="svg-icon mod-icon"
+                      v-html="icons.tierMod"
+                    ></div>
+                  </li>
+                  <li
+                    v-once
+                    class="staff"
+                  >
+                    {{ $t('tierStaff') }}
+                    <div
+                      class="svg-icon staff-icon"
+                      v-html="icons.tierStaff"
+                    ></div>
+                  </li>
+                  <li
+                    v-once
+                    class="npc"
+                  >
+                    {{ $t('tierNPC') }}
+                    <div
+                      class="svg-icon npc-icon"
+                      v-html="icons.tierNPC"
+                    ></div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </sidebar-section>
         </div>
       </div>
     </div>
@@ -192,19 +305,155 @@
 
   .sidebar {
     background-color: $gray-600;
-    padding: 0 0 0 0;
+    padding: 0 0 0 0
+  }
+.svg-icon {
+    width: 10px;
+    display: inline-block;
+    margin-left: .5em;
   }
 
+  .tier1-icon, .tier2-icon {
+    width: 11px;
+  }
+
+  .tier5-icon, .tier6-icon {
+    width: 8px;
+  }
+
+  .tier7-icon {
+    width: 12px;
+  }
+
+  .mod-icon {
+    width: 13px;
+  }
+
+  .npc-icon {
+    width: 8px;
+  }
+
+  .staff {
+    margin-bottom: 1em;
+
+    .staff-icon  {
+      width: 11px;
+    }
+
+    .title {
+      color: #6133b4;
+      font-weight: bold;
+      display: inline-block;
+    }
+  }
+    .tier-list {
+    list-style-type: none;
+    padding: 0;
+    width: 98%;
+
+    li {
+      border-radius: 2px;
+      background-color: #edecee;
+      border: solid 1px #c3c0c7;
+      text-align: center;
+      padding: 1em;
+      margin-bottom: 1em;
+      font-weight: bold;
+    }
+
+    .tier1 {
+      color: #c42870;
+    }
+
+    .tier2 {
+      color: #b01515;
+    }
+
+    .tier3 {
+      color: #d70e14;
+    }
+
+    .tier4 {
+      color: #c24d00;
+    }
+
+    .tier5 {
+      color: #9e650f;
+    }
+
+    .tier6 {
+      color: #2b8363;
+    }
+
+    .tier7 {
+      color: #167e87;
+    }
+
+    .tier8, .moderator {
+      color: #277eab;
+    }
+
+    .tier9, .staff {
+      color: #6133b4;
+    }
+
+    .npc {
+      color: $black;
+    }
+  }
+
+  .staff .title {
+    color: #6133b4;
+  }
+
+  .moderator .title {
+    color: #277eab;
+  }
 </style>
 
 <script>
 import sidebarSection from '../sidebarSection';
+import tier1 from '@/assets/svg/tier-1.svg';
+import tier2 from '@/assets/svg/tier-2.svg';
+import tier3 from '@/assets/svg/tier-3.svg';
+import tier4 from '@/assets/svg/tier-4.svg';
+import tier5 from '@/assets/svg/tier-5.svg';
+import tier6 from '@/assets/svg/tier-6.svg';
+import tier7 from '@/assets/svg/tier-7.svg';
+import tierMod from '@/assets/svg/tier-mod.svg';
+import tierNPC from '@/assets/svg/tier-npc.svg';
+import tierStaff from '@/assets/svg/tier-staff.svg';
+import staffList from '../../libs/staffList';
 
 export default {
   componenets: {
     sidebarSection,
   },
 
+  data () {
+    return {
+      icons: Object.freeze({
+        tier1,
+        tier2,
+        tier3,
+        tier4,
+        tier5,
+        tier6,
+        tier7,
+        tierMod,
+        tierNPC,
+        tierStaff,
+      }),
+      group: {
+        chat: [],
+      },
+      sections: {
+        worldBoss: true,
+      },
+      staff: staffList,
+    };
+  },
+
   async mounted () {
     this.$store.dispatch('common:setTitle', {
       subSection: this.$t('chat-sunset-faq'),