Fixed up some design nits and updated copy

packages/website/ts/components/code_demo.tsx

@@ -14,7 +14,6 @@ const CustomPre = styled.pre`
     width: 100%;
     height: 100%;
     max-height: 800px;
-    border-radius: 4px;
     code {
         background-color: inherit !important;
         border-radius: 0px;
@@ -33,7 +32,6 @@ const CustomPre = styled.pre`
     }
     code:last-of-type {
         position: relative;
-        top: 10px;
         top: 0;
         padding-top: 11px;
         display: inline-block;
@@ -191,7 +189,6 @@ export class CodeDemo extends React.Component<CodeDemoProps, CodeDemoState> {
 }
 
 const StyledButton = styled(Button)`
-    border-radius: 4px;
     font-size: 15px;
     font-weight: 400;
     padding: 9px 21px 7px;

packages/website/ts/components/dropdowns/dropdown_products.tsx

@@ -18,9 +18,9 @@ const navData = [
         url: WebsitePaths.LaunchKit,
     },
     {
-        title: 'Swap Tokens',
+        title: 'Asset Swapper',
         description: 'Swap tokens via smart contracts',
-        url: WebsitePaths.SwapTokens,
+        url: WebsitePaths.AssetSwapper,
     },
     {
         title: 'Governance',

packages/website/ts/components/mobileNav.tsx

@@ -31,7 +31,7 @@ export class MobileNav extends React.PureComponent<Props> {
                                 <Link to={WebsitePaths.LaunchKit}>0x Launch Kit</Link>
                             </li>
                             <li>
-                                <Link to={WebsitePaths.SwapTokens}>Swap Tokens</Link>
+                                <Link to={WebsitePaths.AssetSwapper}>Swap Tokens</Link>
                             </li>
                         </ul>
                     </Section>

packages/website/ts/components/tabbed_code_demo.tsx

@@ -22,8 +22,10 @@ interface TabProps {
 export const TabbedWrapper = styled.div`
     background-color: #0c2320;
     width: 100%;
-    height: 586px;
+    min-width: 605px;
+    height: 645px;
     margin-left: 50px;
+    overflow: hidden;
     @media (max-width: 1216px) {
         display: none;
     }

packages/website/ts/index.tsx

@@ -131,7 +131,7 @@ render(
                                 <Route exact={true} path={`${WebsitePaths.Vote}/:zeip`} component={Governance as any} />
                                 <Route exact={true} path={WebsitePaths.Vote} component={VoteIndex as any} />
                                 <Route exact={true} path={WebsitePaths.Extensions} component={Extensions as any} />
-                                <Route exact={true} path={WebsitePaths.SwapTokens} component={CFL as any} />
+                                <Route exact={true} path={WebsitePaths.AssetSwapper} component={CFL as any} />
                                 <Route
                                     exact={true}
                                     path={WebsitePaths.PrivacyPolicy}

packages/website/ts/pages/cfl.tsx

@@ -73,7 +73,7 @@ const useCasesData = [
             'DeFi projects swap tokens through 0x to improve their UX by abstracting out required tokens, rebalancing user positions in real-time, and pre-baking terms of an asset sale into contracts so that they can be trustlessly executed in the future.',
         links: [
             {
-                label: 'Explore asset-swapper',
+                label: 'Explore Asset Swapper',
                 url: constants.CFL_DOCS,
             },
             {
@@ -89,7 +89,7 @@ const useCasesData = [
             'Trading bots consume 0x liquidity to atomically swap tokens at tight spreads and perform risk-free arbitrage across both centralized and decentralized exchange venues.',
         links: [
             {
-                label: 'Explore asset-swapper',
+                label: 'Explore Asset Swapper',
                 url: constants.CFL_DOCS,
             },
             {
@@ -109,17 +109,17 @@ export class CFL extends React.Component<Props> {
                     title="Swap tokens by tapping into 0x's networked liquidity"
                     isLargeTitle={false}
                     isFullWidth={true}
-                    description="Source liquidity for your DeFi users by filling orders at the best prices."
+                    description="Source liquidity for your DeFi users by filling orders at the best prices"
                     showFigureBottomMobile={true}
                     isCenteredMobile={true}
                     figure={<CFLMetrics />}
                     figureMaxWidth="600px"
                     maxWidth="500px"
-                    actions={
+                    actions={(
                         <Button href={constants.CFL_DOCS} isInline={true}>
                             Get Started
                         </Button>
-                    }
+                    )}
                 />
                 <Section bgColor="dark" isTextCentered={true}>
                     <InlineIconWrap>

packages/website/ts/pages/cfl/cfl_metrics.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { Icon } from 'ts/components/icon';
-import { Paragraph } from 'ts/components/text';
 import { defaultData } from 'ts/pages/cfl/default_data';
 import { Metrics, MetricValue } from 'ts/pages/cfl/metrics';
 import { backendClient } from 'ts/utils/backend_client';
@@ -39,10 +38,6 @@ const MetricsContainer = styled.div`
     }
 `;
 
-const FreshnessIndicator = styled.div`
-    margin-top: 10px;
-`;
-
 interface PairTabProps {
     isSelected: boolean;
 }
@@ -110,11 +105,6 @@ export class CFLMetrics extends React.Component<CFLMetricsProps, CFLMetricsState
                         metrics={this._getSlippageMetrics()}
                     />
                 </MetricsContainer>
-                <FreshnessIndicator>
-                    <Paragraph size="small" textAlign="right">
-                        Updates every 30 minutes.
-                    </Paragraph>
-                </FreshnessIndicator>
             </CFLMetricsContainer>
         );
     }

packages/website/ts/pages/cfl/code_stepper.tsx

@@ -108,6 +108,8 @@ const txHash = await yourSmartContract.methods
     zeroExExchangeAddress.call(calldataHexString);
   }
 }
+
+
 `,
         label: 'smartContract.sol',
         language: 'typescript',

packages/website/ts/types.ts

@@ -481,7 +481,7 @@ export enum WebsitePaths {
     Vote = '/vote',
     Extensions = '/extensions',
     Explore = '/explore',
-    SwapTokens = '/swap-tokens',
+    AssetSwapper = '/asset-swapper',
 }
 
 export enum DocPackages {

packages/website/ts/utils/document_meta_constants.tsx

@@ -108,8 +108,8 @@ export const documentConstants: { [s: string]: DocumentMetadata } = {
         keywords: '',
     },
     CFL: {
-        title: '0x: asset-swapper: Programmatically swap tokens via smart contracts',
-        description: 'Bring automatic token trading to your DeFi users with asset-swapper',
+        title: '0x Asset Swapper: Programmatically swap tokens via smart contracts',
+        description: 'Bring automatic token trading to your DeFi users with Asset Swapper',
         keywords: '',
     },
 };