diff --git a/src/lib/components/BrandedFooter.tsx b/src/lib/components/BrandedFooter.tsx new file mode 100644 index 0000000000..0b95770c40 --- /dev/null +++ b/src/lib/components/BrandedFooter.tsx @@ -0,0 +1,38 @@ +import { Trans } from '@lingui/macro' +import Row from 'lib/components/Row' +import { Logo } from 'lib/icons' +import styled, { ThemedText } from 'lib/theme' + +import ExternalLink from './ExternalLink' + +const UniswapA = styled(ExternalLink)` + color: ${({ theme }) => theme.secondary}; + cursor: pointer; + text-decoration: none; + + ${Logo} { + fill: ${({ theme }) => theme.secondary}; + height: 1em; + transition: transform 0.25s ease; + width: 1em; + will-change: transform; + + :hover { + fill: ${({ theme }) => theme.onHover(theme.secondary)}; + transform: rotate(-5deg); + } + } +` + +export default function BrandedFooter() { + return ( + + + + + Powered by the Uniswap protocol + + + + ) +} diff --git a/src/lib/components/ExternalLink.tsx b/src/lib/components/ExternalLink.tsx new file mode 100644 index 0000000000..f7171c49b6 --- /dev/null +++ b/src/lib/components/ExternalLink.tsx @@ -0,0 +1,17 @@ +import { HTMLProps } from 'react' + +/** + * Outbound link + */ +export default function ExternalLink({ + target = '_blank', + href, + rel = 'noopener noreferrer', + ...rest +}: Omit, 'as' | 'ref' | 'onClick'> & { href: string }) { + return ( + + {rest.children} + + ) +} diff --git a/src/lib/components/Header.tsx b/src/lib/components/Header.tsx index 089696ef42..9b267a5746 100644 --- a/src/lib/components/Header.tsx +++ b/src/lib/components/Header.tsx @@ -1,26 +1,9 @@ -import { largeIconCss, Logo } from 'lib/icons' +import { largeIconCss } from 'lib/icons' import styled, { ThemedText } from 'lib/theme' import { ReactElement, ReactNode } from 'react' import Row from './Row' -const UniswapA = styled.a` - cursor: pointer; - - ${Logo} { - fill: ${({ theme }) => theme.secondary}; - height: 1.5em; - transition: transform 0.25s ease; - width: 1.5em; - will-change: transform; - - :hover { - fill: ${({ theme }) => theme.onHover(theme.secondary)}; - transform: rotate(-5deg); - } - } -` - const HeaderRow = styled(Row)` height: 1.75em; margin: 0 0.75em 0.75em; @@ -30,21 +13,13 @@ const HeaderRow = styled(Row)` export interface HeaderProps { title?: ReactElement - logo?: boolean children: ReactNode } -export default function Header({ title, logo, children }: HeaderProps) { +export default function Header({ title, children }: HeaderProps) { return ( - - {logo && ( - - - - )} - {title && {title}} - + {title && {title}} {children} ) diff --git a/src/lib/components/Swap/Output.tsx b/src/lib/components/Swap/Output.tsx index f22763eebc..8e2196055e 100644 --- a/src/lib/components/Swap/Output.tsx +++ b/src/lib/components/Swap/Output.tsx @@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro' import { useUSDCValue } from 'hooks/useUSDCPrice' import { atom } from 'jotai' import { useAtomValue } from 'jotai/utils' +import BrandedFooter from 'lib/components/BrandedFooter' import { useSwapAmount, useSwapCurrency, useSwapInfo } from 'lib/hooks/swap' import useCurrencyColor from 'lib/hooks/useCurrencyColor' import { Field } from 'lib/state/swap' @@ -101,6 +102,7 @@ export default function Output({ disabled, children }: OutputProps) { {children} + ) diff --git a/src/lib/components/Swap/index.tsx b/src/lib/components/Swap/index.tsx index 82c5c95152..325b139012 100644 --- a/src/lib/components/Swap/index.tsx +++ b/src/lib/components/Swap/index.tsx @@ -59,7 +59,7 @@ export default function Swap(props: SwapProps) { return ( -
Swap}> +
Swap}> {active && }
diff --git a/src/lib/components/Widget.tsx b/src/lib/components/Widget.tsx index ca8fef263b..c604eb9df5 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: 348px; + height: 376px; min-width: 300px; overflow-y: hidden; padding: 0.25em;