From fe155e2f93eeef1d87ba36389a561968795e2dde Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Thu, 12 Nov 2020 03:13:07 -0500
Subject: [PATCH] ui(faq): tweak role colors

---
 src/components/Role/styles.tsx | 5 ++---
 src/content/site/faq.md        | 6 +++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Role/styles.tsx b/src/components/Role/styles.tsx
index 5e82283..69a62ed 100644
--- a/src/components/Role/styles.tsx
+++ b/src/components/Role/styles.tsx
@@ -1,11 +1,10 @@
 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")};
+  color: ${(props) => props.color};
+  border: 2px solid ${(props) => props.color};
   border-radius: 40px;
   margin: 2px 0;
   padding: 3px 12px;
diff --git a/src/content/site/faq.md b/src/content/site/faq.md
index f660c75..16264aa 100644
--- a/src/content/site/faq.md
+++ b/src/content/site/faq.md
@@ -6,7 +6,7 @@ import { Role } from "../../components/Role"
 
 ## What are the roles and what do they mean?
 
-### <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>
+### <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 /><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.
 
@@ -18,11 +18,11 @@ This is for helpful members who have shown exceptional aptitude or expertise in
 
 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.
 
-### <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>
+### <Role color="#babbbe">ChatMod</Role><br /><Role color="#babbbe">Moderator</Role><br /><Role color="#babbbe">Senior Moderator</Role><br /><Role color="#babbbe">Admin</Role><br /><Role color="#babbbe">Owner</Role>
 
 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.
 
-### <Role color="#babbbe">Administrative Board Member</Role>,<Role color="#babbbe">Senior Board Member</Role>,<Role color="#babbbe">Board Member</Role>
+### <Role color="#babbbe">Administrative Board Member</Role><br /><Role color="#babbbe">Senior Board Member</Role><br /><Role color="#babbbe">Board Member</Role>
 
 This is for staff members who are currently not active moderators.