2 files changed, 57 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/link.tsx b/packages/website/ts/@next/components/link.tsx
new file mode 100644
index 000000000..c1b8b33e9
--- /dev/null
+++ b/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;
+    }
+`;
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index f7b2c4df2..c9461177e 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/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,
     },
 };