Improve tooltip and copy

packages/website/ts/components/info_tooltip.tsx

@@ -4,8 +4,10 @@ import styled from 'styled-components';
 
 import { Icon } from 'ts/components/icon';
 
-const InfoTooltipContainer = styled.div`
+const InfoTooltipContainer = styled.div<InfoTooltipProps>`
     cursor: pointer;
+    position: relative;
+    left: ${props => props.left || '0px'};
 `;
 const Tooltip = styled.div`
     max-width: 250px;
@@ -14,11 +16,12 @@ const Tooltip = styled.div`
 
 export interface InfoTooltipProps {
     id: string;
+    left?: string;
 }
 
 export const InfoTooltip: React.FC<InfoTooltipProps> = props => {
     return (
-        <InfoTooltipContainer>
+        <InfoTooltipContainer {...props}>
             <ReactTooltip id={props.id} type="light">
                 <Tooltip>{props.children}</Tooltip>
             </ReactTooltip>

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

@@ -75,7 +75,7 @@ export class CFLMetrics extends React.Component<CFLMetricsProps, CFLMetricsState
         if (!cflMetricsData) {
             return null;
         }
-
+        const baseTokenSymbol = this._getSelectedPairData().takerSymbol;
         return (
             <CFLMetricsContainer>
                 <PairTabsContainer>
@@ -98,14 +98,14 @@ export class CFLMetrics extends React.Component<CFLMetricsProps, CFLMetricsState
                 </MetricsContainer>
                 <MetricsContainer>
                     <Metrics
-                        title="7 day average slippage across DEXes"
+                        title={`7 day average slippage for $10,000 of ${baseTokenSymbol} across DEXes`}
                         info={SLIPPAGE_TOOLTIP_TEXT}
                         metrics={this._getSlippageMetrics()}
                     />
                 </MetricsContainer>
                 <FreshnessIndicator>
                     <Paragraph size="small" textAlign="right">
-                        Data updates every 30 minutes.
+                        Updates every 30 minutes.
                     </Paragraph>
                 </FreshnessIndicator>
             </CFLMetricsContainer>

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

@@ -37,7 +37,11 @@ export const Metrics: React.FC<MetricsProps> = props => (
             <Paragraph marginBottom="15px" size="small">
                 {props.title}
             </Paragraph>
-            {props.info && <InfoTooltip id="slippage-def">{props.info}</InfoTooltip>}
+            {props.info && (
+                <InfoTooltip id="slippage-def" left="16px">
+                    {props.info}
+                </InfoTooltip>
+            )}
         </TitleInfoContainer>
         <MetricValueContainer>
             {props.metrics.map((metric, index) => (