From dfe2d228e60a351c5469be74fa1dc1552a0286bc Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 12 Nov 2020 02:52:49 -0500
Subject: [PATCH] ui(faq): make roles badge-like using MDX, tweak list of roles

---
 src/components/Role/index.tsx  | 14 ++++++++++++++
 src/components/Role/styles.tsx | 12 ++++++++++++
 src/content/site/faq.md        | 20 +++++++++++++-------
 3 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Role/index.tsx
 create mode 100644 src/components/Role/styles.tsx

diff --git a/src/components/Role/index.tsx b/src/components/Role/index.tsx
new file mode 100644
index 0000000..4e26059
--- /dev/null
+++ b/src/components/Role/index.tsx
@@ -0,0 +1,14 @@
+import React, { FC } from "react"
+import * as SC from "./styles"
+
+interface IRoleProps {
+  color: string
+}
+
+export const Role: FC<IRoleProps> = ({ children, color, ...props }) => {
+  return (
+    <SC.RoleWrapper {...props} color={color}>
+      {children}
+    </SC.RoleWrapper>
+  )
+}
diff --git a/src/components/Role/styles.tsx b/src/components/Role/styles.tsx
new file mode 100644
index 0000000..5e82283
--- /dev/null
+++ b/src/components/Role/styles.tsx
@@ -0,0 +1,12 @@
+import styled from "styled-components"
+import { readableColor } from "polished"
+
+export const RoleWrapper = styled.span<{ color: string }>`
+  display: inline-block;
+  font-weight: 400 !important;
+  background: ${(props) => props.color};
+  color: ${(props) => readableColor(props.color, "#000", "#fff")};
+  border-radius: 40px;
+  margin: 2px 0;
+  padding: 3px 12px;
+`
diff --git a/src/content/site/faq.md b/src/content/site/faq.md
index 4abedd0..f660c75 100644
--- a/src/content/site/faq.md
+++ b/src/content/site/faq.md
@@ -2,27 +2,33 @@
 path: /faq
 ---
 
+import { Role } from "../../components/Role"
+
 ## What are the roles and what do they mean?
 
-### Community-Member,<br />Active,<br />Chatterbox,<br />Super-Talky-Guy,<br />Bepis-Drinker,<br />Conke-Commander,<br />and Patriotic-Procrastinator
+### <Role color="#babbbe">Community-Member</Role>,<br /><Role color="#e9c545">Active</Role>,<br /><Role color="#3b74d1">Chatterbox</Role>,<br /><Role color="#ce4ac6">Super-Talky-Guy</Role>,<br /><Role color="#62ccbd">Bepis-Drinker</Role>,<br /><Role color="#d45846">Conke-Commander</Role>,<br />and <Role color="#985bf6">Patriotic-Procrastinator</Role>
 
 These are the activity roles of the server in the order you will be granted them. Different tiers will grant different perks, such as unlocking hidden channels, voice access, and nicknaming privileges. These roles are assigned automatically as you participate in the server, so don't ask for them.
 
-### Wizard
+### <Role color="#915db1">Wizard</Role>
 
 This is for helpful members who have shown exceptional aptitude or expertise in some field. This is given out at the discretion of the Admin team, though other staff members may suggest someone by using ModMail. Less than 0.001% of users get this role.
 
-### Solid Contributor
+### <Role color="#968ce3">Solid Contributor</Role>
 
 This role recognizes people who contribute their time and knowledge to the server completely out of their own volition. Again you can nominate someone for this role by using ModMail.
 
-### Staff roles
+### <Role color="#babbbe">ChatMod</Role>,<Role color="#babbbe">Moderator</Role>,<Role color="#babbbe">Senior Moderator</Role>,<Role color="#babbbe">Admin</Role>,<Role color="#babbbe">Owner</Role>
 
-ChatMod/Moderator/Senior Moderator/Admin/Owner - These people ensure that the usage of this environment reflects the guidelines as illustrated in the rules. Staff is occasionally handpicked, and sometimes there is an application process. There is a trial period for all new staff of 2-4 weeks (sometimes more, sometimes less) which comes with a trial role, however, they are treated as full staff members during this time. Please respect all staff equally; if you have an issue with a specific staff member, talk to an administrator.
+These people ensure that the usage of this environment reflects the guidelines as illustrated in the rules. Staff is occasionally handpicked, and sometimes there is an application process. There is a trial period for all new staff of 2-4 weeks (sometimes more, sometimes less) which comes with a trial role, however, they are treated as full staff members during this time. Please respect all staff equally; if you have an issue with a specific staff member, talk to an administrator.
 
-Administrative Board Member/Senior Board Member/Board Member - This is for staff members who are currently not active moderators.
+### <Role color="#babbbe">Administrative Board Member</Role>,<Role color="#babbbe">Senior Board Member</Role>,<Role color="#babbbe">Board Member</Role>
 
-Retired Staff - This role is for members who are no longer staff.
+This is for staff members who are currently not active moderators.
+
+### <Role color="#98ed88">Retired Staff</Role>
+
+This role is for members who are no longer staff.
 
 ## Why can’t I change my nickname?