feat: use rem instead of em (Uniswap#533)

src/components/ActionButton.tsx

@@ -8,9 +8,9 @@ import Row, { RowProps } from './Row'
 import Tooltip from './Tooltip'
 
 const StyledButton = styled(Button)<{ shouldUseDisabledColor?: boolean; narrow?: boolean }>`
-  border-radius: ${({ theme, narrow }) => (narrow ? theme.borderRadius.small : theme.borderRadius.medium)}em;
+  border-radius: ${({ theme, narrow }) => (narrow ? theme.borderRadius.small : theme.borderRadius.medium)}rem;
   flex-grow: 1;
-  max-height: ${({ narrow }) => (narrow ? '2.5em' : '3.5em')};
+  max-height: ${({ narrow }) => (narrow ? '2.5rem' : '3.5rem')};
   transition: background-color ${AnimationSpeed.Medium} ease-out, border-radius ${AnimationSpeed.Medium} ease-out,
     flex-grow ${AnimationSpeed.Medium} ease-out;
   ${({ theme, disabled, shouldUseDisabledColor }) =>
@@ -39,8 +39,8 @@ const grow = keyframes`
 
 const actionCss = css`
   border: 1px solid ${({ theme }) => theme.outline};
-  padding: calc(0.5em - 1px);
-  padding-left: calc(0.75em - 1px);
+  padding: calc(0.5rem - 1px);
+  padding-left: calc(0.75rem - 1px);
 
   ${ActionRow} {
     animation: ${grow} ${AnimationSpeed.Medium} ease-in;
@@ -51,17 +51,17 @@ const actionCss = css`
 
   ${StyledButton} {
     /* Subtract the padding from the borderRadius so that it nests properly. */
-    border-radius: ${({ theme }) => theme.borderRadius.medium}em;
+    border-radius: ${({ theme }) => theme.borderRadius.medium}rem;
     flex-grow: 0;
-    padding: 0 0.75em;
+    padding: 0 0.75rem;
   }
 `
 
 export const Overlay = styled(Row)<{ hasAction: boolean; narrow?: boolean }>`
-  border-radius: ${({ theme, narrow }) => (narrow ? theme.borderRadius.small : theme.borderRadius.medium)}em;
+  border-radius: ${({ theme, narrow }) => (narrow ? theme.borderRadius.small : theme.borderRadius.medium)}rem;
   flex-flow: row-reverse nowrap;
-  margin-top: 0.25em;
-  min-height: ${({ narrow }) => (narrow ? '2.5em' : '3.5em')};
+  margin-top: 0.25rem;
+  min-height: ${({ narrow }) => (narrow ? '2.5rem' : '3.5rem')};
   transition: padding ${AnimationSpeed.Medium} ease-out;
   ${({ hasAction }) => hasAction && actionCss}
 `

src/components/BrandedFooter.tsx

@@ -14,9 +14,9 @@ const UniswapA = styled(ExternalLink)`
 
   ${Logo} {
     fill: ${({ theme }) => theme.secondary};
-    height: 1em;
+    height: 1rem;
     transition: transform ${AnimationSpeed.Medium} ease, fill ${AnimationSpeed.Medium} ease;
-    width: 1em;
+    width: 1rem;
     will-change: transform;
   }
 

src/components/Button.tsx

@@ -6,7 +6,7 @@ import { AnimationSpeed, Color } from 'theme'
 export const BaseButton = styled.button`
   background-color: transparent;
   border: none;
-  border-radius: 0.5em;
+  border-radius: 0.5rem;
   color: currentColor;
   cursor: pointer;
   font-size: inherit;
@@ -52,7 +52,7 @@ export const TextButton = transparentButton('accent')
 const SecondaryButton = transparentButton('secondary')
 
 const StyledIconButton = styled(SecondaryButton)`
-  height: 1em;
+  height: 1rem;
 `
 
 interface IconButtonProps {

src/components/Column.tsx

@@ -19,11 +19,11 @@ const Column = styled.div<ColumnProps>`
   display: ${({ flex }) => (flex ? 'flex' : 'grid')};
   flex-direction: column;
   flex-grow: ${({ grow }) => grow && 1};
-  gap: ${({ gap }) => gap && `${gap}em`};
+  gap: ${({ gap }) => gap && `${gap}rem`};
   grid-auto-flow: row;
   grid-template-columns: 1fr;
   justify-content: ${({ justify }) => justify ?? 'space-between'};
-  padding: ${({ padded, padding }) => padding ?? (padded ? '0.75em' : 'unset')};
+  padding: ${({ padded, padding }) => padding ?? (padded ? '0.75rem' : 'unset')};
 
   ${({ css }) => css}
 `

src/components/ConnectWallet/ConnectWalletDialog.tsx

@@ -17,30 +17,30 @@ const NO_WALLET_HELP_CENTER_URL = 'https://help.uniswap.org/en/articles/5391585-
 const Body = styled(Column)`
   display: grid;
   gap: 12px;
-  grid-template-columns: repeat(2, calc(50% - 0.5em / 2));
+  grid-template-columns: repeat(2, calc(50% - 0.5rem / 2));
   grid-template-rows: 2fr 1fr;
-  height: calc(100% - 2.5em);
+  height: calc(100% - 2.5rem);
 `
 
 const StyledButtonContents = styled(Column)`
-  gap: 0.75em;
+  gap: 0.75rem;
   justify-items: center;
 `
 
 const StyledMainButton = styled(Button)`
-  border-radius: ${({ theme }) => theme.borderRadius.medium}em;
+  border-radius: ${({ theme }) => theme.borderRadius.medium}rem;
   grid-column: 1 / 3;
   height: 100%;
   padding: 22px;
 `
 
 const StyledMainButtonRow = styled(Row)`
-  grid-template-columns: repeat(2, calc(50% - 1em / 2));
+  grid-template-columns: repeat(2, calc(50% - 1rem / 2));
   justify-items: center;
 `
 
 const StyledSmallButton = styled(Button)`
-  border-radius: ${({ theme }) => theme.borderRadius.medium}em;
+  border-radius: ${({ theme }) => theme.borderRadius.medium}rem;
   height: 88px;
   padding: 16px;
 `

src/components/Dialog.tsx

@@ -96,11 +96,11 @@ export function useIsDialogPageCentered() {
 
 const HeaderRow = styled(Row)`
   display: flex;
-  height: 1.75em;
+  height: 1.75rem;
   ${largeIconCss}
 
   justify-content: flex-start;
-  margin: 0.5em 0.75em 0.75em;
+  margin: 0.5rem 0.75rem 0.75rem;
   position: relative;
 `
 
@@ -159,22 +159,22 @@ export const Modal = styled.div<{ color: Color; constrain?: boolean; padded?: bo
 
 const slideInLeft = keyframes`
   from {
-    transform: translateX(calc(100% - 0.25em));
+    transform: translateX(calc(100% - 0.25rem));
   }
 `
 const slideOutLeft = keyframes`
   to {
-    transform: translateX(calc(0.25em - 100%));
+    transform: translateX(calc(0.25rem - 100%));
   }
 `
 const slideOutRight = keyframes`
   to {
-    transform: translateX(calc(100% - 0.25em));
+    transform: translateX(calc(100% - 0.25rem));
   }
 `
 
 const HiddenWrapper = styled.div<{ hideOverflow?: boolean; constrain?: boolean }>`
-  border-radius: ${({ theme }) => theme.borderRadius.large}em;
+  border-radius: ${({ theme }) => theme.borderRadius.large}rem;
   height: ${({ constrain }) => (constrain ? 'fit-content' : '100%')};
   left: 0;
   outline: transparent;

src/components/Error/ErrorView.tsx

@@ -10,7 +10,7 @@ import { Color, ThemedText } from 'theme'
 
 const HeaderIcon = styled(LargeIcon)`
   flex-grow: 1;
-  margin: 2em 0;
+  margin: 2rem 0;
 `
 
 interface StatusHeaderProps {
@@ -34,7 +34,7 @@ export function StatusHeader({ icon: Icon, iconColor, iconSize = 2.5, children }
 }
 
 const ExpandoContent = styled(ThemedText.Code)`
-  margin: 0.5em;
+  margin: 0.5rem;
 `
 
 const ErrorDialogWrapper = styled(Column)`
@@ -54,7 +54,7 @@ export default function ErrorDialog({ header, message, error, action, onClick, o
   const [open, setOpen] = useState(false)
 
   return (
-    <ErrorDialogWrapper flex padding="1em 0.5em 0.25em" gap={0.5} align="stretch">
+    <ErrorDialogWrapper flex padding="1rem 0.5rem 0.25rem" gap={0.5} align="stretch">
       <Row flex flow="row-reverse">
         <LargeIcon icon={StyledXButton} onClick={onDismiss} />
       </Row>
@@ -69,14 +69,14 @@ export default function ErrorDialog({ header, message, error, action, onClick, o
           title={open ? <Trans>Show less</Trans> : <Trans>Show more</Trans>}
           open={open}
           onExpand={() => setOpen((open) => !open)}
-          maxHeight={11.5 /* em */}
+          maxHeight={11.5 /* rem */}
         >
           <Column flex grow padded>
             <ExpandoContent userSelect>{error.toString()}</ExpandoContent>
           </Column>
         </Expando>
       ) : (
-        <Column style={{ height: '7.5em' }} />
+        <Column style={{ height: '7.5rem' }} />
       )}
       <ActionButton color="accentSoft" onClick={onClick} narrow>
         {action}

src/components/Expando.tsx

@@ -10,7 +10,7 @@ import { AnimationSpeed, ThemedText } from 'theme'
 
 const HeaderColumn = styled(Column)`
   cursor: pointer;
-  padding: 1.25em 1.5em;
+  padding: 1.25rem 1.5rem;
 `
 
 const StyledWrapper = styled(Column)<{ expanded: boolean }>`
@@ -33,7 +33,7 @@ const TitleHeader = styled.div`
   justify-content: center;
 `
 
-const MAX_HEIGHT = 20 // em
+const MAX_HEIGHT = 20 // rem
 
 function getExpandoContentHeight(height: number | undefined, maxHeight: number | undefined): number {
   return Math.min(height ?? MAX_HEIGHT, maxHeight ?? MAX_HEIGHT)
@@ -44,14 +44,14 @@ const ExpandoColumn = styled(Column)<{
   maxHeight?: number
   open: boolean
 }>`
-  max-height: ${({ open, height, maxHeight }) => (open ? getExpandoContentHeight(height, maxHeight) : 0)}em;
+  max-height: ${({ open, height, maxHeight }) => (open ? getExpandoContentHeight(height, maxHeight) : 0)}rem;
   overflow: hidden;
   position: relative;
   transition: max-height ${AnimationSpeed.Medium}, padding ${AnimationSpeed.Medium};
 `
 
 const InnerColumn = styled(Column)<{ height?: number; maxHeight?: number }>`
-  max-height: ${({ height, maxHeight }) => getExpandoContentHeight(height, maxHeight)}em;
+  max-height: ${({ height, maxHeight }) => getExpandoContentHeight(height, maxHeight)}rem;
 `
 
 export const IconPrefix = styled.div`
@@ -63,10 +63,10 @@ interface ExpandoProps extends ColumnProps {
   iconPrefix?: ReactNode
   open: boolean
   onExpand: () => void
-  // The absolute height of the expanded container, in em.
-  // If not provided, the container will expand to fit its contents up to {maxHeight}em.
+  // The absolute height of the expanded container, in rem.
+  // If not provided, the container will expand to fit its contents up to {maxHeight}rem.
   height?: number
-  // The maximum height of the expanded container, in em.
+  // The maximum height of the expanded container, in rem.
   // If relying on auto-sizing, this should be something close to (but still larger than)
   // the content's height. Otherwise, the animation will feel fast.
   maxHeight?: number

src/components/Header.tsx

@@ -6,8 +6,8 @@ import { ThemedText } from 'theme'
 import Row from './Row'
 
 const HeaderRow = styled(Row)`
-  height: 1.5em;
-  margin: 0.5em 0.75em 1em;
+  height: 1.5rem;
+  margin: 0.5rem 0.75rem 1rem;
   ${largeIconCss}
 `
 

src/components/Input.tsx

@@ -143,9 +143,9 @@ export const DecimalInput = forwardRef(function DecimalInput(props: InputProps,
 export const inputCss = css`
   background-color: ${({ theme }) => theme.module};
   border: 1px solid ${({ theme }) => theme.outline};
-  border-radius: ${({ theme }) => theme.borderRadius.medium}em;
+  border-radius: ${({ theme }) => theme.borderRadius.medium}rem;
   cursor: text;
-  padding: calc(0.75em - 1px);
+  padding: calc(0.75rem - 1px);
 
   :hover:not(:focus-within) {
     background-color: ${({ theme }) => theme.onHover(theme.container)};

src/components/Popover.tsx

@@ -23,7 +23,7 @@ const PopoverContainer = styled.div<{ show: boolean }>`
   ${globalFontStyles}
   background-color: ${({ theme }) => theme.dialog};
   border: 1px solid ${({ theme }) => theme.outline};
-  border-radius: 0.5em;
+  border-radius: 0.5rem;
   opacity: ${(props) => (props.show ? 1 : 0)};
   padding: 0.75rem;
   transition: visibility ${AnimationSpeed.Medium} linear, opacity ${AnimationSpeed.Medium} linear;
@@ -35,7 +35,7 @@ const Reference = styled.div`
   align-items: center;
   display: flex;
   justify-content: center;
-  min-height: 1em;
+  min-height: 1rem;
 `
 
 const Arrow = styled.div`

src/components/Row.tsx

@@ -21,7 +21,7 @@ const Row = styled.div<RowProps>`
   display: ${({ flex }) => (flex ? 'flex' : 'grid')};
   flex-flow: ${({ flow }) => flow ?? 'wrap'};
   flex-grow: ${({ grow }) => grow && 1};
-  gap: ${({ gap }) => gap && `${gap}em`};
+  gap: ${({ gap }) => gap && `${gap}rem`};
   grid-auto-flow: column;
   grid-template-columns: ${({ grow, children }) => {
     if (grow === 'first') return '1fr'
@@ -30,7 +30,7 @@ const Row = styled.div<RowProps>`
     return undefined
   }};
   justify-content: ${({ justify }) => justify ?? 'space-between'};
-  padding: ${({ pad }) => pad && `0 ${pad}em`};
+  padding: ${({ pad }) => pad && `0 ${pad}rem`};
 `
 
 export default Row

src/components/Rule.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components/macro'
 const Rule = styled.hr<{ padded?: true; scrollingEdge?: 'top' | 'bottom' }>`
   border: none;
   border-bottom: 1px solid ${({ theme }) => theme.outline};
-  margin: 0 ${({ padded }) => (padded ? '0.75em' : 0)};
+  margin: 0 ${({ padded }) => (padded ? '0.75rem' : 0)};
   margin-bottom: ${({ scrollingEdge }) => (scrollingEdge === 'bottom' ? -1 : 0)}px;
   margin-top: ${({ scrollingEdge }) => (scrollingEdge !== 'bottom' ? -1 : 0)}px;
 

src/components/Swap/Input.tsx

@@ -23,7 +23,7 @@ import TokenInput, { TokenInputHandle } from './TokenInput'
 
 const USDC = styled(Row)`
   ${loadingTransitionCss};
-  gap: 0.25em;
+  gap: 0.25rem;
 `
 
 const Balance = styled(ThemedText.Body2)`
@@ -32,9 +32,9 @@ const Balance = styled(ThemedText.Body2)`
 
 const InputColumn = styled(Column)<{ disableHover?: boolean; isWide: boolean }>`
   background-color: ${({ theme }) => theme.module};
-  border-radius: ${({ theme }) => theme.borderRadius.medium}em;
-  margin-bottom: 0.25em;
-  padding: ${({ isWide }) => (isWide ? '1em 0' : '1em 0 1.5em')};
+  border-radius: ${({ theme }) => theme.borderRadius.medium}rem;
+  margin-bottom: 0.25rem;
+  padding: ${({ isWide }) => (isWide ? '1rem 0' : '1rem 0 1.5rem')};
   position: relative;
 
   &:before {
@@ -146,7 +146,7 @@ export function FieldWrapper({
       onClick={onClick}
       className={className}
     >
-      <Row pad={1 /* em */}>
+      <Row pad={1 /* rem */}>
         <ThemedText.Subhead2 color={'secondary'}>{subheader}</ThemedText.Subhead2>
       </Row>
       <TokenInput

src/components/Swap/Output.tsx

@@ -13,7 +13,7 @@ import { FieldWrapper } from './Input'
 export const colorAtom = atom<string | undefined>(undefined)
 
 const OutputWrapper = styled(FieldWrapper)<{ hasColor?: boolean | null; isWide: boolean }>`
-  padding: ${({ isWide }) => (isWide ? '1em 0' : '1.5em 0 1em')};
+  padding: ${({ isWide }) => (isWide ? '1rem 0' : '1.5rem 0 1rem')};
 
   // Set transitions to reduce color flashes when switching color/token.
   // When color loads, transition the background so that it transitions from the empty or last state, but not _to_ the empty state.

src/components/Swap/ReverseButton.tsx

@@ -21,7 +21,7 @@ const StyledReverseButton = styled(Button)`
   align-items: center;
   background-color: ${({ theme }) => theme.module};
   border: 4px solid ${({ theme }) => theme.container};
-  border-radius: ${({ theme }) => theme.borderRadius.medium}em;
+  border-radius: ${({ theme }) => theme.borderRadius.medium}rem;
   display: flex;
   justify-content: center;
   width: 100%;