From 85ceb25c1700752867d6287400618ea9919df1b7 Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Fri, 9 Jul 2021 07:08:51 -0500
Subject: [PATCH] feat(UserPopover): add copyright and links to user popover

---
 .../molecules/user-popover/UserPopover.tsx    | 68 ++++++++++++++-----
 1 file changed, 51 insertions(+), 17 deletions(-)

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) => (
-  <Base>
-    <UserAvatarGroup user={props.user} preventCollapse={true} />
-    <NavAction>
-      <CompletelyStylelessLink to="/user/settings">
-        Settings <GoGear />
-      </CompletelyStylelessLink>
-    </NavAction>
-    <NavAction>
-      <CompletelyStylelessLink to="/machinery/logout">
-        Log Out <GoSignOut />
-      </CompletelyStylelessLink>
-    </NavAction>
-  </Base>
-);
+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 (
+    <Base>
+      <UserAvatarGroup user={props.user} preventCollapse={true} />
+      <NavAction>
+        <CompletelyStylelessLink to="/machinery/logout">
+          Log Out <GoSignOut />
+        </CompletelyStylelessLink>
+      </NavAction>
+      <Space />
+      <NavAction>
+        <Link href="https://patreon.com/roleypoly">
+          Support us on Patreon <FaPatreon />
+        </Link>
+      </NavAction>{' '}
+      <NavAction>
+        <Link href="https://github.com/roleypoly/roleypoly">
+          Roleypoly on GitHub <FaGithub />
+        </Link>
+      </NavAction>
+      <NavAction>
+        <Link href="https://discord.com/PWQUVsd">
+          Get help on Discord <FaDiscord />
+        </Link>
+      </NavAction>
+      <NavAction>
+        <AmbientLarge>
+          &copy; {new Date().getFullYear()} Roleypoly - {subtitleText}
+        </AmbientLarge>
+      </NavAction>
+    </Base>
+  );
+};