fix(design-system): fix styling regression from removing next/link (#168)

packages/design-system/atoms/typography/typography.tsx

@@ -1,3 +1,4 @@
+import { Link as RouterLink } from '@reach/router';
 import { palette } from '@roleypoly/design-system/atoms/colors';
 import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
@@ -106,7 +107,7 @@ export const Link = styled.a`
     }
 `;
 
-export const CompletelyStylelessLink = styled.a`
+export const CompletelyStylelessLink = styled(RouterLink)`
     color: inherit;
     text-decoration: none;
     :visited,

packages/design-system/molecules/server-masthead/ServerMasthead.tsx

@@ -1,5 +1,9 @@
 import { Avatar, utils } from '@roleypoly/design-system/atoms/avatar';
-import { AccentTitle, AmbientLarge } from '@roleypoly/design-system/atoms/typography';
+import {
+    AccentTitle,
+    AmbientLarge,
+    CompletelyStylelessLink,
+} from '@roleypoly/design-system/atoms/typography';
 import { GuildSlug } from '@roleypoly/types';
 import * as React from 'react';
 import { GoPencil } from 'react-icons/go';
@@ -25,12 +29,12 @@ export const ServerMasthead = (props: ServerMastheadProps) => {
             <Name>
                 <AccentTitle>{props.guild.name}</AccentTitle>
                 {props.editable && (
-                    <a href={`/s/${props.guild.id}/edit`}>
+                    <CompletelyStylelessLink to={`/s/${props.guild.id}/edit`}>
                         <Editable role="button">
                             <GoPencil />
                             &nbsp; <AmbientLarge>Edit Server</AmbientLarge>
                         </Editable>
-                    </a>
+                    </CompletelyStylelessLink>
                 )}
             </Name>
         </Wrapper>

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

@@ -13,18 +13,14 @@ export const UserPopover = (props: UserPopoverProps) => (
     <Base>
         <UserAvatarGroup user={props.user} preventCollapse={true} />
         <NavAction>
-            <a href="/user/settings">
+            <CompletelyStylelessLink to="/user/settings">
-                <CompletelyStylelessLink>
+                Settings <GoGear />
-                    Settings <GoGear />
+            </CompletelyStylelessLink>
-                </CompletelyStylelessLink>
-            </a>
         </NavAction>
         <NavAction>
-            <a href="/machinery/logout">
+            <CompletelyStylelessLink to="/machinery/logout">
-                <CompletelyStylelessLink>
+                Log Out <GoSignOut />
-                    Log Out <GoSignOut />
+            </CompletelyStylelessLink>
-                </CompletelyStylelessLink>
-            </a>
         </NavAction>
     </Base>
 );

packages/design-system/organisms/preauth/Preauth.tsx

@@ -4,6 +4,7 @@ import { GuildSlug } from '@roleypoly/types';
 import * as React from 'react';
 import { FaDiscord } from 'react-icons/fa';
 import styled from 'styled-components';
+import { CompletelyStylelessLink } from '../../atoms/typography';
 
 export type PreauthProps = {
     guildSlug?: GuildSlug;
@@ -32,7 +33,7 @@ export const Preauth = (props: PreauthProps) => {
         <Centered>
             {props.guildSlug && <PreauthGreeting guildSlug={props.guildSlug} />}
             <WidthContainer>
-                <a href={props.discordOAuthLink || '#'}>
+                <CompletelyStylelessLink to={props.discordOAuthLink || '#'}>
                     <Button
                         color="discord"
                         icon={
@@ -43,7 +44,7 @@ export const Preauth = (props: PreauthProps) => {
                     >
                         Sign in with Discord
                     </Button>
-                </a>
+                </CompletelyStylelessLink>
             </WidthContainer>
         </Centered>
     );

packages/design-system/organisms/server-setup/ServerSetup.tsx

@@ -2,7 +2,11 @@ import { Avatar, utils } from '@roleypoly/design-system/atoms/avatar';
 import { Button } from '@roleypoly/design-system/atoms/button';
 import { DotOverlay } from '@roleypoly/design-system/atoms/dot-overlay';
 import { Hero } from '@roleypoly/design-system/atoms/hero';
-import { AccentTitle, SmallTitle } from '@roleypoly/design-system/atoms/typography';
+import {
+    AccentTitle,
+    CompletelyStylelessLink,
+    SmallTitle,
+} from '@roleypoly/design-system/atoms/typography';
 import { evaluatePermission } from '@roleypoly/misc-utils/hasPermission';
 import { GuildSlug, UserGuildPermissions } from '@roleypoly/types';
 import * as React from 'react';
@@ -63,11 +67,11 @@ const adminMessage = (id: string) => (
         </FlexLine>
         <FlexLine>
             <div>
-                <a href={`/machinery/bot-join?id=${id}`}>
+                <CompletelyStylelessLink to={`/machinery/bot-join?id=${id}`}>
                     <Button color="discord" icon={<FaDiscord />}>
                         Add Roleypoly
                     </Button>
-                </a>
+                </CompletelyStylelessLink>
             </div>
         </FlexLine>
     </>

packages/design-system/organisms/servers-listing/ServersListing.tsx

@@ -14,11 +14,9 @@ const CardList = (props: { guilds: GuildSlug[] }) => (
     <>
         {props.guilds.map((guild, idx) => (
             <CardContainer key={idx}>
-                <a href={`/s/${guild.id}`}>
+                <CompletelyStylelessLink to={`/s/${guild.id}`}>
-                    <CompletelyStylelessLink>
+                    <ServerListingCard guild={guild} />
-                        <ServerListingCard guild={guild} />
+                </CompletelyStylelessLink>
-                    </CompletelyStylelessLink>
-                </a>
             </CardContainer>
         ))}
     </>