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

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>
-                        <ServerListingCard guild={guild} />
-                    </CompletelyStylelessLink>
-                </a>
+                <CompletelyStylelessLink to={`/s/${guild.id}`}>
+                    <ServerListingCard guild={guild} />
+                </CompletelyStylelessLink>
             </CardContainer>
         ))}
     </>