ui(faq): make roles badge-like using MDX, tweak list of roles

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>
+  )
+}

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;
+`