aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/@next/components/link.tsx52
-rw-r--r--packages/website/ts/@next/components/siteWrap.tsx5
-rw-r--r--packages/website/ts/@next/constants/globalStyle.tsx5
-rw-r--r--packages/website/ts/@next/pages/why.tsx3
4 files changed, 64 insertions, 1 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,
},
};
diff --git a/packages/website/ts/@next/constants/globalStyle.tsx b/packages/website/ts/@next/constants/globalStyle.tsx
index 38077c78c..f30f8e2b1 100644
--- a/packages/website/ts/@next/constants/globalStyle.tsx
+++ b/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;
diff --git a/packages/website/ts/@next/pages/why.tsx b/packages/website/ts/@next/pages/why.tsx
index a75fc7103..1d2d7cd4a 100644
--- a/packages/website/ts/@next/pages/why.tsx
+++ b/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>