fix: aligned reverse button size w/ figma (#310)

aligned reverse button size w/ figma

src/components/Swap/Output.tsx

@@ -15,7 +15,7 @@ const OutputWrapper = styled(FieldWrapper)<{ hasColor?: boolean | null }>`
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   margin-bottom: 0;
-  padding: 24px 0 20px 0;
+  padding: 1.75em 0 1.25em 0;
 
   // 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

@@ -1,5 +1,5 @@
 import { useSwapInfo, useSwitchSwapCurrencies } from 'hooks/swap'
-import { ArrowDown } from 'icons'
+import { ArrowDown, LargeIcon } from 'icons'
 import { transparentize } from 'polished'
 import styled from 'styled-components/macro'
 import { Layer } from 'theme'
@@ -8,18 +8,18 @@ import Button from '../Button'
 
 const StyledReverseButton = styled(Button)`
   align-items: center;
-  background-color: ${({ theme }) => theme.module};
+  background-color: ${({ theme }) => theme.interactive};
   border: 4px solid;
   border-color: ${({ theme }) => theme.container};
-  border-radius: ${({ theme }) => theme.borderRadius * 0.75}em;
+  border-radius: ${({ theme }) => theme.borderRadius}em;
   display: flex;
-  height: 40px;
+  height: 48px;
   justify-content: center;
   left: 50%;
   position: absolute;
   transform: translate(-50%, -60%);
   transition: 125ms ease background-color;
-  width: 40px;
+  width: 48px;
   z-index: ${Layer.OVERLAY};
   :hover {
     background-color: ${({ theme }) => transparentize(0.2, theme.module)};
@@ -33,7 +33,7 @@ export default function ReverseButton() {
 
   return (
     <StyledReverseButton disabled={isDisabled} onClick={switchCurrencies}>
-      <ArrowDown />
+      <LargeIcon icon={ArrowDown} />
     </StyledReverseButton>
   )
 }

src/components/Swap/Skeleton.tsx

@@ -44,6 +44,7 @@ const OutputColumn = styled(Column)`
   background-color: ${({ theme }) => theme.module};
   border-radius: ${({ theme }) => theme.borderRadius - 0.25}em;
   display: flex;
+  padding-top: 0.25em;
 `
 
 const OutputInnerTopColumn = styled(Column)`

src/theme/index.tsx

@@ -53,7 +53,7 @@ export const darkTheme: Colors = {
   accent: brandDark,
   container: 'hsl(225, 30%, 8%)',
   module: 'hsl(222, 37%, 12%)',
-  interactive: 'hsl(224, 10%, 28%)',
+  interactive: 'hsl(223, 28%, 22%)',
   outline: 'hsl(227, 10%, 37.5%)',
   dialog: black,