Adds padding prop to text elements

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