Added global link color to theme

packages/website/ts/@next/components/link.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Link as ReactRouterLink } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { colors } from 'ts/style/colors';
+
+interface LinkInterface {
+    color?: string;
+    children?: Node | string;
+    isNoArrow?: boolean;
+    hasIcon?: boolean | string;
+    isInline?: boolean;
+    href?: string;
+    theme?: {
+        textColor: string;
+    };
+}
+
+const StyledLink = styled(ReactRouterLink)<LinkInterface>`
+    display: ${props => props.isInline && 'inline-block'};
+    color: ${props => props.color || props.theme.linkColor};
+    padding: ${props => !props.isNoPadding && '18px 30px'};
+    text-align: center;
+    font-size: 18px;
+    text-decoration: none;
+
+    @media (max-width: 768px) {
+        padding: ${props => !props.isNoPadding && '6% 10%'};
+    }
+`;
+
+export const Link = (props: LinkInterface) => {
+    const {
+        children,
+        href,
+    } = props;
+
+    return (
+        <StyledLink to={href} {...props}>
+            {children}
+        </StyledLink>
+    );
+};
+
+// Added this, & + & doesnt really work since we switch with element types...
+export const LinkWrap = styled.div`
+    a + a,
+    a + button,
+    button + a {
+        margin-left: 20px;
+    }
+`;

packages/website/ts/@next/components/siteWrap.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
 
+import { colors } from 'ts/style/colors';
 import { Footer } from 'ts/@next/components/footer';
 import { Header } from 'ts/@next/components/header';
 import { Main } from 'ts/@next/components/layout';
@@ -18,6 +19,7 @@ export interface ThemeInterface {
     [key: string]: {
         bgColor: string;
         textColor: string;
+        linkColor: string;
     };
 }
 
@@ -25,14 +27,17 @@ const GLOBAL_THEMES: ThemeInterface = {
     dark: {
         bgColor: '#000000',
         textColor: '#FFFFFF',
+        linkColor: colors.brandLight,
     },
     light: {
         bgColor: '#FFFFFF',
         textColor: '#000000',
+        linkColor: colors.brandDark,
     },
     gray: {
         bgColor: '#e0e0e0',
         textColor: '#000000',
+        linkColor: colors.brandDark,
     },
 };
 

packages/website/ts/@next/constants/globalStyle.tsx

@@ -5,6 +5,7 @@ interface GlobalStyle {
     theme: {
         bgColor: string;
         textColor: string;
+        linkColor: string;
     };
 }
 
@@ -82,6 +83,10 @@ const GlobalStyles = withTheme(createGlobalStyle<GlobalStyle> `
         overflow: hidden;
     }
 
+    a {
+        color: ${props => props.theme.linkColor};
+    }
+
     img, svg {
         max-width: 100%;
         object-fit: contain;

packages/website/ts/@next/pages/why.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { colors } from 'ts/style/colors';
 
 import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
+import { Link } from 'ts/@next/components/link';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
 
@@ -18,7 +19,7 @@ export const NextWhy = () => (
         <Column colWidth="2/3">
           <Heading size="medium" isCentered={true} style={{ '--desktopMaxWidth': '570px' }}>The exchange layer for the crypto economy</Heading>
           <Paragraph size="medium" isCentered={true}>The world's assets are becoming tokenized on public blockchains. 0x Protocol is free, open-source infrastructure that allows anyone in the world to build products that enable the purchasing and trading of crypto tokens.</Paragraph>
-          <Paragraph isCentered={true}>Build on 0x (arrow)</Paragraph>
+          <Link href="/docs" isCentered={true}>Build on 0x (arrow)</Link>
         </Column>
       </WrapCentered>
     </Section>