From 6349c00f55ece3c5ae1a2c33ed741bab71b48be7 Mon Sep 17 00:00:00 2001
From: cartcrom <39385577+cartcrom@users.noreply.github.com>
Date: Tue, 29 Nov 2022 12:58:45 -0500
Subject: [PATCH] fix: aligned reverse button size w/ figma (#310)

aligned reverse button size w/ figma
---
 src/components/Swap/Output.tsx        |  2 +-
 src/components/Swap/ReverseButton.tsx | 12 ++++++------
 src/components/Swap/Skeleton.tsx      |  1 +
 src/theme/index.tsx                   |  2 +-
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/Swap/Output.tsx b/src/components/Swap/Output.tsx
index c9b451fd9..24db5aac7 100644
--- a/src/components/Swap/Output.tsx
+++ b/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.
diff --git a/src/components/Swap/ReverseButton.tsx b/src/components/Swap/ReverseButton.tsx
index 4b4a6047d..e65180b84 100644
--- a/src/components/Swap/ReverseButton.tsx
+++ b/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>
   )
 }
diff --git a/src/components/Swap/Skeleton.tsx b/src/components/Swap/Skeleton.tsx
index a8342ef43..f8df7eedb 100644
--- a/src/components/Swap/Skeleton.tsx
+++ b/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)`
diff --git a/src/theme/index.tsx b/src/theme/index.tsx
index 510f59fa2..96f4ac63b 100644
--- a/src/theme/index.tsx
+++ b/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,