aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-04 23:30:12 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-04 23:30:12 +0800
commit3c7dca37f5f596aa47978e3a706db7a181747d01 (patch)
tree9348f1af91f10a3905b03ed5d781cec88817e736 /packages/website/ts
parent8acb25f577feaea910ef0c1121aaba2ea177e718 (diff)
downloaddexon-sol-tools-3c7dca37f5f596aa47978e3a706db7a181747d01.tar
dexon-sol-tools-3c7dca37f5f596aa47978e3a706db7a181747d01.tar.gz
dexon-sol-tools-3c7dca37f5f596aa47978e3a706db7a181747d01.tar.bz2
dexon-sol-tools-3c7dca37f5f596aa47978e3a706db7a181747d01.tar.lz
dexon-sol-tools-3c7dca37f5f596aa47978e3a706db7a181747d01.tar.xz
dexon-sol-tools-3c7dca37f5f596aa47978e3a706db7a181747d01.tar.zst
dexon-sol-tools-3c7dca37f5f596aa47978e3a706db7a181747d01.zip
Adds padding prop to text elements
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/@next/components/button.tsx2
-rw-r--r--packages/website/ts/@next/components/layout.tsx22
-rw-r--r--packages/website/ts/@next/components/text.tsx19
-rw-r--r--packages/website/ts/@next/constants/utilities.tsx20
-rw-r--r--packages/website/ts/@next/pages/landing.tsx15
5 files changed, 47 insertions, 31 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index 2c153788a..1e59ae9c2 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -28,7 +28,7 @@ export const Button = styled.button<ButtonInterface>`
background-color: ${props => !props.isTransparent ? colors.brandLight : 'transparent'};
border-color: ${props => (props.isTransparent && !props.isNoBorder) && '#6a6a6a'};
color: ${props => props.color || props.theme.textColor};
- padding: ${props => !props.isNoPadding && '14px 22px'};
+ padding: ${props => !props.isNoPadding && '18px 30px'};
text-align: center;
font-size: 18px;
text-decoration: none;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 5c5d1bbda..d30b7a9d1 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -1,4 +1,5 @@
import styled from 'styled-components';
+import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
interface WrapWidths {
default: string;
@@ -12,10 +13,6 @@ interface ColumnWidths {
[key: string]: string;
}
-interface PaddingSizes {
- [key: string]: string;
-}
-
interface SectionProps {
isNoPadding?: boolean;
isPadLarge?: boolean;
@@ -24,12 +21,11 @@ interface SectionProps {
isFullWidth?: boolean;
}
-interface WrapProps {
+interface WrapProps extends PaddingInterface {
width?: 'default' | 'full' | 'medium' | 'narrow';
bgColor?: string;
isWrapped?: boolean;
isCentered?: boolean;
- padding?: number | Array<'large' | 'default' | number>;
}
interface ColumnProps {
@@ -52,14 +48,6 @@ const _getColumnWidth = (args: GetColWidthArgs): string => {
return `calc(${percentWidth}% - ${gutterDiff}px)`;
};
-const _getPadding = (value: number | Array<string | number>): string => {
- if (Array.isArray(value)) {
- return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' ');
- } else {
- return `${value}px`;
- }
-};
-
const GUTTER = 30 as number;
const MAX_WIDTH = 1500;
const BREAKPOINTS = {
@@ -77,10 +65,6 @@ const COLUMN_WIDTHS: ColumnWidths = {
'1/2': _getColumnWidth({ columns: 2 }),
'2/3': _getColumnWidth({ span: 2, columns: 3 }),
};
-const PADDING_SIZES: PaddingSizes = {
- 'default': '30px',
- 'large': '60px',
-};
export const Main = styled.main`
border: 1px dotted rgba(0, 0, 255, 0.3);
@@ -113,7 +97,7 @@ export const Section = styled.section<SectionProps>`
const WrapBase = styled.div<WrapProps>`
max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
- padding: ${props => props.padding && _getPadding(props.padding)};
+ padding: ${props => props.padding && getCSSPadding(props.padding)};
background-color: ${props => props.bgColor};
margin: 0 auto;
`;
diff --git a/packages/website/ts/@next/components/text.tsx b/packages/website/ts/@next/components/text.tsx
index a746cb3b9..0be24d233 100644
--- a/packages/website/ts/@next/components/text.tsx
+++ b/packages/website/ts/@next/components/text.tsx
@@ -1,19 +1,22 @@
import * as React from 'react';
import styled from 'styled-components';
+import { getCSSPadding, PaddingInterface } from 'ts/@next/constants/utilities';
-interface HeadingProps {
- asElement?: 'h1'| 'h2'| 'h3'| 'h4';
+interface BaseTextInterface extends PaddingInterface {
size?: 'default' | 'medium' | 'large' | 'small';
isCentered?: boolean;
+}
+
+interface HeadingProps extends BaseTextInterface {
+ asElement?: 'h1'| 'h2'| 'h3'| 'h4';
+ isCentered?: boolean;
isNoMargin?: boolean;
color?: string;
}
-interface ParagraphProps {
+interface ParagraphProps extends BaseTextInterface {
isNoMargin?: boolean;
- size?: 'default' | 'small' | 'medium' | 'large';
isMuted?: boolean | number;
- isCentered?: boolean;
}
interface HeadingSizes {
@@ -55,10 +58,11 @@ const PARAGRAPH_SIZES: ParagraphSizes = {
const StyledHeading = styled.h1<HeadingProps>`
color: ${props => props.color || props.theme.textColor};
font-size: ${props => HEADING_SIZES[props.size || 'default']};
+ padding: ${props => props.padding && getCSSPadding(props.padding)};
line-height: ${props => HEADING_LINE_HEIGHTS[props.size || 'default']};
- font-weight: 300;
margin-bottom: ${props => !props.isNoMargin && '30px'};
text-align: ${props => props.isCentered && 'center'};
+ font-weight: 300;
`;
export const Heading: React.StatelessComponent<HeadingProps> = props => {
@@ -77,8 +81,9 @@ export const Heading: React.StatelessComponent<HeadingProps> = props => {
export const Paragraph = styled.p<ParagraphProps>`
font-size: ${props => PARAGRAPH_SIZES[props.size || 'default']};
margin-bottom: ${props => !props.isNoMargin && '30px'};
- line-height: 1.4;
+ padding: ${props => props.padding && getCSSPadding(props.padding)};
color: ${props => props.color || props.theme.textColor};
opacity: ${props => typeof props.isMuted === 'boolean' ? 0.75 : props.isMuted};
text-align: ${props => props.isCentered && 'center'};
+ line-height: 1.4;
`;
diff --git a/packages/website/ts/@next/constants/utilities.tsx b/packages/website/ts/@next/constants/utilities.tsx
new file mode 100644
index 000000000..7d9313583
--- /dev/null
+++ b/packages/website/ts/@next/constants/utilities.tsx
@@ -0,0 +1,20 @@
+export interface PaddingInterface {
+ padding?: number | Array<'large' | 'default' | number>;
+}
+
+interface PaddingSizes {
+ [key: string]: string;
+}
+
+const PADDING_SIZES: PaddingSizes = {
+ 'default': '30px',
+ 'large': '60px',
+};
+
+export const getCSSPadding = (value: number | Array<string | number>): string => {
+ if (Array.isArray(value)) {
+ return value.map(val => PADDING_SIZES[val] || `${val}px`).join(' ');
+ } else {
+ return `${value}px`;
+ }
+};
diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx
index b39ee409d..2feb4a302 100644
--- a/packages/website/ts/@next/pages/landing.tsx
+++ b/packages/website/ts/@next/pages/landing.tsx
@@ -67,8 +67,9 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
Powering Decentralized Exchange
</Heading>
- <Paragraph size="medium">
- 0x is the best solution for adding exchange functionality to your business.
+ <Paragraph size="medium" isMuted={true}>
+ 0x is the best solution for adding<br />
+ exchange functionality to your business.
</Paragraph>
<ButtonWrap>
@@ -83,7 +84,9 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
</Column>
<Column colWidth="1/2">
- <LogoOutlined/>
+ <WrapCentered>
+ <LogoOutlined/>
+ </WrapCentered>
</Column>
</Wrap>
</Section>
@@ -92,7 +95,11 @@ export const NextLanding: React.StatelessComponent<{}> = () => (
<WrapCentered width="narrow">
<ProtocolIcon/>
- <Paragraph size="large" isCentered={true}>
+ <Paragraph
+ size="large"
+ isCentered={true}
+ padding={['large', 0, 'default', 0]}
+ >
0x is an open protocol that enables the peer-to-peer exchange of Ethereum-based
tokens. Anyone in the world can use 0x to service a wide variety of markets
ranging from gaming items to financial instruments to assets that could have