From 5e8876a90cd60cdc12e6c11ee4ea83680984d17e Mon Sep 17 00:00:00 2001
From: Katalina <kayteh@users.noreply.github.com>
Date: Sat, 13 Mar 2021 20:16:40 -0500
Subject: [PATCH] fix(design-system): fix styling regression from removing
 next/link (#168)

---
 .../atoms/typography/typography.tsx              |  3 ++-
 .../molecules/server-masthead/ServerMasthead.tsx | 10 +++++++---
 .../molecules/user-popover/UserPopover.tsx       | 16 ++++++----------
 .../design-system/organisms/preauth/Preauth.tsx  |  5 +++--
 .../organisms/server-setup/ServerSetup.tsx       | 10 +++++++---
 .../organisms/servers-listing/ServersListing.tsx |  8 +++-----
 6 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/packages/design-system/atoms/typography/typography.tsx b/packages/design-system/atoms/typography/typography.tsx
index cdf775c..83322e7 100644
--- a/packages/design-system/atoms/typography/typography.tsx
+++ b/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,
diff --git a/packages/design-system/molecules/server-masthead/ServerMasthead.tsx b/packages/design-system/molecules/server-masthead/ServerMasthead.tsx
index 53712d9..af72c82 100644
--- a/packages/design-system/molecules/server-masthead/ServerMasthead.tsx
+++ b/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>
diff --git a/packages/design-system/molecules/user-popover/UserPopover.tsx b/packages/design-system/molecules/user-popover/UserPopover.tsx
index ce9e1de..1225022 100644
--- a/packages/design-system/molecules/user-popover/UserPopover.tsx
+++ b/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>
-                    Settings <GoGear />
-                </CompletelyStylelessLink>
-            </a>
+            <CompletelyStylelessLink to="/user/settings">
+                Settings <GoGear />
+            </CompletelyStylelessLink>
         </NavAction>
         <NavAction>
-            <a href="/machinery/logout">
-                <CompletelyStylelessLink>
-                    Log Out <GoSignOut />
-                </CompletelyStylelessLink>
-            </a>
+            <CompletelyStylelessLink to="/machinery/logout">
+                Log Out <GoSignOut />
+            </CompletelyStylelessLink>
         </NavAction>
     </Base>
 );
diff --git a/packages/design-system/organisms/preauth/Preauth.tsx b/packages/design-system/organisms/preauth/Preauth.tsx
index 96c9780..924658b 100644
--- a/packages/design-system/organisms/preauth/Preauth.tsx
+++ b/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>
     );
diff --git a/packages/design-system/organisms/server-setup/ServerSetup.tsx b/packages/design-system/organisms/server-setup/ServerSetup.tsx
index f10a7b7..4342291 100644
--- a/packages/design-system/organisms/server-setup/ServerSetup.tsx
+++ b/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>
     </>
diff --git a/packages/design-system/organisms/servers-listing/ServersListing.tsx b/packages/design-system/organisms/servers-listing/ServersListing.tsx
index d1de4b5..7218574 100644
--- a/packages/design-system/organisms/servers-listing/ServersListing.tsx
+++ b/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>
-                        <ServerListingCard guild={guild} />
-                    </CompletelyStylelessLink>
-                </a>
+                <CompletelyStylelessLink to={`/s/${guild.id}`}>
+                    <ServerListingCard guild={guild} />
+                </CompletelyStylelessLink>
             </CardContainer>
         ))}
     </>