feat(design-system): pre-port of roleypoly/ui

src/design-system/molecules/user-popover/UserPopover.story.tsx

@@ -0,0 +1,13 @@
+import { user } from 'hack/fixtures/storyData';
+import { moleculeStories } from 'molecules/molecules.story';
+import * as React from 'react';
+import { UserPopover } from './UserPopover';
+import { PopoverBase } from 'atoms/popover/Popover.styled';
+
+const story = moleculeStories('User Popover', module);
+
+story.add('User Popover', () => (
+    <PopoverBase active>
+        <UserPopover user={user} />
+    </PopoverBase>
+));

src/design-system/molecules/user-popover/UserPopover.styled.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+import { palette } from 'atoms/colors';
+import { transitions } from 'atoms/timings';
+
+export const Base = styled.div`
+    text-align: right;
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+`;
+
+export const NavAction = styled.div`
+    height: 2.25em;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    transition: color ${transitions.actionable}s ease-in-out;
+    color: ${palette.taupe500};
+    box-sizing: border-box;
+
+    &:hover {
+        cursor: pointer;
+        color: ${palette.taupe600};
+    }
+
+    svg {
+        font-size: 120%;
+        box-sizing: content-box;
+        padding: 5px 8px;
+        position: relative;
+        top: 0.1em;
+    }
+`;

src/design-system/molecules/user-popover/UserPopover.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { DiscordUser } from '@roleypoly/rpc/shared';
+import { UserAvatarGroup } from 'molecules/user-avatar-group';
+import { Base, NavAction } from './UserPopover.styled';
+import { GoGear, GoSignOut } from 'react-icons/go';
+import Link from 'next/link';
+
+type UserPopoverProps = {
+    user: DiscordUser.AsObject;
+};
+
+export const UserPopover = (props: UserPopoverProps) => (
+    <Base>
+        <UserAvatarGroup user={props.user} preventCollapse={true} />
+        <NavAction>
+            <Link href="/user/settings">
+                <>
+                    Settings <GoGear />
+                </>
+            </Link>
+        </NavAction>
+        <NavAction>
+            <Link href="/auth/machinery/logout">
+                <>
+                    Log Out <GoSignOut />
+                </>
+            </Link>
+        </NavAction>
+    </Base>
+);

src/design-system/molecules/user-popover/index.ts

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