From 2222ddfba3e1139ed798ef2ec705a80cad6e2db2 Mon Sep 17 00:00:00 2001
From: Jordan Frankfurt <jordanwfrankfurt@gmail.com>
Date: Tue, 11 Oct 2022 17:07:55 -0500
Subject: [PATCH] fix: design nits (#259)

* fix: font-weight updates

* Toolbar icon sizing and text alignment

* undo font-weight increase

* feat: down arrow instead of double arrow reverse

* toolbar caption text should be color=secondary unless rendering an exchange rate

* update placeholder disabled color

* pr feedback
---
 src/components/Input.tsx                |  3 ++
 src/components/Swap/ReverseButton.tsx   | 69 +++++++------------------
 src/components/Swap/Toolbar/Caption.tsx |  2 +-
 yarn.lock                               |  6 +--
 4 files changed, 25 insertions(+), 55 deletions(-)

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index ac0ada636..e3cd75632 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -45,6 +45,9 @@ const Input = styled.input`
     // Overrides WebKit's override of input:disabled color.
     -webkit-text-fill-color: ${({ theme }) => transparentize(1 - loadingOpacity, theme.primary)};
     color: ${({ theme }) => transparentize(1 - loadingOpacity, theme.primary)};
+    ::placeholder {
+      color: ${({ theme }) => transparentize(1 - loadingOpacity, theme.primary)};
+    }
   }
 `
 
diff --git a/src/components/Swap/ReverseButton.tsx b/src/components/Swap/ReverseButton.tsx
index ce69b289f..4b4a6047d 100644
--- a/src/components/Swap/ReverseButton.tsx
+++ b/src/components/Swap/ReverseButton.tsx
@@ -1,72 +1,39 @@
 import { useSwapInfo, useSwitchSwapCurrencies } from 'hooks/swap'
-import { ArrowDown as ArrowDownIcon, ArrowUp as ArrowUpIcon } from 'icons'
-import { useCallback, useState } from 'react'
+import { ArrowDown } from 'icons'
+import { transparentize } from 'polished'
 import styled from 'styled-components/macro'
 import { Layer } from 'theme'
 
 import Button from '../Button'
-import Row from '../Row'
 
-const ReverseRow = styled(Row)`
+const StyledReverseButton = styled(Button)`
+  align-items: center;
+  background-color: ${({ theme }) => theme.module};
+  border: 4px solid;
+  border-color: ${({ theme }) => theme.container};
+  border-radius: ${({ theme }) => theme.borderRadius * 0.75}em;
+  display: flex;
+  height: 40px;
+  justify-content: center;
   left: 50%;
   position: absolute;
   transform: translate(-50%, -60%);
+  transition: 125ms ease background-color;
+  width: 40px;
   z-index: ${Layer.OVERLAY};
-`
-
-const ArrowUp = styled(ArrowUpIcon)`
-  left: calc(50% - 0.37em);
-  position: absolute;
-  top: calc(50% - 0.82em);
-`
-
-const ArrowDown = styled(ArrowDownIcon)`
-  bottom: calc(50% - 0.82em);
-  position: absolute;
-  right: calc(50% - 0.37em);
-`
-
-const Overlay = styled.div`
-  background-color: ${({ theme }) => theme.container};
-  border-radius: ${({ theme }) => theme.borderRadius}em;
-  padding: 0.25em;
-`
-
-const StyledReverseButton = styled(Button)<{ turns: number }>`
-  border-radius: ${({ theme }) => theme.borderRadius * 0.75}em;
-  color: ${({ theme }) => theme.primary};
-  height: 2.5em;
-  position: relative;
-  width: 2.5em;
-
-  div {
-    transform: rotate(${({ turns }) => turns / 2}turn);
-    transition: transform 0.25s ease-in-out;
-    will-change: transform;
+  :hover {
+    background-color: ${({ theme }) => transparentize(0.2, theme.module)};
   }
 `
 
 export default function ReverseButton() {
   const { error } = useSwapInfo()
   const isDisabled = error !== undefined
-
   const switchCurrencies = useSwitchSwapCurrencies()
-  const [turns, setTurns] = useState(0)
-  const onClick = useCallback(() => {
-    switchCurrencies()
-    setTurns((turns) => ++turns)
-  }, [switchCurrencies])
 
   return (
-    <ReverseRow justify="center">
-      <Overlay>
-        <StyledReverseButton disabled={isDisabled} onClick={onClick} turns={turns}>
-          <div>
-            <ArrowUp strokeWidth={3} />
-            <ArrowDown strokeWidth={3} />
-          </div>
-        </StyledReverseButton>
-      </Overlay>
-    </ReverseRow>
+    <StyledReverseButton disabled={isDisabled} onClick={switchCurrencies}>
+      <ArrowDown />
+    </StyledReverseButton>
   )
 }
diff --git a/src/components/Swap/Toolbar/Caption.tsx b/src/components/Swap/Toolbar/Caption.tsx
index 5a2605c11..ada8c8abd 100644
--- a/src/components/Swap/Toolbar/Caption.tsx
+++ b/src/components/Swap/Toolbar/Caption.tsx
@@ -28,7 +28,7 @@ function Caption({ icon: Icon = AlertTriangle, caption }: CaptionProps) {
   return (
     <>
       <Icon color="secondary" />
-      <ThemedText.Caption>{caption}</ThemedText.Caption>
+      <ThemedText.Caption color="secondary">{caption}</ThemedText.Caption>
     </>
   )
 }
diff --git a/yarn.lock b/yarn.lock
index 953f78656..9a9efc8ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5178,9 +5178,9 @@ camelize@^1.0.0:
   integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
 
 caniuse-lite@^1.0.30001332:
-  version "1.0.30001332"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz#39476d3aa8d83ea76359c70302eafdd4a1d727dd"
-  integrity sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==
+  version "1.0.30001418"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz"
+  integrity sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==
 
 cardinal@^2.1.1:
   version "2.1.1"