1 files changed, 35 insertions, 80 deletions

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 377d1d820..cbe90c7c2 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Link as ReactRouterLink, NavLink as ReactRouterNavLink } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { BREAKPOINTS } from 'ts/@next/components/layout';
 import { colors } from 'ts/style/colors';
 
 interface ButtonInterface {
@@ -11,7 +10,6 @@ interface ButtonInterface {
     children?: Node | string;
     isTransparent?: boolean;
     isNoBorder?: boolean;
-    isCentered?: boolean;
     isNoPadding?: boolean;
     isWithArrow?: boolean;
     isAccentColor?: boolean;
@@ -25,11 +23,41 @@ interface ButtonInterface {
     };
 }
 
-export const Button = styled.button<ButtonInterface>`
+export const Button = (props: ButtonInterface) => {
+    const {
+        children,
+        href,
+        isWithArrow,
+        to,
+    } = props;
+    let linkElem;
+
+    if (props.href) { linkElem = 'a'; }
+    if (props.to) { linkElem = ReactRouterLink; }
+
+    const Component = linkElem ? ButtonBase.withComponent(linkElem) : ButtonBase;
+
+    return (
+        <Component {...props}>
+            {props.children}
+
+            { isWithArrow &&
+                <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z"
+                    />
+                </svg>
+            }
+        </Component>
+    );
+};
+
+const ButtonBase = styled.button<ButtonInterface>`
     appearance: none;
-    border: ${props => !props.isNoBorder && `1px solid ${(!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'}`};
+    border: 1px solid transparent;
     display: inline-block;
-    background-color: ${props => (!props.isTransparent || props.bgColor) ? (props.bgColor || colors.brandLight) : 'transparent'};
+    background-color: ${props => props.bgColor || colors.brandLight};
+    background-color: ${props => (props.isTransparent || props.isWithArrow) && 'transparent'}
     border-color: ${props => (props.isTransparent && !props.isWithArrow) && 'rgba(255, 255, 255, .4)'};
     color: ${props => props.isAccentColor ? props.theme.linkColor : (props.color || props.theme.textColor)};
     padding: ${props => (!props.isNoPadding && !props.isWithArrow) && '18px 30px'};
@@ -38,6 +66,7 @@ export const Button = styled.button<ButtonInterface>`
     line-height: normal;
     text-decoration: none;
     cursor: pointer;
+    outline: none;
     transition: background-color 0.35s, border-color 0.35s;
 
     svg {
@@ -51,7 +80,7 @@ export const Button = styled.button<ButtonInterface>`
     }
 
     &:hover {
-        background-color: ${props => !props.isTransparent && '#04BEA8'};
+        background-color: ${props => (!props.isTransparent && !props.isWithArrow) && '#04BEA8'};
         border-color: ${props => (props.isTransparent && !props.isNoBorder && !props.isWithArrow) && '#00AE99'};
 
         svg {
@@ -59,77 +88,3 @@ export const Button = styled.button<ButtonInterface>`
         }
     }
 `;
-
-export const Link: React.ReactNode = (props: ButtonInterface) => {
-    const {
-        children,
-        href,
-        isWithArrow,
-    } = props;
-    const Component = Button.withComponent(ReactRouterLink);
-
-    return (
-        <Component to={href} {...props}>
-            {children}
-
-            { isWithArrow &&
-                <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z"
-                    />
-                </svg>
-            }
-        </Component>
-    );
-};
-
-Link.defaultProps = {
-    isTransparent: true,
-};
-
-export const NavLink: React.ReactNode = (props: ButtonInterface) => {
-    const {
-        children,
-        href,
-        isWithArrow,
-    } = props;
-    const Component = Button.withComponent(ReactRouterNavLink);
-
-    return (
-        <Component to={href} {...props}>
-            {children}
-
-            { isWithArrow &&
-                <svg width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        d="M4.484.246l.024 1.411 8.146.053L.817 13.547l.996.996L13.65 2.706l.052 8.146 1.412.024L15.045.315 4.484.246z"
-                    />
-                </svg>
-            }
-        </Component>
-    );
-};
-
-NavLink.defaultProps = {
-    isTransparent: true,
-};
-
-// Added this, & + & doesnt really work since we switch with element types...
-export const ButtonWrap = styled.div`
-    button + button,
-    a + a,
-    a + button,
-    button + a {
-        @media (min-width: ${BREAKPOINTS.mobile}) {
-            margin-left: 10px;
-        }
-
-        @media (max-width: ${BREAKPOINTS.mobile}) {
-            margin: 0 10px;
-        }
-    }
-
-    @media (max-width: ${BREAKPOINTS.mobile}) {
-        white-space: nowrap;
-    }
-`;