More UI bug fixes (#1515)

* fix for error token map parsings

* update varios UI styles

* update padding on & amounts

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react'
 import useTheme from '../../hooks/useTheme'
 import { TYPE } from '../../theme'
 import { warningSeverity } from '../../utils/prices'
+import HoverInlineText from 'components/HoverInlineText'
 
 export function FiatValue({
   fiatValue,
@@ -23,7 +24,8 @@ export function FiatValue({
 
   return (
     <TYPE.body fontSize={14} color={fiatValue ? theme.text2 : theme.text4}>
-      {fiatValue ? '~' : ''}${fiatValue ? Number(fiatValue?.toSignificant(6)).toLocaleString('en') : '-'}
+      {fiatValue ? '~' : ''}$
+      <HoverInlineText text={fiatValue ? Number(fiatValue?.toSignificant(6)).toLocaleString('en') : '-'} />{' '}
       {priceImpact ? (
         <span style={{ color: priceImpactColor }}> ({priceImpact.multiply(-100).toSignificant(3)}%)</span>
       ) : null}

src/components/HoverInlineText/index.tsx

@@ -2,7 +2,7 @@ import Tooltip from 'components/Tooltip'
 import React, { useState } from 'react'
 import styled from 'styled-components'
 
-const TextWrapper = styled.div<{ margin: boolean; link: boolean; fontSize?: string; adjustSize?: boolean }>`
+const TextWrapper = styled.span<{ margin: boolean; link: boolean; fontSize?: string; adjustSize?: boolean }>`
   position: relative;
   margin-left: ${({ margin }) => margin && '4px'};
   color: ${({ theme, link }) => (link ? theme.blue1 : theme.text1)};

src/components/PositionListItem/index.tsx

@@ -15,6 +15,7 @@ import { unwrappedToken } from 'utils/wrappedCurrency'
 import { DAI, USDC, USDT, WBTC } from '../../constants'
 import RangeBadge from 'components/Badge/RangeBadge'
 import { RowFixed } from 'components/Row'
+import HoverInlineText from 'components/HoverInlineText'
 
 const Row = styled(Link)`
   align-items: center;
@@ -244,8 +245,10 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
           >
             <RangeText>
               <ExtentsText>Min: </ExtentsText>
-              {formatPrice(priceLower, 5)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' per '}{' '}
-              {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol}
+              {formatPrice(priceLower, 5)}{' '}
+              <HoverInlineText text={manuallyInverted ? currencyQuote?.symbol ?? '' : currencyBase?.symbol ?? ''} />{' '}
+              {' per '}{' '}
+              <HoverInlineText text={manuallyInverted ? currencyBase?.symbol ?? '' : currencyQuote?.symbol ?? ''} />
             </RangeText>{' '}
             <HideSmall>
               <DoubleArrow>⟷</DoubleArrow>{' '}
@@ -255,8 +258,13 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
             </SmallOnly>
             <RangeText>
               <ExtentsText>Max:</ExtentsText>
-              {formatPrice(priceUpper, 5)} {manuallyInverted ? currencyQuote?.symbol : currencyBase?.symbol} {' per '}{' '}
-              {manuallyInverted ? currencyBase?.symbol : currencyQuote?.symbol}
+              {formatPrice(priceUpper, 5)}{' '}
+              <HoverInlineText text={manuallyInverted ? currencyQuote?.symbol ?? '' : currencyBase?.symbol ?? ''} />{' '}
+              {' per '}{' '}
+              <HoverInlineText
+                maxCharacters={10}
+                text={manuallyInverted ? currencyBase?.symbol ?? '' : currencyQuote?.symbol ?? ''}
+              />
             </RangeText>{' '}
           </RangeLineItem>
         </>

src/components/Tooltip/index.tsx

@@ -5,8 +5,8 @@ import Popover, { PopoverProps } from '../Popover'
 const TooltipContainer = styled.div`
   width: 256px;
   padding: 0.6rem 1rem;
-  /* line-height: 150%; */
   font-weight: 400;
+  word-break: break-word;
 `
 
 interface TooltipProps extends Omit<PopoverProps, 'content'> {

src/pages/Pool/CTACards.tsx

@@ -109,6 +109,7 @@ const ResponsiveColumn = styled(AutoColumn)`
 `
 
 const StyledImage = styled.img`
+  height: 114px;
   margin-top: -28px;
   ${({ theme }) => theme.mediaWidth.upToMedium`
     height: 80px;