WIP(faq): sidebar formatting

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

@@ -151,8 +151,8 @@
 
     <!-- sidebar -->
     <!-- staff -->
-    <div class="col-12 col-sm-4 sidebar">
+    <div class="sidebar">
-      <div class="section">
+      <div class="section sidebar-content">
         <div class="px-4">
           <sidebar-section :title="$t('staff')">
             <div class="staff-header">
@@ -185,6 +185,9 @@
           <sidebar-section :title="$t('playerTiers')">
             <div class="row">
               <div class="col-12">
+                <div class="player-header">
+                  {{ $t('playerTiers') }}
+                </div>
                 <ul class="tier-list">
                   <li
                     v-once
@@ -281,10 +284,6 @@
                     class="npc"
                   >
                     {{ $t('tierNPC') }}
-                    <div
-                      class="svg-icon npc-icon"
-                      v-html="icons.tierNPC"
-                    ></div>
                   </li>
                 </ul>
               </div>
@@ -301,21 +300,9 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
-  .main-bg {
+  h1 {
-    font-size: 16px !important;
+    margin-top: 0px;
-  }
+    line-height: 1.33;
-
-  .headings {
-    font-size: 1em; // for some reason, em doesn't give the desired result
-    font-weight: 400;
-    line-height: 1.75;
-    color: $purple-200;
-  }
-
-  .body-text {
-    font-size: 0.875em;
-    color: $gray-10;
-    line-height: 1.71;
   }
 
   p {
@@ -330,20 +317,44 @@
     size: 0.5em;
   }
 
-  .sidebar {
+  #app {
+    background-color: $white !important;
+  }
+
+  .main-bg {
+    font-size: 16px !important;
+  }
+
+  .headings {
+    font-size: 1em;
+    font-weight: 400;
+    line-height: 1.75;
+    color: $purple-200;
+  }
+
+  .body-text {
+    font-size: 0.875em;
+    color: $gray-10;
+    line-height: 1.71;
+  }
+
+  .sidebar-content {
+    width: 330px !important;
     background-color: $gray-700;
+    max-height: fit-content;
     padding: 24px 0;
     margin: 0 0 22px 24px;
     border-radius: 16px;
   }
+
 .svg-icon {
     width: 10px;
     display: inline-block;
-    margin-left: .5em;
+    margin-left: -1px;
   }
 
   .tier1-icon, .tier2-icon {
-    width: 11px;
+    width: 10px;
   }
 
   .tier5-icon, .tier6-icon {
@@ -351,21 +362,18 @@
   }
 
   .tier7-icon {
-    width: 12px;
+    width: 10px;
   }
 
   .mod-icon {
-    width: 13px;
+    width: 12px;
-  }
-
-  .npc-icon {
-    width: 8px;
   }
 
   .staff-header {
     font-size: 0.875em;
     font-weight: bold;
     line-height: 1.71;
+    margin-bottom: 8px;
   }
 
   .staff {
@@ -381,26 +389,38 @@
       font-weight: bold;
       line-height: 1.71;
       display: inline-block;
-      margin-top: 8px;
+      margin-bottom: 4px;
     }
   }
+
+  .player-header {
+    font-size: 0.875em;
+    font-weight: bold;
+    line-height: 1.71;
+    margin-top: 24px;
+    margin-bottom: 8px;
+  }
     .tier-list {
     list-style-type: none;
     padding: 0;
-    width: 98%;
+    width: 282px;
 
     li {
-      border-radius: 2px;
+      border-radius: 4px;
-      background-color: #edecee;
+      border: solid 1px $gray-500;
-      border: solid 1px #c3c0c7;
       text-align: center;
-      padding: 1em;
+      padding-top: 8px;
-      margin-bottom: 1em;
+      padding-bottom: 8px;
+      margin-bottom: 8px;
+      margin-right: 4px;
       font-weight: bold;
+      font-size: 0.875em;
+      line-height: 1.71;
     }
 
     .tier1 {
       color: #c42870;
+
     }
 
     .tier2 {
@@ -432,7 +452,7 @@
     }
 
     .tier9, .staff {
-      color: #6133b4;
+      color: $purple-300;
     }
 
     .npc {
@@ -441,7 +461,7 @@
   }
 
   .staff .title {
-    color: #6133b4;
+    color: $purple-300;
   }
 
   .moderator .title {

website/common/locales/en/contrib.json

@@ -7,8 +7,8 @@
   "tier5": "Tier 5 (Champion)",
   "tier6": "Tier 6 (Champion)",
   "tier7": "Tier 7 (Legendary)",
-  "tierModerator": "Moderator (Guardian)",
+  "tierModerator": "Moderator",
-  "tierStaff": "Staff (Heroic)",
+  "tierStaff": "Staff",
   "tierNPC": "NPC",
   "friend": "Friend",
   "elite": "Elite",