feat: add access control

packages/design-system/atoms/avatar/Avatar.styled.ts

@@ -20,7 +20,7 @@ export const Container = styled.div<ContainerProps>`
   text-align: center;
   line-height: 1;
   overflow: hidden;
-  font-size: ${(props: ContainerProps) => props.size};
+  font-size: ${(props: ContainerProps) => (props.size || 48) * 0.45}px;
   ${(props) =>
     props.deliberatelyEmpty &&
     css`

packages/design-system/atoms/icon-helper/IconHelper.stories.tsx

@@ -0,0 +1,8 @@
+import { IconHelper } from './IconHelper';
+
+export default {
+  title: 'Atoms/Icon Helper',
+  component: IconHelper,
+};
+
+export const iconHelper = (args) => <IconHelper {...args} />;

packages/design-system/atoms/icon-helper/IconHelper.styled.ts

@@ -0,0 +1,21 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import styled from 'styled-components';
+
+const levelColors = {
+  error: palette.red400,
+  warn: palette.gold400,
+  info: palette.discord400,
+  chrome: palette.taupe400,
+  success: palette.green400,
+  none: 'unset',
+};
+
+export type IconHelperLevel = keyof typeof levelColors;
+
+export const IconHelperStyled = styled.span<{
+  level: IconHelperLevel;
+}>`
+  position: relative;
+  top: 0.12em;
+  color: ${(props) => levelColors[props.level]};
+`;

packages/design-system/atoms/icon-helper/IconHelper.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IconHelperLevel, IconHelperStyled } from './IconHelper.styled';
+
+export const IconHelper = (props: {
+  children: React.ReactNode;
+  level?: IconHelperLevel;
+}) => <IconHelperStyled level={props.level || 'none'}>{props.children}</IconHelperStyled>;

packages/design-system/atoms/icon-helper/index.ts

@@ -0,0 +1 @@
+export * from './IconHelper';

packages/design-system/atoms/role/Role.tsx

@@ -82,6 +82,10 @@ export const Role = (props: Props) => {
 
 const disabledReason = (role: RPCRole) => {
   switch (role.safety) {
+    case RoleSafety.ManagedRole:
+      return 'This role is managed by an integration/bot.';
+    case RoleSafety.AccessControl:
+      return 'This role is part of the allow/block list for the server.';
     case RoleSafety.HigherThanBot:
       return `This role is above Roleypoly's own role.`;
     case RoleSafety.DangerousPermissions: