Make layout more responsive

packages/website/ts/components/hero.tsx

@@ -96,12 +96,25 @@ const Description = styled.p`
     }
 `;
 
-const Content = styled.div<{ width: string }>`
+interface ContentProps {
+    width: string;
+    isCenteredMobile?: boolean;
+}
+
+const Content = styled.div<ContentProps>`
     width: 100%;
 
     @media (min-width: 768px) {
         max-width: ${props => props.width};
     }
+    ${props =>
+        props.isCenteredMobile &&
+        `
+        @media (max-width: 768px) {
+            display: flex;
+            justify-content: center;
+        }
+    `};
 `;
 
 const ButtonWrap = styled.div`
@@ -164,7 +177,11 @@ export class Hero extends React.Component<Props> {
                     isCenteredMobile={props.isCenteredMobile}
                     showFigureBottomMobile={props.showFigureBottomMobile}
                 >
-                    {props.figure && <Content width={props.figureMaxWidth || '400px'}>{props.figure}</Content>}
+                    {props.figure && (
+                        <Content isCenteredMobile={props.isCenteredMobile} width={props.figureMaxWidth || '400px'}>
+                            {props.figure}
+                        </Content>
+                    )}
 
                     <Content width={props.maxWidth ? props.maxWidth : props.figure ? '546px' : '678px'}>
                         {!!props.announcement && <Announcement {...props.announcement} />}

packages/website/ts/components/tabbed_code_demo.tsx

@@ -24,7 +24,7 @@ export const TabbedWrapper = styled.div`
     width: 100%;
     height: 586px;
     margin-left: 50px;
-    @media (max-width: 768px) {
+    @media (max-width: 1216px) {
         display: none;
     }
 `;

packages/website/ts/pages/cfl.tsx

@@ -90,12 +90,15 @@ export class CFL extends React.Component<Props> {
                     isFullWidth={true}
                     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={
                         <Button href={constants.CFL_DOCS} isInline={true}>
                             Get Started
-                        </Button>}
+                        </Button>
+                    }
                 />
                 <Section bgColor="dark" isTextCentered={true}>
                     <InlineIconWrap>

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

@@ -17,6 +17,12 @@ const CFLMetricsContainer = styled.div`
     display: flex;
     flex-direction: column;
     width: fit-content;
+    @media (max-width: 768px) {
+        margin-top: 60px;
+    }
+    @media (min-width: 768px) {
+        margin-left: 60px;
+    }
 `;
 
 const PairTabsContainer = styled.div`
@@ -42,16 +48,20 @@ interface PairTabProps {
 }
 
 const PairTab = styled.label<PairTabProps>`
-    padding: 15px 40px;
+    cursor: pointer;
     white-space: nowrap;
-    font-size: 17px;
     background-color: ${props => (props.isSelected ? props.theme.lightBgColor : '')};
     opacity: ${props => (props.isSelected ? 1 : 0.5)};
-    cursor: pointer;
     margin: 5px 0px 5px 5px;
     &:hover {
         background-color: ${props => props.theme.lightBgColor};
     }
+    padding: 10px 17px;
+    font-size: 12px;
+    @media (min-width: 1024px) {
+        padding: 15px 40px;
+        font-size: 17px;
+    }
 `;
 
 interface CFLMetricsProps {}
@@ -77,7 +87,7 @@ export class CFLMetrics extends React.Component<CFLMetricsProps, CFLMetricsState
         if (!cflMetricsData.length) {
             return null;
         }
-        const baseTokenSymbol = this._getSelectedPairData().takerSymbol;
+        const quoteToken = this._getSelectedPairData().makerSymbol;
         return (
             <CFLMetricsContainer>
                 <PairTabsContainer>
@@ -95,12 +105,12 @@ export class CFLMetrics extends React.Component<CFLMetricsProps, CFLMetricsState
                     })}
                 </PairTabsContainer>
                 <MetricsContainer>
-                    <Metrics title="Last price" metrics={[{ value: this._getLastPrice() }]} />
+                    <Metrics title={`Price in ${quoteToken}`} metrics={[{ value: this._getLastPrice() }]} />
                     <Metrics title="7 day volume" metrics={[{ value: this._getVolume() }]} />
                 </MetricsContainer>
                 <MetricsContainer>
                     <Metrics
-                        title={`7 day average slippage for $10,000 of ${baseTokenSymbol} across DEXes`}
+                        title={`7 day average slippage for $10,000`}
                         info={SLIPPAGE_TOOLTIP_TEXT}
                         metrics={this._getSlippageMetrics()}
                     />
@@ -135,9 +145,7 @@ export class CFLMetrics extends React.Component<CFLMetricsProps, CFLMetricsState
             return '—';
         }
         const num = numeral(data.lastTradePrice);
-        const formattedNum = num.format('0.00');
-        const currency = data.makerSymbol;
-        return `${formattedNum} ${currency}`;
+        return num.format('0.00');
     }
     private _getVolume(): string {
         const data = this._getSelectedPairData();

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

@@ -7,6 +7,7 @@ import { CodeTab, TabbedCodeDemo } from 'ts/components/tabbed_code_demo';
 const StepperContainer = styled.div`
     display: flex;
     padding: 30px;
+    justify-content: center;
 `;
 
 interface InteractiveDefinitionProps extends DefinitionProps {
@@ -14,7 +15,7 @@ interface InteractiveDefinitionProps extends DefinitionProps {
 }
 
 const InteractiveDefinition = styled(Definition)<InteractiveDefinitionProps>`
-    @media (min-width: 768px) {
+    @media (min-width: 1216px) {
         padding: 20px;
         background-color: ${props => (props.isSelected ? '#0D1413' : '')};
         border-left: ${props => (props.isSelected ? '3px solid #00AE99' : '3px solid rgba(0,0,0,0)')};
@@ -28,7 +29,7 @@ const InteractiveDefinition = styled(Definition)<InteractiveDefinitionProps>`
         }
     }
 
-    @media (max-width: 768px) {
+    @media (max-width: 1216px) {
         text-align: center;
         margin-top: 60px;
     }