From c82b4fae6479dd8aa62a8a3f8859d0ea32d75c85 Mon Sep 17 00:00:00 2001
From: Zach Pomerantz <zzmp@uniswap.org>
Date: Mon, 31 Jan 2022 12:08:39 -0800
Subject: [PATCH] fix: branded footer nits (#3209)

* chore: export brand color

* fix: target only children for extracted color transitions

* fix: branded footer nits
---
 src/lib/components/BrandedFooter.tsx | 30 +++++++++++++++-------------
 src/lib/components/Swap/Output.tsx   |  3 ++-
 src/lib/components/Widget.tsx        |  2 +-
 src/lib/theme/index.tsx              |  4 +++-
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/BrandedFooter.tsx b/src/lib/components/BrandedFooter.tsx
index 0b95770c40..c8e47be5da 100644
--- a/src/lib/components/BrandedFooter.tsx
+++ b/src/lib/components/BrandedFooter.tsx
@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 import Row from 'lib/components/Row'
 import { Logo } from 'lib/icons'
-import styled, { ThemedText } from 'lib/theme'
+import styled, { brand, ThemedText } from 'lib/theme'
 
 import ExternalLink from './ExternalLink'
 
@@ -13,26 +13,28 @@ const UniswapA = styled(ExternalLink)`
   ${Logo} {
     fill: ${({ theme }) => theme.secondary};
     height: 1em;
-    transition: transform 0.25s ease;
+    transition: transform 0.25s ease, fill 0.25s ease;
     width: 1em;
     will-change: transform;
+  }
 
-    :hover {
-      fill: ${({ theme }) => theme.onHover(theme.secondary)};
-      transform: rotate(-5deg);
-    }
+  :hover ${Logo} {
+    fill: ${brand};
+    transform: rotate(-5deg);
   }
 `
 
 export default function BrandedFooter() {
   return (
-    <UniswapA href={`https://app.uniswap.org/`}>
-      <Row gap={0.4} justify="center">
-        <Logo />
-        <ThemedText.Caption color="secondary">
-          <Trans>Powered by the Uniswap protocol</Trans>
-        </ThemedText.Caption>
-      </Row>
-    </UniswapA>
+    <Row justify="center">
+      <UniswapA href={`https://app.uniswap.org/`}>
+        <Row gap={0.25}>
+          <Logo />
+          <ThemedText.Caption>
+            <Trans>Powered by the Uniswap protocol</Trans>
+          </ThemedText.Caption>
+        </Row>
+      </UniswapA>
+    </Row>
   )
 }
diff --git a/src/lib/components/Swap/Output.tsx b/src/lib/components/Swap/Output.tsx
index d528021fd1..eb5c59608a 100644
--- a/src/lib/components/Swap/Output.tsx
+++ b/src/lib/components/Swap/Output.tsx
@@ -21,12 +21,13 @@ const OutputColumn = styled(Column)<{ hasColor: boolean | null }>`
   background-color: ${({ theme }) => theme.module};
   border-radius: ${({ theme }) => theme.borderRadius - 0.25}em;
   padding: 0.75em;
+  padding-bottom: 0.5em;
   position: relative;
 
   // 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.
   transition: ${({ hasColor }) => (hasColor ? 'background-color 0.25s ease-out' : undefined)};
-  * {
+  > {
     // When color is loading, delay the color/stroke so that it seems to transition from the last state.
     transition: ${({ hasColor }) => (hasColor === null ? 'color 0.25s ease-in, stroke 0.25s ease-in' : undefined)};
   }
diff --git a/src/lib/components/Widget.tsx b/src/lib/components/Widget.tsx
index c604eb9df5..2b65ec03a8 100644
--- a/src/lib/components/Widget.tsx
+++ b/src/lib/components/Widget.tsx
@@ -39,7 +39,7 @@ const WidgetWrapper = styled.div<{ width?: number | string }>`
   font-size: 16px;
   font-smooth: always;
   font-variant: none;
-  height: 376px;
+  height: 368px;
   min-width: 300px;
   overflow-y: hidden;
   padding: 0.25em;
diff --git a/src/lib/theme/index.tsx b/src/lib/theme/index.tsx
index 74e1fc4645..43b56558d3 100644
--- a/src/lib/theme/index.tsx
+++ b/src/lib/theme/index.tsx
@@ -14,9 +14,11 @@ export * from './layer'
 export * from './styled'
 export * as ThemedText from './type'
 
+export const brand = '#FF007A'
+
 export const lightTheme: Colors = {
   // surface
-  accent: '#FF007A',
+  accent: brand,
   container: '#F7F8FA',
   module: '#E2E3E9',
   interactive: '#CED0D9',