Tweak definition

packages/website/ts/@next/components/definition.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Button } from 'ts/@next/components/button';
 import { Icon } from 'ts/@next/components/icon';
-import { Paragraph } from 'ts/@next/components/text';
+import { Paragraph, Heading } from 'ts/@next/components/text';
 
 interface Action {
     label: string;
@@ -18,6 +18,7 @@ interface Props {
     icon: string;
     iconSize?: 'medium' | 'large' | number;
     title: string;
+    titleSize?: 'small' | 'default' | number;
     description: React.ReactNode | string;
     actions?: Action[];
 }
@@ -31,9 +32,14 @@ export const Definition = (props: Props) => (
         />
 
         <TextWrap {...props}>
-            <Title>
+            <Heading
+                asElement="h2"
+                fontWeight="400"
+                marginBottom={props.titleSize === 'small' ? '7px' : '15px'}
+                size={props.titleSize || 'default'}
+            >
                 {props.title}
-            </Title>
+            </Heading>
 
             <Paragraph isMuted={true}>
                 {props.description}
@@ -91,12 +97,6 @@ const TextWrap = styled.div<Props>`
     }
 `;
 
-const Title = styled.h2`
-    font-size: 20px;
-    line-height: 1.3;
-    margin-bottom: 15px;
-`;
-
 const LinkWrap = styled.div`
     display: inline-flex;
     margin-top: 60px;

packages/website/ts/@next/pages/launch_kit.tsx

@@ -55,6 +55,7 @@ export class NextLaunchKit extends React.PureComponent {
                 >
                     <Definition
                         title="Networked Liquidity Pool"
+                        titleSize="small"
                         description="Tap into and share liquidity with other relayers"
                         icon="supportForAllEthereumStandards"
                         iconSize="large"
@@ -63,6 +64,7 @@ export class NextLaunchKit extends React.PureComponent {
 
                     <Definition
                         title="Extensible Code Repo"
+                        titleSize="small"
                         description="Fork and extend to support modes of exchange"
                         icon="networkedLiquidity"
                         iconSize="large"
@@ -71,6 +73,7 @@ export class NextLaunchKit extends React.PureComponent {
 
                     <Definition
                         title="Exchange Ethereum based Tokens"
+                        titleSize="small"
                         description="Enable trading for any ERC-20 or ERC-721 asset"
                         icon="flexibleIntegration"
                         iconSize="large"
@@ -85,7 +88,8 @@ export class NextLaunchKit extends React.PureComponent {
                         icon={item.icon}
                         title={item.title}
                         description={item.description}
-                        isWithMargin={true}
+                        isInlineIcon={true}
+                        iconSize={240}
                     />
                 ))}
                 </Section>

packages/website/ts/@next/pages/why.tsx

@@ -101,6 +101,7 @@ export class NextWhy extends React.PureComponent {
                 >
                     <Definition
                         title="Support for all Ethereum Standards"
+                        titleSize="small"
                         description="0x Protocol facilitates the decentralized exchange of a growing number of Ethereum-based tokens, including all ERC-20 and ERC-721 assets. Additional ERC standards can be added to the protocol..."
                         icon="supportForAllEthereumStandards"
                         iconSize="large"
@@ -109,6 +110,7 @@ export class NextWhy extends React.PureComponent {
 
                     <Definition
                         title="Shared Networked Liquidity"
+                        titleSize="small"
                         description="0x is building a layer of networked liquidity that will lower the barriers to entry. By enabling businesses to tap into a shared pool of digital assets, it will create a more stable financial system."
                         icon="networkedLiquidity"
                         iconSize="large"
@@ -117,6 +119,7 @@ export class NextWhy extends React.PureComponent {
 
                     <Definition
                         title="Support for all Ethereum Standards"
+                        titleSize="small"
                         description="Relayers are businesses around the world that utilize 0x to integrate exchange functionality into a wide variety of products including order books, games, and digital art marketplaces."
                         icon="flexibleIntegration"
                         iconSize="large"
@@ -143,6 +146,7 @@ export class NextWhy extends React.PureComponent {
                                         key={`offers-${index}`}
                                         icon={item.icon}
                                         title={item.title}
+                                        titleSize="small"
                                         description={item.description}
                                         isWithMargin={true}
                                     />
@@ -171,6 +175,7 @@ export class NextWhy extends React.PureComponent {
                                         key={`functionality-${index}`}
                                         icon={item.icon}
                                         title={item.title}
+                                        titleSize="small"
                                         description={item.description}
                                         isWithMargin={true}
                                     />