aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-29 22:17:00 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-29 22:17:00 +0800
commita114cf5c2eebb62af1faff4c4186d542612f84cc (patch)
tree8a668c095aa778e6c6c25ee9af6b1f4122053a23
parent4bc5881e9a4214a132481062651ff088f61d3241 (diff)
downloaddexon-sol-tools-a114cf5c2eebb62af1faff4c4186d542612f84cc.tar
dexon-sol-tools-a114cf5c2eebb62af1faff4c4186d542612f84cc.tar.gz
dexon-sol-tools-a114cf5c2eebb62af1faff4c4186d542612f84cc.tar.bz2
dexon-sol-tools-a114cf5c2eebb62af1faff4c4186d542612f84cc.tar.lz
dexon-sol-tools-a114cf5c2eebb62af1faff4c4186d542612f84cc.tar.xz
dexon-sol-tools-a114cf5c2eebb62af1faff4c4186d542612f84cc.tar.zst
dexon-sol-tools-a114cf5c2eebb62af1faff4c4186d542612f84cc.zip
Introduces WrapCentered
-rw-r--r--packages/website/ts/@next/components/layout.tsx11
-rw-r--r--packages/website/ts/@next/pages/landing.tsx17
2 files changed, 18 insertions, 10 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index d64bcf74a..c807ccb36 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -83,17 +83,26 @@ export const Section = styled.section<SectionProps>`
}
`;
-export const Wrap = styled.div<WrapProps>`
+const WrapBase = styled.div<WrapProps>`
max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
background-color: ${props => props.bgColor};
margin: 0 auto;
+`;
+export const Wrap = styled(WrapBase)`
@media (min-width: ${BREAKPOINTS.mobile}) {
display: flex;
justify-content: space-between;
}
`;
+export const WrapCentered = styled(WrapBase)`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+`;
+
export const Column = styled.div<ColumnProps>`
padding: ${props => !props.noPadding && '30px'};
border: 1px dotted rgba(255, 0, 0, 0.3);
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index 025a9d47b..ad0639fc7 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -3,16 +3,13 @@ import styled from 'styled-components';
import { colors } from 'ts/style/colors'
import { Button, ButtonTransparent } from 'ts/@next/components/button';
-import { Column, Section, Wrap } from 'ts/@next/components/layout';
+import { Column, Section, Wrap, WrapCentered } from 'ts/@next/components/layout';
import { SiteWrap } from 'ts/@next/components/siteWrap';
-<<<<<<< Updated upstream
import { Heading, Intro, Text } from 'ts/@next/components/text';
import logoOutlined from 'ts/@next/icons/illustrations/logo-outlined.svg';
import protocol from 'ts/@next/icons/illustrations/protocol.svg';
-=======
-import { Section, Wrap } from 'ts/@next/components/layout';
->>>>>>> Stashed changes
+
const Icon = styled.div`
flex-shrink: 0;
@@ -37,10 +34,12 @@ export const NextLanding = () => (
</Wrap>
</Section>
- <Section bgColor={colors.backgroundDark} noPadding>
- <Icon as={protocol as 'svg'} />
- <Text size="medium">0x is the best solution for adding exchange functionality to your business.</Text>
- <Text size="medium">Discover how developers use 0x (need arrow + line under)</Text>
+ <Section bgColor={colors.backgroundDark}>
+ <WrapCentered>
+ <Icon as={protocol as 'svg'} />
+ <Text size="medium">0x is the best solution for adding exchange functionality to your business.</Text>
+ <Text size="medium">Discover how developers use 0x (need arrow + line under)</Text>
+ </WrapCentered>
</Section>
<Section>