diff --git a/packages/design-system/molecules/user-popover/UserPopover.tsx b/packages/design-system/molecules/user-popover/UserPopover.tsx
index 27a4454..65720ff 100644
--- a/packages/design-system/molecules/user-popover/UserPopover.tsx
+++ b/packages/design-system/molecules/user-popover/UserPopover.tsx
@@ -1,26 +1,60 @@
-import { CompletelyStylelessLink } from '@roleypoly/design-system/atoms/typography';
+import { Space } from '@roleypoly/design-system/atoms/space';
+import {
+ AmbientLarge,
+ CompletelyStylelessLink,
+ Link,
+} from '@roleypoly/design-system/atoms/typography';
import { UserAvatarGroup } from '@roleypoly/design-system/molecules/user-avatar-group';
import { DiscordUser } from '@roleypoly/types';
import * as React from 'react';
-import { GoGear, GoSignOut } from 'react-icons/go';
+import { FaDiscord, FaGithub, FaPatreon } from 'react-icons/fa';
+import { GoSignOut } from 'react-icons/go';
import { Base, NavAction } from './UserPopover.styled';
type UserPopoverProps = {
user: DiscordUser;
};
-export const UserPopover = (props: UserPopoverProps) => (
-
-
-
-
- Settings
-
-
-
-
- Log Out
-
-
-
-);
+export const UserPopover = (props: UserPopoverProps) => {
+ const subtitleText = React.useMemo(() => {
+ const texts = [
+ '✊ Black Lives Matter.',
+ 'Trans Rights!',
+ 'Stop AAPI Hate.',
+ "Get vaccinated, it's free!",
+ ];
+
+ return texts[Math.floor(Math.random() * texts.length)];
+ }, []);
+ return (
+
+
+
+
+ Log Out
+
+
+
+
+
+ Support us on Patreon
+
+ {' '}
+
+
+ Roleypoly on GitHub
+
+
+
+
+ Get help on Discord
+
+
+
+
+ © {new Date().getFullYear()} Roleypoly - {subtitleText}
+
+
+
+ );
+};