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

@@ -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 {
+  :hover ${Logo} {
-      fill: ${({ theme }) => theme.onHover(theme.secondary)};
+    fill: ${brand};
-      transform: rotate(-5deg);
+    transform: rotate(-5deg);
-    }
   }
 `
 
 export default function BrandedFooter() {
   return (
-    <UniswapA href={`https://app.uniswap.org/`}>
+    <Row justify="center">
-      <Row gap={0.4} justify="center">
+      <UniswapA href={`https://app.uniswap.org/`}>
-        <Logo />
+        <Row gap={0.25}>
-        <ThemedText.Caption color="secondary">
+          <Logo />
-          <Trans>Powered by the Uniswap protocol</Trans>
+          <ThemedText.Caption>
-        </ThemedText.Caption>
+            <Trans>Powered by the Uniswap protocol</Trans>
-      </Row>
+          </ThemedText.Caption>
-    </UniswapA>
+        </Row>
+      </UniswapA>
+    </Row>
   )
 }

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)};
   }

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;

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',