Skip to content

I
interface
Commit 1ffb9421 authored by Jordan Frankfurt's avatar Jordan Frankfurt Committed by GitHub
Browse files
Options

fix: style and copy updates to the swap box (#7006) 

* add you pay/you receive label to swap inputs

* update styles

* update snapshots
parent 7978ed97
Hide whitespace changes
Inline Side-by-side
Showing with 741 additions and 630 deletions
src/assets/svg/settings.svg 0 → 100644
View file @ 1ffb9421
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.83 14.6C19.9 14.06 19.33 13.07 19.33 12C19.33 10.93 19.9 9.93999 20.83 9.39999C20.99 9.29999 21.05 9.1 20.95 8.94L19.28 6.06C19.22 5.95 19.11 5.89001 19 5.89001C18.94 5.89001 18.88 5.91 18.83 5.94C18.37 6.2 17.85 6.34 17.33 6.34C16.8 6.34 16.28 6.19999 15.81 5.92999C14.88 5.38999 14.31 4.41 14.31 3.34C14.31 3.15 14.16 3 13.98 3H10.02C9.83999 3 9.69 3.15 9.69 3.34C9.69 4.41 9.12 5.38999 8.19 5.92999C7.72 6.19999 7.20001 6.34 6.67001 6.34C6.15001 6.34 5.63001 6.2 5.17001 5.94C5.01001 5.84 4.81 5.9 4.72 6.06L3.04001 8.94C3.01001 8.99 3 9.05001 3 9.10001C3 9.22001 3.06001 9.32999 3.17001 9.39999C4.10001 9.93999 4.67001 10.92 4.67001 11.99C4.67001 13.07 4.09999 14.06 3.17999 14.6H3.17001C3.01001 14.7 2.94999 14.9 3.04999 15.06L4.72 17.94C4.78 18.05 4.89 18.11 5 18.11C5.06 18.11 5.12001 18.09 5.17001 18.06C6.11001 17.53 7.26 17.53 8.19 18.07C9.11 18.61 9.67999 19.59 9.67999 20.66C9.67999 20.85 9.82999 21 10.02 21H13.98C14.16 21 14.31 20.85 14.31 20.66C14.31 19.59 14.88 18.61 15.81 18.07C16.28 17.8 16.8 17.66 17.33 17.66C17.85 17.66 18.37 17.8 18.83 18.06C18.99 18.16 19.19 18.1 19.28 17.94L20.96 15.06C20.99 15.01 21 14.95 21 14.9C21 14.78 20.94 14.67 20.83 14.6ZM12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15Z"
fill="currentColor" />
</svg>
\ No newline at end of file
src/components/CurrencyInputPanel/FiatValue.tsx
View file @ 1ffb9421
...@@ -37,7 +37,7 @@ export function FiatValue({ ...@@ -37,7 +37,7 @@ export function FiatValue({
return ( return (
<Row gap="sm"> <Row gap="sm">
<ThemedText.BodySmall> <ThemedText.BodySmall color="textSecondary">
{fiatValue.data ? ( {fiatValue.data ? (
formatNumber(fiatValue.data, NumberType.FiatTokenPrice) formatNumber(fiatValue.data, NumberType.FiatTokenPrice)
) : ( ) : (
......
src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx
View file @ 1ffb9421
...@@ -71,7 +71,7 @@ const CurrencySelect = styled(ButtonGray)<{ ...@@ -71,7 +71,7 @@ const CurrencySelect = styled(ButtonGray)<{
user-select: none; user-select: none;
border: none; border: none;
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 500;
width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')}; width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
padding: ${({ selected }) => (selected ? '4px 8px 4px 4px' : '6px 6px 6px 8px')}; padding: ${({ selected }) => (selected ? '4px 8px 4px 4px' : '6px 6px 6px 8px')};
gap: 8px; gap: 8px;
...@@ -189,7 +189,7 @@ interface SwapCurrencyInputPanelProps { ...@@ -189,7 +189,7 @@ interface SwapCurrencyInputPanelProps {
onUserInput: (value: string) => void onUserInput: (value: string) => void
onMax?: () => void onMax?: () => void
showMaxButton: boolean showMaxButton: boolean
label?: ReactNode label: ReactNode
onCurrencySelect?: (currency: Currency) => void onCurrencySelect?: (currency: Currency) => void
currency?: Currency | null currency?: Currency | null
hideBalance?: boolean hideBalance?: boolean
...@@ -229,6 +229,7 @@ export default function SwapCurrencyInputPanel({ ...@@ -229,6 +229,7 @@ export default function SwapCurrencyInputPanel({
locked = false, locked = false,
loading = false, loading = false,
disabled = false, disabled = false,
label,
...rest ...rest
}: SwapCurrencyInputPanelProps) { }: SwapCurrencyInputPanelProps) {
const [modalOpen, setModalOpen] = useState(false) const [modalOpen, setModalOpen] = useState(false)
...@@ -255,6 +256,7 @@ export default function SwapCurrencyInputPanel({ ...@@ -255,6 +256,7 @@ export default function SwapCurrencyInputPanel({
</FixedContainer> </FixedContainer>
)} )}
<Container hideInput={hideInput}> <Container hideInput={hideInput}>
<ThemedText.SubHeaderSmall color="textTertiary">{label}</ThemedText.SubHeaderSmall>
<InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}> <InputRow style={hideInput ? { padding: '0', borderRadius: '8px' } : {}}>
{!hideInput && ( {!hideInput && (
<StyledNumericalInput <StyledNumericalInput
......
src/components/CurrencyInputPanel/index.tsx
View file @ 1ffb9421
...@@ -40,7 +40,7 @@ const FixedContainer = styled.div` ...@@ -40,7 +40,7 @@ const FixedContainer = styled.div`
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
border-radius: 20px; border-radius: 16px;
background-color: ${({ theme }) => theme.backgroundInteractive}; background-color: ${({ theme }) => theme.backgroundInteractive};
display: flex; display: flex;
align-items: center; align-items: center;
......
src/components/Settings/MenuButton/index.tsx
View file @ 1ffb9421
import { t, Trans } from '@lingui/macro' import { t, Trans } from '@lingui/macro'
import { ReactComponent as Settings } from 'assets/svg/settings.svg'
import Row from 'components/Row' import Row from 'components/Row'
import { Settings } from 'react-feather'
import { useUserSlippageTolerance } from 'state/user/hooks' import { useUserSlippageTolerance } from 'state/user/hooks'
import { SlippageTolerance } from 'state/user/types' import { SlippageTolerance } from 'state/user/types'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
...@@ -8,10 +8,10 @@ import { ThemedText } from 'theme' ...@@ -8,10 +8,10 @@ import { ThemedText } from 'theme'
import validateUserSlippageTolerance, { SlippageValidationResult } from 'utils/validateUserSlippageTolerance' import validateUserSlippageTolerance, { SlippageValidationResult } from 'utils/validateUserSlippageTolerance'
const Icon = styled(Settings)` const Icon = styled(Settings)`
height: 20px; height: 24px;
width: 20px; width: 24px;
> * { > * {
stroke: ${({ theme }) => theme.textSecondary}; fill: ${({ theme }) => theme.textSecondary};
} }
` `
......
src/components/swap/__snapshots__/SwapSkeleton.test.tsx.snap
View file @ 1ffb9421
...@@ -15,7 +15,7 @@ exports[`SwapSkeleton.tsx renders a skeleton 1`] = ` ...@@ -15,7 +15,7 @@ exports[`SwapSkeleton.tsx renders a skeleton 1`] = `
margin-bottom: -18px; margin-bottom: -18px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background-color: #E8ECFB; background-color: #F5F6FC;
border: 4px solid; border: 4px solid;
border-color: #FFFFFF; border-color: #FFFFFF;
z-index: 2; z-index: 2;
......
src/components/swap/styleds.tsx
View file @ 1ffb9421
...@@ -26,7 +26,7 @@ export const PageWrapper = styled.div` ...@@ -26,7 +26,7 @@ export const PageWrapper = styled.div`
export const SwapWrapper = styled.main<{ chainId?: number }>` export const SwapWrapper = styled.main<{ chainId?: number }>`
position: relative; position: relative;
background: ${({ theme }) => theme.backgroundSurface}; background: ${({ theme }) => theme.backgroundSurface};
border-radius: 16px; border-radius: 24px;
border: 1px solid ${({ theme }) => theme.backgroundOutline}; border: 1px solid ${({ theme }) => theme.backgroundOutline};
padding: 8px; padding: 8px;
padding-top: 12px; padding-top: 12px;
...@@ -151,7 +151,7 @@ export const ArrowWrapper = styled.div<{ clickable: boolean }>` ...@@ -151,7 +151,7 @@ export const ArrowWrapper = styled.div<{ clickable: boolean }>`
margin-bottom: -18px; margin-bottom: -18px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background-color: ${({ theme }) => theme.backgroundInteractive}; background-color: ${({ theme }) => theme.backgroundModule};
border: 4px solid; border: 4px solid;
border-color: ${({ theme }) => theme.backgroundSurface}; border-color: ${({ theme }) => theme.backgroundSurface};
......
src/pages/Landing/__snapshots__/index.test.tsx.snap
View file @ 1ffb9421
...@@ -7,7 +7,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -7,7 +7,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
min-width: 0; min-width: 0;
} }
.c23 { .c24 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
...@@ -30,7 +30,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -30,7 +30,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border-radius: 4px; border-radius: 4px;
} }
.c42 { .c43 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
...@@ -88,7 +88,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -88,7 +88,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
color: #0D111C; color: #0D111C;
} }
.c94 { .c20 {
color: #98A1C0;
}
.c96 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -99,15 +103,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -99,15 +103,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
font-weight: 500; font-weight: 500;
} }
.c94:hover { .c96:hover {
opacity: 0.6; opacity: 0.6;
} }
.c94:active { .c96:active {
opacity: 0.4; opacity: 0.4;
} }
.c92 { .c94 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -118,36 +122,36 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -118,36 +122,36 @@ exports[`disable nft on landing page does not render nft information and card 1`
font-weight: 500; font-weight: 500;
} }
.c92:hover { .c94:hover {
opacity: 0.6; opacity: 0.6;
} }
.c92:active { .c94:active {
opacity: 0.4; opacity: 0.4;
} }
.c85 { .c87 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c86 { .c88 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c87 { .c89 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c79 { .c81 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -160,7 +164,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -160,7 +164,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
max-width: 1440px; max-width: 1440px;
} }
.c80 { .c82 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -170,24 +174,24 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -170,24 +174,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
flex-direction: column; flex-direction: column;
} }
.c81 { .c83 {
display: none; display: none;
} }
.c96 { .c98 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.c82 { .c84 {
width: 72px; width: 72px;
height: 72px; height: 72px;
display: none; display: none;
} }
.c83 { .c85 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -200,20 +204,20 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -200,20 +204,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
.c84 { .c86 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.c89 { .c91 {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 12px; gap: 12px;
} }
.c90 { .c92 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -226,32 +230,32 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -226,32 +230,32 @@ exports[`disable nft on landing page does not render nft information and card 1`
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
.c91 { .c93 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
font-weight: 700; font-weight: 700;
} }
.c95 { .c97 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #7780A0; color: #7780A0;
} }
.c93 { .c95 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #7780A0; color: #7780A0;
} }
.c88 { .c90 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
color: #98A1C0; color: #98A1C0;
} }
.c62 { .c64 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -280,11 +284,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -280,11 +284,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease border; transition: 250ms ease border;
} }
.c62:hover { .c64:hover {
border: 1px solid #98A1C0; border: 1px solid #98A1C0;
} }
.c68 { .c70 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -313,11 +317,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -313,11 +317,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease border; transition: 250ms ease border;
} }
.c68:hover { .c70:hover {
border: 1px solid #98A1C0; border: 1px solid #98A1C0;
} }
.c63 { .c65 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -332,13 +336,13 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -332,13 +336,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
justify-content: space-between; justify-content: space-between;
} }
.c64 { .c66 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
font-weight: 600; font-weight: 600;
} }
.c65 { .c67 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -353,7 +357,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -353,7 +357,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
max-width: 480px; max-width: 480px;
} }
.c69 { .c71 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -368,7 +372,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -368,7 +372,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
max-width: 480px; max-width: 480px;
} }
.c66 { .c68 {
color: #FB118E; color: #FB118E;
font-weight: 500; font-weight: 500;
margin: 24px 0 0; margin: 24px 0 0;
...@@ -377,18 +381,18 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -377,18 +381,18 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c66:hover { .c68:hover {
opacity: 0.6; opacity: 0.6;
} }
.c70 { .c72 {
min-width: 20px; min-width: 20px;
min-height: 20px; min-height: 20px;
max-height: 48px; max-height: 48px;
max-width: 48px; max-width: 48px;
} }
.c45 { .c47 {
background-color: transparent; background-color: transparent;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
...@@ -402,7 +406,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -402,7 +406,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
width: 100%; width: 100%;
} }
.c24 { .c25 {
padding: 16px; padding: 16px;
width: 100%; width: 100%;
font-weight: 500; font-weight: 500;
...@@ -440,25 +444,81 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -440,25 +444,81 @@ exports[`disable nft on landing page does not render nft information and card 1`
transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
} }
.c24:disabled { .c25:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
pointer-events: none; pointer-events: none;
} }
.c24 > * { .c25 > * {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.c24 > a { .c25 > a {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c76 { .c44 {
padding: 16px;
width: 100%;
font-weight: 500;
text-align: center;
border-radius: 16px;
outline: none;
border: 1px solid transparent;
color: #0D111C;
-webkit-text-decoration: none;
text-decoration: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
position: relative;
z-index: 1;
will-change: transform;
-webkit-transition: -webkit-transform 450ms ease;
-webkit-transition: transform 450ms ease;
transition: transform 450ms ease;
-webkit-transform: perspective(1px) translateZ(0);
-ms-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
}
.c44:disabled {
opacity: 50%;
cursor: auto;
pointer-events: none;
}
.c44 > * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c44 > a {
-webkit-text-decoration: none;
text-decoration: none;
}
.c78 {
padding: 16px; padding: 16px;
width: 200px; width: 200px;
font-weight: 500; font-weight: 500;
...@@ -496,58 +556,58 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -496,58 +556,58 @@ exports[`disable nft on landing page does not render nft information and card 1`
transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
} }
.c76:disabled { .c78:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
pointer-events: none; pointer-events: none;
} }
.c76 > * { .c78 > * {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.c76 > a { .c78 > a {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c43 { .c45 {
background-color: #FB118E1f; background-color: #FB118E1f;
color: #FB118E; color: #FB118E;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
} }
.c43:focus { .c45:focus {
box-shadow: 0 0 0 1pt #FB118E1f; box-shadow: 0 0 0 1pt #FB118E1f;
background-color: #FB118E1f; background-color: #FB118E1f;
} }
.c43:hover { .c45:hover {
background-color: #FB118E1f; background-color: #FB118E1f;
} }
.c43:active { .c45:active {
box-shadow: 0 0 0 1pt #FB118E1f; box-shadow: 0 0 0 1pt #FB118E1f;
background-color: #FB118E1f; background-color: #FB118E1f;
} }
.c43:hover .c44 { .c45:hover .c46 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c43:active .c44 { .c45:active .c46 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c43:disabled { .c45:disabled {
opacity: 0.4; opacity: 0.4;
} }
.c43:disabled:hover { .c45:disabled:hover {
cursor: auto; cursor: auto;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
...@@ -555,22 +615,22 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -555,22 +615,22 @@ exports[`disable nft on landing page does not render nft information and card 1`
outline: none; outline: none;
} }
.c25 { .c26 {
background-color: #F5F6FC; background-color: #F5F6FC;
color: #7780A0; color: #7780A0;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
.c25:hover { .c26:hover {
background-color: #d2daf7; background-color: #d2daf7;
} }
.c25:active { .c26:active {
background-color: #bdc8f3; background-color: #bdc8f3;
} }
.c77 { .c79 {
background-color: transparent; background-color: transparent;
color: #FB118E; color: #FB118E;
display: -webkit-box; display: -webkit-box;
...@@ -587,27 +647,27 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -587,27 +647,27 @@ exports[`disable nft on landing page does not render nft information and card 1`
align-items: center; align-items: center;
} }
.c77:focus { .c79:focus {
-webkit-text-decoration: underline; -webkit-text-decoration: underline;
text-decoration: underline; text-decoration: underline;
} }
.c77:hover { .c79:hover {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c77:active { .c79:active {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c77:disabled { .c79:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
} }
.c71 { .c73 {
height: 340px; height: 340px;
width: 100%; width: 100%;
border-radius: 32px; border-radius: 32px;
...@@ -633,7 +693,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -633,7 +693,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%); background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%);
} }
.c72 { .c74 {
color: white; color: white;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -647,20 +707,20 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -647,20 +707,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
flex-direction: column; flex-direction: column;
} }
.c73 { .c75 {
font-weight: 700; font-weight: 700;
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
.c74 { .c76 {
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
} }
.c75 { .c77 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -674,22 +734,22 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -674,22 +734,22 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c75:hover { .c77:hover {
opacity: 0.6; opacity: 0.6;
} }
.c78 { .c80 {
color: white; color: white;
border: 1px solid white; border: 1px solid white;
} }
.c38 { .c39 {
display: grid; display: grid;
grid-auto-rows: auto; grid-auto-rows: auto;
grid-row-gap: 4px; grid-row-gap: 4px;
} }
.c35 { .c36 {
-webkit-filter: none; -webkit-filter: none;
filter: none; filter: none;
opacity: 1; opacity: 1;
...@@ -697,7 +757,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -697,7 +757,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
.c30 { .c31 {
opacity: 0; opacity: 0;
-webkit-transition: opacity 250ms ease-in; -webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in; transition: opacity 250ms ease-in;
...@@ -706,7 +766,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -706,7 +766,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border-radius: 50%; border-radius: 50%;
} }
.c29 { .c30 {
width: 24px; width: 24px;
height: 24px; height: 24px;
background: #E8ECFB; background: #E8ECFB;
...@@ -716,7 +776,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -716,7 +776,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border-radius: 50%; border-radius: 50%;
} }
.c28 { .c29 {
position: relative; position: relative;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -724,7 +784,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -724,7 +784,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
display: flex; display: flex;
} }
.c21 { .c22 {
color: #0D111C; color: #0D111C;
width: 0; width: 0;
position: relative; position: relative;
...@@ -744,32 +804,32 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -744,32 +804,32 @@ exports[`disable nft on landing page does not render nft information and card 1`
text-align: right; text-align: right;
} }
.c21::-webkit-search-decoration { .c22::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
.c21 [type='number'] { .c22 [type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
.c21::-webkit-outer-spin-button, .c22::-webkit-outer-spin-button,
.c21::-webkit-inner-spin-button { .c22::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }
.c21::-webkit-input-placeholder { .c22::-webkit-input-placeholder {
color: #98A1C0; color: #98A1C0;
} }
.c21::-moz-placeholder { .c22::-moz-placeholder {
color: #98A1C0; color: #98A1C0;
} }
.c21:-ms-input-placeholder { .c22:-ms-input-placeholder {
color: #98A1C0; color: #98A1C0;
} }
.c21::placeholder { .c22::placeholder {
color: #98A1C0; color: #98A1C0;
} }
...@@ -796,7 +856,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -796,7 +856,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
width: initial; width: initial;
} }
.c26 { .c27 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -815,7 +875,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -815,7 +875,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
user-select: none; user-select: none;
border: none; border: none;
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 500;
width: initial; width: initial;
padding: 4px 8px 4px 4px; padding: 4px 8px 4px 4px;
gap: 8px; gap: 8px;
...@@ -827,12 +887,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -827,12 +887,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
visibility: visible; visibility: visible;
} }
.c26:hover, .c27:hover,
.c26:active { .c27:active {
background-color: #E8ECFB; background-color: #E8ECFB;
} }
.c26:before { .c27:before {
background-size: 100%; background-size: 100%;
border-radius: inherit; border-radius: inherit;
position: absolute; position: absolute;
...@@ -843,15 +903,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -843,15 +903,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
content: ''; content: '';
} }
.c26:hover:before { .c27:hover:before {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c26:active:before { .c27:active:before {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c40 { .c41 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -870,7 +930,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -870,7 +930,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
user-select: none; user-select: none;
border: none; border: none;
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 500;
width: initial; width: initial;
padding: 6px 6px 6px 8px; padding: 6px 6px 6px 8px;
gap: 8px; gap: 8px;
...@@ -882,12 +942,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -882,12 +942,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
visibility: visible; visibility: visible;
} }
.c40:hover, .c41:hover,
.c40:active { .c41:active {
background-color: #FB118E; background-color: #FB118E;
} }
.c40:before { .c41:before {
background-size: 100%; background-size: 100%;
border-radius: inherit; border-radius: inherit;
position: absolute; position: absolute;
...@@ -898,15 +958,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -898,15 +958,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
content: ''; content: '';
} }
.c40:hover:before { .c41:hover:before {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c40:active:before { .c41:active:before {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c20 { .c21 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -924,7 +984,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -924,7 +984,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
justify-content: space-between; justify-content: space-between;
} }
.c33 { .c34 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -941,12 +1001,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -941,12 +1001,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
line-height: 1rem; line-height: 1rem;
} }
.c33 span:hover { .c34 span:hover {
cursor: pointer; cursor: pointer;
color: #495068; color: #495068;
} }
.c34 { .c35 {
-webkit-box-pack: end; -webkit-box-pack: end;
-webkit-justify-content: flex-end; -webkit-justify-content: flex-end;
-ms-flex-pack: end; -ms-flex-pack: end;
...@@ -955,7 +1015,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -955,7 +1015,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
padding: 8px 0px 0px 0px; padding: 8px 0px 0px 0px;
} }
.c27 { .c28 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -971,35 +1031,35 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -971,35 +1031,35 @@ exports[`disable nft on landing page does not render nft information and card 1`
width: 100%; width: 100%;
} }
.c32 { .c33 {
margin: 0 0.25rem 0 0.35rem; margin: 0 0.25rem 0 0.35rem;
height: 35%; height: 35%;
margin-left: 8px; margin-left: 8px;
} }
.c32 path { .c33 path {
stroke: #0D111C; stroke: #0D111C;
stroke-width: 2px; stroke-width: 2px;
} }
.c41 { .c42 {
margin: 0 0.25rem 0 0.35rem; margin: 0 0.25rem 0 0.35rem;
height: 35%; height: 35%;
margin-left: 8px; margin-left: 8px;
} }
.c41 path { .c42 path {
stroke: #FFFFFF; stroke: #FFFFFF;
stroke-width: 2px; stroke-width: 2px;
} }
.c31 { .c32 {
margin: 0 0.25rem 0 0.25rem; margin: 0 0.25rem 0 0.25rem;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
} }
.c22 { .c23 {
-webkit-filter: none; -webkit-filter: none;
filter: none; filter: none;
opacity: 1; opacity: 1;
...@@ -1020,7 +1080,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1020,7 +1080,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
.c4 { .c4 {
position: relative; position: relative;
background: #FFFFFF; background: #FFFFFF;
border-radius: 16px; border-radius: 24px;
border: 1px solid #D2D9EE; border: 1px solid #D2D9EE;
padding: 8px; padding: 8px;
padding-top: 12px; padding-top: 12px;
...@@ -1034,7 +1094,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1034,7 +1094,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border: 1px solid #D2D9EE; border: 1px solid #D2D9EE;
} }
.c36 { .c37 {
border-radius: 12px; border-radius: 12px;
height: 40px; height: 40px;
width: 40px; width: 40px;
...@@ -1043,24 +1103,24 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1043,24 +1103,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
margin-bottom: -18px; margin-bottom: -18px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background-color: #E8ECFB; background-color: #F5F6FC;
border: 4px solid; border: 4px solid;
border-color: #FFFFFF; border-color: #FFFFFF;
z-index: 2; z-index: 2;
} }
.c36:hover { .c37:hover {
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
} }
.c16 { .c16 {
height: 20px; height: 24px;
width: 20px; width: 24px;
} }
.c16 > * { .c16 > * {
stroke: #7780A0; fill: #7780A0;
} }
.c14 { .c14 {
...@@ -1095,7 +1155,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1095,7 +1155,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
gap: 16px; gap: 16px;
} }
.c37 { .c38 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
...@@ -1113,14 +1173,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1113,14 +1173,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
.c17 { .c17 {
position: relative;
background-color: #F5F6FC; background-color: #F5F6FC;
border-radius: 12px; border-radius: 16px;
padding: 16px;
color: #7780A0; color: #7780A0;
font-size: 14px; font-size: 14px;
line-height: 20px;
font-weight: 500; font-weight: 500;
height: 120px;
line-height: 20px;
padding: 16px;
position: relative;
} }
.c17:before { .c17:before {
...@@ -1145,7 +1206,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1145,7 +1206,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
border-color: #B8C0DC3d; border-color: #B8C0DC3d;
} }
.c39 { .c40 {
border-bottom: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;
} }
...@@ -1172,7 +1233,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1172,7 +1233,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
overflow-x: hidden; overflow-x: hidden;
} }
.c46 { .c48 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -1196,7 +1257,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1196,7 +1257,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: calc(100vh - 52px); height: calc(100vh - 52px);
} }
.c47 { .c49 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -1217,7 +1278,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1217,7 +1278,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: calc(100vh - 52px); height: calc(100vh - 52px);
} }
.c48 { .c50 {
position: absolute; position: absolute;
top: 68px; top: 68px;
bottom: 0; bottom: 0;
...@@ -1230,7 +1291,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1230,7 +1291,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
height: 100%; height: 100%;
} }
.c49 { .c51 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -1258,11 +1319,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1258,11 +1319,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
pointer-events: none; pointer-events: none;
} }
.c49 * { .c51 * {
pointer-events: auto; pointer-events: auto;
} }
.c50 { .c52 {
color: transparent; color: transparent;
font-size: 36px; font-size: 36px;
line-height: 44px; line-height: 44px;
...@@ -1274,7 +1335,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1274,7 +1335,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
-webkit-background-clip: text; -webkit-background-clip: text;
} }
.c52 { .c54 {
color: #7780A0; color: #7780A0;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
...@@ -1284,7 +1345,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1284,7 +1345,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
margin: 0 0 32px; margin: 0 0 32px;
} }
.c51 { .c53 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1295,12 +1356,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1295,12 +1356,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
justify-content: center; justify-content: center;
} }
.c54 { .c56 {
padding: 16px 0px; padding: 16px 0px;
border-radius: 24px; border-radius: 24px;
} }
.c55 { .c57 {
background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
border: none; border: none;
color: #FFFFFF; color: #FFFFFF;
...@@ -1308,24 +1369,24 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1308,24 +1369,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: all 250ms ease; transition: all 250ms ease;
} }
.c55:hover { .c57:hover {
box-shadow: 0px 0px 16px 0px #ff00c7; box-shadow: 0px 0px 16px 0px #ff00c7;
} }
.c56 { .c58 {
margin: 0px; margin: 0px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
} }
.c53 { .c55 {
max-width: 300px; max-width: 300px;
width: 100%; width: 100%;
pointer-events: auto; pointer-events: auto;
} }
.c57 { .c59 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -1345,16 +1406,16 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1345,16 +1406,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c57:hover { .c59:hover {
opacity: 0.6; opacity: 0.6;
} }
.c58 { .c60 {
margin-left: 14px; margin-left: 14px;
size: 20px; size: 20px;
} }
.c60 { .c62 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1371,7 +1432,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1371,7 +1432,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%); background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%);
} }
.c61 { .c63 {
display: grid; display: grid;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
...@@ -1384,7 +1445,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1384,7 +1445,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.c67 { .c69 {
display: grid; display: grid;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
...@@ -1438,7 +1499,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1438,7 +1499,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
width: 100%; width: 100%;
} }
.c59 { .c61 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
...@@ -1453,12 +1514,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1453,12 +1514,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
text-align: center; text-align: center;
} }
.c59:hover { .c61:hover {
color: #98A1C0; color: #98A1C0;
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c79 { .c81 {
-webkit-flex-direction: row; -webkit-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
...@@ -1470,7 +1531,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1470,7 +1531,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c81 { .c83 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -1479,63 +1540,63 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1479,63 +1540,63 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c96 { .c98 {
display: none; display: none;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c82 { .c84 {
display: block; display: block;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c89 { .c91 {
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 24px; gap: 24px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c90 { .c92 {
margin: 0; margin: 0;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c62 { .c64 {
height: 360px; height: 360px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c62 { .c64 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c68 { .c70 {
height: 260px; height: 260px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c68 { .c70 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c64 { .c66 {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c65 { .c67 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
max-width: 480px; max-width: 480px;
...@@ -1543,7 +1604,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1543,7 +1604,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c69 { .c71 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
max-width: 480px; max-width: 480px;
...@@ -1551,7 +1612,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1551,7 +1612,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c71 { .c73 {
height: 140px; height: 140px;
-webkit-flex-direction: row; -webkit-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
...@@ -1560,21 +1621,21 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1560,21 +1621,21 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c73 { .c75 {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c74 { .c76 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c75 { .c77 {
width: auto; width: auto;
} }
} }
...@@ -1592,79 +1653,79 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1592,79 +1653,79 @@ exports[`disable nft on landing page does not render nft information and card 1`
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c46 { .c48 {
height: 100vh; height: 100vh;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c47 { .c49 {
height: 100vh; height: 100vh;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c50 { .c52 {
font-size: 48px; font-size: 48px;
line-height: 56px; line-height: 56px;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c50 { .c52 {
font-size: 64px; font-size: 64px;
line-height: 72px; line-height: 72px;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c52 { .c54 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c56 { .c58 {
font-size: 20px; font-size: 20px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c57 { .c59 {
visibility: visible; visibility: visible;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c60 { .c62 {
padding: 0 96px 5rem; padding: 0 96px 5rem;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c61 { .c63 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c61 { .c63 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c67 { .c69 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c67 { .c69 {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
gap: 32px; gap: 32px;
} }
...@@ -1718,24 +1779,8 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1718,24 +1779,8 @@ exports[`disable nft on landing page does not render nft information and card 1`
> >
<svg <svg
class="c16" class="c16"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
> >
<circle settings.svg
cx="12"
cy="12"
r="3"
/>
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
/>
</svg> </svg>
</div> </div>
</button> </button>
...@@ -1751,18 +1796,22 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1751,18 +1796,22 @@ exports[`disable nft on landing page does not render nft information and card 1`
<div <div
class="c18" class="c18"
id="swap-currency-input" id="swap-currency-input"
label="[object Object]"
> >
<div <div
class="c19" class="c19"
> >
<div <div
class="c20" class="c20 css-1aekuku"
>
You pay
</div>
<div
class="c21"
> >
<input <input
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
class="c21 c22 token-amount-input" class="c22 c23 token-amount-input"
inputmode="decimal" inputmode="decimal"
maxlength="79" maxlength="79"
minlength="1" minlength="1"
...@@ -1774,36 +1823,36 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1774,36 +1823,36 @@ exports[`disable nft on landing page does not render nft information and card 1`
/> />
<div> <div>
<button <button
class="c23 c24 c25 c26 open-currency-select-button" class="c24 c25 c26 c27 open-currency-select-button"
> >
<span <span
class="c27" class="c28"
> >
<div <div
class="c6 c7 c10" class="c6 c7 c10"
> >
<div <div
class="c28" class="c29"
style="margin-right: 2px;" style="margin-right: 2px;"
> >
<div <div
class="c29" class="c30"
> >
<img <img
alt="ETH logo" alt="ETH logo"
class="c30" class="c31"
src="ethereum-logo.png" src="ethereum-logo.png"
/> />
</div> </div>
</div> </div>
<span <span
class="c31 token-symbol-container" class="c32 token-symbol-container"
> >
ETH ETH
</span> </span>
</div> </div>
<svg <svg
class="c32" class="c33"
> >
dropdown.svg dropdown.svg
</svg> </svg>
...@@ -1812,13 +1861,13 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1812,13 +1861,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c33 c34" class="c34 c35"
> >
<div <div
class="c6 c7 c8" class="c6 c7 c8"
> >
<div <div
class="c35" class="c36"
/> />
<span /> <span />
</div> </div>
...@@ -1827,17 +1876,17 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1827,17 +1876,17 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c36" class="c37"
> >
<div <div
class="c37" class="c38"
color="#0D111C" color="#0D111C"
data-testid="swap-currency-button" data-testid="swap-currency-button"
> >
<svg <svg
fill="none" fill="none"
height="16" height="16"
stroke="#98A1C0" stroke="#0D111C"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2" stroke-width="2"
...@@ -1859,27 +1908,31 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1859,27 +1908,31 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c38" class="c39"
> >
<div> <div>
<div <div
class="c17 c39" class="c17 c40"
> >
<div <div
class="c18" class="c18"
id="swap-currency-output" id="swap-currency-output"
label="[object Object]"
> >
<div <div
class="c19" class="c19"
> >
<div <div
class="c20" class="c20 css-1aekuku"
>
You receive
</div>
<div
class="c21"
> >
<input <input
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
class="c21 c22 token-amount-input" class="c22 c23 token-amount-input"
inputmode="decimal" inputmode="decimal"
maxlength="79" maxlength="79"
minlength="1" minlength="1"
...@@ -1891,22 +1944,22 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1891,22 +1944,22 @@ exports[`disable nft on landing page does not render nft information and card 1`
/> />
<div> <div>
<button <button
class="c23 c24 c25 c40 open-currency-select-button" class="c24 c25 c26 c41 open-currency-select-button"
> >
<span <span
class="c27" class="c28"
> >
<div <div
class="c6 c7 c10" class="c6 c7 c10"
> >
<span <span
class="c31 token-symbol-container" class="c32 token-symbol-container"
> >
Select token Select token
</span> </span>
</div> </div>
<svg <svg
class="c41" class="c42"
> >
dropdown.svg dropdown.svg
</svg> </svg>
...@@ -1915,13 +1968,13 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1915,13 +1968,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c33 c34" class="c34 c35"
> >
<div <div
class="c6 c7 c8" class="c6 c7 c8"
> >
<div <div
class="c35" class="c36"
/> />
<span /> <span />
</div> </div>
...@@ -1932,11 +1985,11 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1932,11 +1985,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
<div> <div>
<button <button
class="c42 c24 c43" class="c43 c44 c45"
font-weight="600" font-weight="600"
> >
<div <div
class="c44 c45" class="c46 c47"
/> />
Connect Wallet Connect Wallet
</button> </button>
...@@ -1947,52 +2000,52 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -1947,52 +2000,52 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c46" class="c48"
/> />
<div <div
class="c47" class="c49"
> >
<div <div
class="c48" class="c50"
/> />
</div> </div>
<div <div
class="c49" class="c51"
> >
<h1 <h1
class="c50" class="c52"
> >
Trade crypto with confidence Trade crypto with confidence
</h1> </h1>
<div <div
class="c51" class="c53"
> >
<div <div
class="c52" class="c54"
> >
Buy, sell, and explore tokens Buy, sell, and explore tokens
</div> </div>
</div> </div>
<span <span
class="1 c53" class="1 c55"
> >
<a <a
class="c2 c24 c54 c55" class="c2 c25 c56 c57"
href="#/swap" href="#/swap"
> >
<p <p
class="0 c56" class="0 c58"
> >
Get started Get started
</p> </p>
</a> </a>
</span> </span>
<div <div
class="2 c57" class="2 c59"
> >
Learn more Learn more
<svg <svg
class="3 c58" class="3 c60"
fill="none" fill="none"
height="24" height="24"
stroke="currentColor" stroke="currentColor"
...@@ -2020,7 +2073,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2020,7 +2073,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
</svg> </svg>
</div> </div>
<a <a
class="9 c59" class="9 c61"
href="https://wallet.uniswap.org/?utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1" href="https://wallet.uniswap.org/?utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1"
> >
<svg <svg
...@@ -2037,32 +2090,32 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2037,32 +2090,32 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="4 c60" class="4 c62"
> >
<div <div
class="5 c61" class="5 c63"
cols="1" cols="1"
> >
<a <a
class="c62" class="c64"
href="#/swap" href="#/swap"
> >
<div <div
class="c63" class="c65"
> >
<div <div
class="c64" class="c66"
> >
Swap tokens Swap tokens
</div> </div>
</div> </div>
<div <div
class="c65" class="c67"
type="Primary" type="Primary"
> >
Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more. Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
<div <div
class="c65 c66" class="c67 c68"
type="Primary" type="Primary"
> >
Trade Tokens Trade Tokens
...@@ -2071,20 +2124,20 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2071,20 +2124,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="5 c67" class="5 c69"
cols="3" cols="3"
> >
<a <a
class="c68" class="c70"
href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-" href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-"
rel="noopenener noreferrer" rel="noopenener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c63" class="c65"
> >
<div <div
class="c64" class="c66"
> >
Buy crypto Buy crypto
</div> </div>
...@@ -2111,12 +2164,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2111,12 +2164,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
</svg> </svg>
</div> </div>
<div <div
class="c69" class="c71"
type="Secondary" type="Secondary"
> >
Buy crypto with your credit card or bank account at the best rates. Buy crypto with your credit card or bank account at the best rates.
<div <div
class="c69 c66" class="c71 c68"
type="Secondary" type="Secondary"
> >
Buy now Buy now
...@@ -2124,30 +2177,30 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2124,30 +2177,30 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</a> </a>
<a <a
class="c68" class="c70"
href="#/pools" href="#/pools"
> >
<div <div
class="c63" class="c65"
> >
<div <div
class="c64" class="c66"
> >
Earn Earn
</div> </div>
<img <img
alt="Analytics" alt="Analytics"
class="c70" class="c72"
src="aboutArrowLight.png" src="aboutArrowLight.png"
/> />
</div> </div>
<div <div
class="c69" class="c71"
type="Secondary" type="Secondary"
> >
Provide liquidity to pools on Uniswap and earn fees on swaps. Provide liquidity to pools on Uniswap and earn fees on swaps.
<div <div
class="c69 c66" class="c71 c68"
type="Secondary" type="Secondary"
> >
Provide liquidity Provide liquidity
...@@ -2155,16 +2208,16 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2155,16 +2208,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</a> </a>
<a <a
class="c68" class="c70"
href="https://docs.uniswap.org" href="https://docs.uniswap.org"
rel="noopenener noreferrer" rel="noopenener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c63" class="c65"
> >
<div <div
class="c64" class="c66"
> >
Build dApps Build dApps
</div> </div>
...@@ -2191,12 +2244,12 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2191,12 +2244,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
</svg> </svg>
</div> </div>
<div <div
class="c69" class="c71"
type="Secondary" type="Secondary"
> >
Build apps and tools on the largest DeFi protocol on Ethereum. Build apps and tools on the largest DeFi protocol on Ethereum.
<div <div
class="c69 c66" class="c71 c68"
type="Secondary" type="Secondary"
> >
Developer docs Developer docs
...@@ -2205,27 +2258,27 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2205,27 +2258,27 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c71" class="c73"
> >
<div <div
class="c72" class="c74"
> >
<div <div
class="c73" class="c75"
> >
Powered by the Uniswap Protocol Powered by the Uniswap Protocol
</div> </div>
<div <div
class="c74" class="c76"
> >
The leading decentralized crypto trading protocol, governed by a global community. The leading decentralized crypto trading protocol, governed by a global community.
</div> </div>
</div> </div>
<div <div
class="c75" class="c77"
> >
<a <a
class="c76 c77 c78" class="c78 c79 c80"
href="https://uniswap.org" href="https://uniswap.org"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2236,53 +2289,53 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2236,53 +2289,53 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c79" class="c81"
> >
<div <div
class="c80 c81" class="c82 c83"
> >
<img <img
alt="Uniswap Logo" alt="Uniswap Logo"
class="c82" class="c84"
src="unicornEmbossLight.png" src="unicornEmbossLight.png"
/> />
<div <div
class="c83" class="c85"
> >
<a <a
class="c84" class="c86"
href="https://discord.gg/FCfyBSbCU5" href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c85" class="c87"
size="32" size="32"
> >
discord.svg discord.svg
</svg> </svg>
</a> </a>
<a <a
class="c84" class="c86"
href="https://twitter.com/uniswap" href="https://twitter.com/uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c86" class="c88"
size="32" size="32"
> >
twitter-safe.svg twitter-safe.svg
</svg> </svg>
</a> </a>
<a <a
class="c84" class="c86"
href="https://github.com/Uniswap" href="https://github.com/Uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c87" class="c89"
size="32" size="32"
> >
github.svg github.svg
...@@ -2290,7 +2343,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2290,7 +2343,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<span <span
class="2 c88" class="2 c90"
> >
© ©
2023 2023
...@@ -2298,45 +2351,45 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2298,45 +2351,45 @@ exports[`disable nft on landing page does not render nft information and card 1`
</span> </span>
</div> </div>
<div <div
class="c89" class="c91"
> >
<div <div
class="c90" class="c92"
> >
<span <span
class="c91" class="c93"
> >
App App
</span> </span>
<a <a
class="1 c92 c93" class="1 c94 c95"
href="#/swap" href="#/swap"
> >
Swap Swap
</a> </a>
<a <a
class="1 c92 c93" class="1 c94 c95"
href="#/tokens" href="#/tokens"
> >
Tokens Tokens
</a> </a>
<a <a
class="1 c92 c93" class="1 c94 c95"
href="#/pools" href="#/pools"
> >
Pools Pools
</a> </a>
</div> </div>
<div <div
class="c90" class="c92"
> >
<span <span
class="c91" class="c93"
> >
Protocol Protocol
</span> </span>
<a <a
class="c94 0 c95" class="c96 0 c97"
href="https://uniswap.org/community" href="https://uniswap.org/community"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2344,7 +2397,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2344,7 +2397,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Community Community
</a> </a>
<a <a
class="c94 0 c95" class="c96 0 c97"
href="https://uniswap.org/governance" href="https://uniswap.org/governance"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2352,7 +2405,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2352,7 +2405,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Governance Governance
</a> </a>
<a <a
class="c94 0 c95" class="c96 0 c97"
href="https://uniswap.org/developers" href="https://uniswap.org/developers"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2361,15 +2414,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2361,15 +2414,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c90" class="c92"
> >
<span <span
class="c91" class="c93"
> >
Company Company
</span> </span>
<a <a
class="c94 0 c95" class="c96 0 c97"
href="https://boards.greenhouse.io/uniswaplabs" href="https://boards.greenhouse.io/uniswaplabs"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2377,7 +2430,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2377,7 +2430,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Careers Careers
</a> </a>
<a <a
class="c94 0 c95" class="c96 0 c97"
href="https://uniswap.org/blog" href="https://uniswap.org/blog"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2386,15 +2439,15 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2386,15 +2439,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<div <div
class="c90" class="c92"
> >
<span <span
class="c91" class="c93"
> >
Get Help Get Help
</span> </span>
<a <a
class="c94 0 c95" class="c96 0 c97"
href="https://support.uniswap.org/hc/en-us/requests/new" href="https://support.uniswap.org/hc/en-us/requests/new"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2402,7 +2455,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2402,7 +2455,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
Contact Us Contact Us
</a> </a>
<a <a
class="c94 0 c95" class="c96 0 c97"
href="https://support.uniswap.org/hc/en-us" href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -2412,50 +2465,50 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2412,50 +2465,50 @@ exports[`disable nft on landing page does not render nft information and card 1`
</div> </div>
</div> </div>
<div <div
class="c80 c96" class="c82 c98"
> >
<img <img
alt="Uniswap Logo" alt="Uniswap Logo"
class="c82" class="c84"
src="unicornEmbossLight.png" src="unicornEmbossLight.png"
/> />
<div <div
class="c83" class="c85"
> >
<a <a
class="c84" class="c86"
href="https://discord.gg/FCfyBSbCU5" href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c85" class="c87"
size="32" size="32"
> >
discord.svg discord.svg
</svg> </svg>
</a> </a>
<a <a
class="c84" class="c86"
href="https://twitter.com/uniswap" href="https://twitter.com/uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c86" class="c88"
size="32" size="32"
> >
twitter-safe.svg twitter-safe.svg
</svg> </svg>
</a> </a>
<a <a
class="c84" class="c86"
href="https://github.com/Uniswap" href="https://github.com/Uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c87" class="c89"
size="32" size="32"
> >
github.svg github.svg
...@@ -2463,7 +2516,7 @@ exports[`disable nft on landing page does not render nft information and card 1` ...@@ -2463,7 +2516,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
</a> </a>
</div> </div>
<span <span
class="2 c88" class="2 c90"
> >
© ©
2023 2023
...@@ -2483,7 +2536,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2483,7 +2536,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
min-width: 0; min-width: 0;
} }
.c23 { .c24 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
...@@ -2506,7 +2559,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2506,7 +2559,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border-radius: 4px; border-radius: 4px;
} }
.c42 { .c43 {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
min-width: 0; min-width: 0;
...@@ -2564,7 +2617,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2564,7 +2617,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
color: #0D111C; color: #0D111C;
} }
.c95 { .c20 {
color: #98A1C0;
}
.c97 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -2575,15 +2632,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2575,15 +2632,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
font-weight: 500; font-weight: 500;
} }
.c95:hover { .c97:hover {
opacity: 0.6; opacity: 0.6;
} }
.c95:active { .c97:active {
opacity: 0.4; opacity: 0.4;
} }
.c93 { .c95 {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
...@@ -2594,36 +2651,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2594,36 +2651,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
font-weight: 500; font-weight: 500;
} }
.c93:hover { .c95:hover {
opacity: 0.6; opacity: 0.6;
} }
.c93:active { .c95:active {
opacity: 0.4; opacity: 0.4;
} }
.c86 { .c88 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c87 { .c89 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c88 { .c90 {
height: 32px; height: 32px;
width: 32px; width: 32px;
fill: #98A1C0; fill: #98A1C0;
opacity: 1; opacity: 1;
} }
.c80 { .c82 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2636,7 +2693,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2636,7 +2693,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
max-width: 1440px; max-width: 1440px;
} }
.c81 { .c83 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2646,24 +2703,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2646,24 +2703,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
flex-direction: column; flex-direction: column;
} }
.c82 { .c84 {
display: none; display: none;
} }
.c97 { .c99 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.c83 { .c85 {
width: 72px; width: 72px;
height: 72px; height: 72px;
display: none; display: none;
} }
.c84 { .c86 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2676,20 +2733,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2676,20 +2733,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
.c85 { .c87 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
} }
.c90 { .c92 {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 12px; gap: 12px;
} }
.c91 { .c93 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2702,32 +2759,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2702,32 +2759,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin: 20px 0 0 0; margin: 20px 0 0 0;
} }
.c92 { .c94 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
font-weight: 700; font-weight: 700;
} }
.c96 { .c98 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #7780A0; color: #7780A0;
} }
.c94 { .c96 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
color: #7780A0; color: #7780A0;
} }
.c89 { .c91 {
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
margin: 1rem 0 0 0; margin: 1rem 0 0 0;
color: #98A1C0; color: #98A1C0;
} }
.c62 { .c64 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2756,11 +2813,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2756,11 +2813,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease border; transition: 250ms ease border;
} }
.c62:hover { .c64:hover {
border: 1px solid #98A1C0; border: 1px solid #98A1C0;
} }
.c67 { .c69 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2789,11 +2846,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2789,11 +2846,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease border; transition: 250ms ease border;
} }
.c67:hover { .c69:hover {
border: 1px solid #98A1C0; border: 1px solid #98A1C0;
} }
.c69 { .c71 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2822,11 +2879,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2822,11 +2879,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease border; transition: 250ms ease border;
} }
.c69:hover { .c71:hover {
border: 1px solid #98A1C0; border: 1px solid #98A1C0;
} }
.c63 { .c65 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2841,13 +2898,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2841,13 +2898,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
justify-content: space-between; justify-content: space-between;
} }
.c64 { .c66 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
font-weight: 600; font-weight: 600;
} }
.c65 { .c67 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2862,7 +2919,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2862,7 +2919,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
max-width: 480px; max-width: 480px;
} }
.c70 { .c72 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -2877,7 +2934,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2877,7 +2934,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
max-width: 480px; max-width: 480px;
} }
.c66 { .c68 {
color: #FB118E; color: #FB118E;
font-weight: 500; font-weight: 500;
margin: 24px 0 0; margin: 24px 0 0;
...@@ -2886,18 +2943,18 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2886,18 +2943,18 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c66:hover { .c68:hover {
opacity: 0.6; opacity: 0.6;
} }
.c71 { .c73 {
min-width: 20px; min-width: 20px;
min-height: 20px; min-height: 20px;
max-height: 48px; max-height: 48px;
max-width: 48px; max-width: 48px;
} }
.c45 { .c47 {
background-color: transparent; background-color: transparent;
bottom: 0; bottom: 0;
border-radius: inherit; border-radius: inherit;
...@@ -2911,7 +2968,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2911,7 +2968,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
width: 100%; width: 100%;
} }
.c24 { .c25 {
padding: 16px; padding: 16px;
width: 100%; width: 100%;
font-weight: 500; font-weight: 500;
...@@ -2949,25 +3006,81 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -2949,25 +3006,81 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
} }
.c24:disabled { .c25:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
pointer-events: none; pointer-events: none;
} }
.c24 > * { .c25 > * {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.c24 > a { .c25 > a {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c77 { .c44 {
padding: 16px;
width: 100%;
font-weight: 500;
text-align: center;
border-radius: 16px;
outline: none;
border: 1px solid transparent;
color: #0D111C;
-webkit-text-decoration: none;
text-decoration: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
position: relative;
z-index: 1;
will-change: transform;
-webkit-transition: -webkit-transform 450ms ease;
-webkit-transition: transform 450ms ease;
transition: transform 450ms ease;
-webkit-transform: perspective(1px) translateZ(0);
-ms-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
}
.c44:disabled {
opacity: 50%;
cursor: auto;
pointer-events: none;
}
.c44 > * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.c44 > a {
-webkit-text-decoration: none;
text-decoration: none;
}
.c79 {
padding: 16px; padding: 16px;
width: 200px; width: 200px;
font-weight: 500; font-weight: 500;
...@@ -3005,58 +3118,58 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3005,58 +3118,58 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
} }
.c77:disabled { .c79:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
pointer-events: none; pointer-events: none;
} }
.c77 > * { .c79 > * {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.c77 > a { .c79 > a {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c43 { .c45 {
background-color: #FB118E1f; background-color: #FB118E1f;
color: #FB118E; color: #FB118E;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
} }
.c43:focus { .c45:focus {
box-shadow: 0 0 0 1pt #FB118E1f; box-shadow: 0 0 0 1pt #FB118E1f;
background-color: #FB118E1f; background-color: #FB118E1f;
} }
.c43:hover { .c45:hover {
background-color: #FB118E1f; background-color: #FB118E1f;
} }
.c43:active { .c45:active {
box-shadow: 0 0 0 1pt #FB118E1f; box-shadow: 0 0 0 1pt #FB118E1f;
background-color: #FB118E1f; background-color: #FB118E1f;
} }
.c43:hover .c44 { .c45:hover .c46 {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c43:active .c44 { .c45:active .c46 {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c43:disabled { .c45:disabled {
opacity: 0.4; opacity: 0.4;
} }
.c43:disabled:hover { .c45:disabled:hover {
cursor: auto; cursor: auto;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
...@@ -3064,22 +3177,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3064,22 +3177,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
outline: none; outline: none;
} }
.c25 { .c26 {
background-color: #F5F6FC; background-color: #F5F6FC;
color: #7780A0; color: #7780A0;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
.c25:hover { .c26:hover {
background-color: #d2daf7; background-color: #d2daf7;
} }
.c25:active { .c26:active {
background-color: #bdc8f3; background-color: #bdc8f3;
} }
.c78 { .c80 {
background-color: transparent; background-color: transparent;
color: #FB118E; color: #FB118E;
display: -webkit-box; display: -webkit-box;
...@@ -3096,27 +3209,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3096,27 +3209,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
align-items: center; align-items: center;
} }
.c78:focus { .c80:focus {
-webkit-text-decoration: underline; -webkit-text-decoration: underline;
text-decoration: underline; text-decoration: underline;
} }
.c78:hover { .c80:hover {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c78:active { .c80:active {
-webkit-text-decoration: none; -webkit-text-decoration: none;
text-decoration: none; text-decoration: none;
} }
.c78:disabled { .c80:disabled {
opacity: 50%; opacity: 50%;
cursor: auto; cursor: auto;
} }
.c72 { .c74 {
height: 340px; height: 340px;
width: 100%; width: 100%;
border-radius: 32px; border-radius: 32px;
...@@ -3142,7 +3255,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3142,7 +3255,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%); background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%);
} }
.c73 { .c75 {
color: white; color: white;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3156,20 +3269,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3156,20 +3269,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
flex-direction: column; flex-direction: column;
} }
.c74 { .c76 {
font-weight: 700; font-weight: 700;
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
.c75 { .c77 {
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
} }
.c76 { .c78 {
width: 100%; width: 100%;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3183,22 +3296,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3183,22 +3296,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c76:hover { .c78:hover {
opacity: 0.6; opacity: 0.6;
} }
.c79 { .c81 {
color: white; color: white;
border: 1px solid white; border: 1px solid white;
} }
.c38 { .c39 {
display: grid; display: grid;
grid-auto-rows: auto; grid-auto-rows: auto;
grid-row-gap: 4px; grid-row-gap: 4px;
} }
.c35 { .c36 {
-webkit-filter: none; -webkit-filter: none;
filter: none; filter: none;
opacity: 1; opacity: 1;
...@@ -3206,7 +3319,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3206,7 +3319,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
.c30 { .c31 {
opacity: 0; opacity: 0;
-webkit-transition: opacity 250ms ease-in; -webkit-transition: opacity 250ms ease-in;
transition: opacity 250ms ease-in; transition: opacity 250ms ease-in;
...@@ -3215,7 +3328,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3215,7 +3328,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border-radius: 50%; border-radius: 50%;
} }
.c29 { .c30 {
width: 24px; width: 24px;
height: 24px; height: 24px;
background: #E8ECFB; background: #E8ECFB;
...@@ -3225,7 +3338,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3225,7 +3338,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border-radius: 50%; border-radius: 50%;
} }
.c28 { .c29 {
position: relative; position: relative;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3233,7 +3346,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3233,7 +3346,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
display: flex; display: flex;
} }
.c21 { .c22 {
color: #0D111C; color: #0D111C;
width: 0; width: 0;
position: relative; position: relative;
...@@ -3253,32 +3366,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3253,32 +3366,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
text-align: right; text-align: right;
} }
.c21::-webkit-search-decoration { .c22::-webkit-search-decoration {
-webkit-appearance: none; -webkit-appearance: none;
} }
.c21 [type='number'] { .c22 [type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
.c21::-webkit-outer-spin-button, .c22::-webkit-outer-spin-button,
.c21::-webkit-inner-spin-button { .c22::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }
.c21::-webkit-input-placeholder { .c22::-webkit-input-placeholder {
color: #98A1C0; color: #98A1C0;
} }
.c21::-moz-placeholder { .c22::-moz-placeholder {
color: #98A1C0; color: #98A1C0;
} }
.c21:-ms-input-placeholder { .c22:-ms-input-placeholder {
color: #98A1C0; color: #98A1C0;
} }
.c21::placeholder { .c22::placeholder {
color: #98A1C0; color: #98A1C0;
} }
...@@ -3305,7 +3418,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3305,7 +3418,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
width: initial; width: initial;
} }
.c26 { .c27 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -3324,7 +3437,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3324,7 +3437,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
user-select: none; user-select: none;
border: none; border: none;
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 500;
width: initial; width: initial;
padding: 4px 8px 4px 4px; padding: 4px 8px 4px 4px;
gap: 8px; gap: 8px;
...@@ -3336,12 +3449,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3336,12 +3449,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
visibility: visible; visibility: visible;
} }
.c26:hover, .c27:hover,
.c26:active { .c27:active {
background-color: #E8ECFB; background-color: #E8ECFB;
} }
.c26:before { .c27:before {
background-size: 100%; background-size: 100%;
border-radius: inherit; border-radius: inherit;
position: absolute; position: absolute;
...@@ -3352,15 +3465,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3352,15 +3465,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
content: ''; content: '';
} }
.c26:hover:before { .c27:hover:before {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c26:active:before { .c27:active:before {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c40 { .c41 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -3379,7 +3492,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3379,7 +3492,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
user-select: none; user-select: none;
border: none; border: none;
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 500;
width: initial; width: initial;
padding: 6px 6px 6px 8px; padding: 6px 6px 6px 8px;
gap: 8px; gap: 8px;
...@@ -3391,12 +3504,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3391,12 +3504,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
visibility: visible; visibility: visible;
} }
.c40:hover, .c41:hover,
.c40:active { .c41:active {
background-color: #FB118E; background-color: #FB118E;
} }
.c40:before { .c41:before {
background-size: 100%; background-size: 100%;
border-radius: inherit; border-radius: inherit;
position: absolute; position: absolute;
...@@ -3407,15 +3520,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3407,15 +3520,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
content: ''; content: '';
} }
.c40:hover:before { .c41:hover:before {
background-color: #98A1C014; background-color: #98A1C014;
} }
.c40:active:before { .c41:active:before {
background-color: #B8C0DC3d; background-color: #B8C0DC3d;
} }
.c20 { .c21 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -3433,7 +3546,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3433,7 +3546,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
justify-content: space-between; justify-content: space-between;
} }
.c33 { .c34 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -3450,12 +3563,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3450,12 +3563,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
line-height: 1rem; line-height: 1rem;
} }
.c33 span:hover { .c34 span:hover {
cursor: pointer; cursor: pointer;
color: #495068; color: #495068;
} }
.c34 { .c35 {
-webkit-box-pack: end; -webkit-box-pack: end;
-webkit-justify-content: flex-end; -webkit-justify-content: flex-end;
-ms-flex-pack: end; -ms-flex-pack: end;
...@@ -3464,7 +3577,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3464,7 +3577,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
padding: 8px 0px 0px 0px; padding: 8px 0px 0px 0px;
} }
.c27 { .c28 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -3480,35 +3593,35 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3480,35 +3593,35 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
width: 100%; width: 100%;
} }
.c32 { .c33 {
margin: 0 0.25rem 0 0.35rem; margin: 0 0.25rem 0 0.35rem;
height: 35%; height: 35%;
margin-left: 8px; margin-left: 8px;
} }
.c32 path { .c33 path {
stroke: #0D111C; stroke: #0D111C;
stroke-width: 2px; stroke-width: 2px;
} }
.c41 { .c42 {
margin: 0 0.25rem 0 0.35rem; margin: 0 0.25rem 0 0.35rem;
height: 35%; height: 35%;
margin-left: 8px; margin-left: 8px;
} }
.c41 path { .c42 path {
stroke: #FFFFFF; stroke: #FFFFFF;
stroke-width: 2px; stroke-width: 2px;
} }
.c31 { .c32 {
margin: 0 0.25rem 0 0.25rem; margin: 0 0.25rem 0 0.25rem;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
} }
.c22 { .c23 {
-webkit-filter: none; -webkit-filter: none;
filter: none; filter: none;
opacity: 1; opacity: 1;
...@@ -3529,7 +3642,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3529,7 +3642,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
.c4 { .c4 {
position: relative; position: relative;
background: #FFFFFF; background: #FFFFFF;
border-radius: 16px; border-radius: 24px;
border: 1px solid #D2D9EE; border: 1px solid #D2D9EE;
padding: 8px; padding: 8px;
padding-top: 12px; padding-top: 12px;
...@@ -3543,7 +3656,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3543,7 +3656,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border: 1px solid #D2D9EE; border: 1px solid #D2D9EE;
} }
.c36 { .c37 {
border-radius: 12px; border-radius: 12px;
height: 40px; height: 40px;
width: 40px; width: 40px;
...@@ -3552,24 +3665,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3552,24 +3665,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin-bottom: -18px; margin-bottom: -18px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
background-color: #E8ECFB; background-color: #F5F6FC;
border: 4px solid; border: 4px solid;
border-color: #FFFFFF; border-color: #FFFFFF;
z-index: 2; z-index: 2;
} }
.c36:hover { .c37:hover {
cursor: pointer; cursor: pointer;
opacity: 0.8; opacity: 0.8;
} }
.c16 { .c16 {
height: 20px; height: 24px;
width: 20px; width: 24px;
} }
.c16 > * { .c16 > * {
stroke: #7780A0; fill: #7780A0;
} }
.c14 { .c14 {
...@@ -3604,7 +3717,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3604,7 +3717,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
gap: 16px; gap: 16px;
} }
.c37 { .c38 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
...@@ -3622,14 +3735,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3622,14 +3735,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
.c17 { .c17 {
position: relative;
background-color: #F5F6FC; background-color: #F5F6FC;
border-radius: 12px; border-radius: 16px;
padding: 16px;
color: #7780A0; color: #7780A0;
font-size: 14px; font-size: 14px;
line-height: 20px;
font-weight: 500; font-weight: 500;
height: 120px;
line-height: 20px;
padding: 16px;
position: relative;
} }
.c17:before { .c17:before {
...@@ -3654,7 +3768,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3654,7 +3768,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
border-color: #B8C0DC3d; border-color: #B8C0DC3d;
} }
.c39 { .c40 {
border-bottom: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF;
} }
...@@ -3681,7 +3795,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3681,7 +3795,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
overflow-x: hidden; overflow-x: hidden;
} }
.c46 { .c48 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3705,7 +3819,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3705,7 +3819,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: calc(100vh - 52px); height: calc(100vh - 52px);
} }
.c47 { .c49 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3726,7 +3840,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3726,7 +3840,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: calc(100vh - 52px); height: calc(100vh - 52px);
} }
.c48 { .c50 {
position: absolute; position: absolute;
top: 68px; top: 68px;
bottom: 0; bottom: 0;
...@@ -3739,7 +3853,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3739,7 +3853,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
height: 100%; height: 100%;
} }
.c49 { .c51 {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
...@@ -3767,11 +3881,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3767,11 +3881,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
pointer-events: none; pointer-events: none;
} }
.c49 * { .c51 * {
pointer-events: auto; pointer-events: auto;
} }
.c50 { .c52 {
color: transparent; color: transparent;
font-size: 36px; font-size: 36px;
line-height: 44px; line-height: 44px;
...@@ -3783,7 +3897,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3783,7 +3897,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
-webkit-background-clip: text; -webkit-background-clip: text;
} }
.c52 { .c54 {
color: #7780A0; color: #7780A0;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
...@@ -3793,7 +3907,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3793,7 +3907,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
margin: 0 0 32px; margin: 0 0 32px;
} }
.c51 { .c53 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -3804,12 +3918,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3804,12 +3918,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
justify-content: center; justify-content: center;
} }
.c54 { .c56 {
padding: 16px 0px; padding: 16px 0px;
border-radius: 24px; border-radius: 24px;
} }
.c55 { .c57 {
background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
border: none; border: none;
color: #FFFFFF; color: #FFFFFF;
...@@ -3817,24 +3931,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3817,24 +3931,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: all 250ms ease; transition: all 250ms ease;
} }
.c55:hover { .c57:hover {
box-shadow: 0px 0px 16px 0px #ff00c7; box-shadow: 0px 0px 16px 0px #ff00c7;
} }
.c56 { .c58 {
margin: 0px; margin: 0px;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
} }
.c53 { .c55 {
max-width: 300px; max-width: 300px;
width: 100%; width: 100%;
pointer-events: auto; pointer-events: auto;
} }
.c57 { .c59 {
-webkit-align-items: center; -webkit-align-items: center;
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
...@@ -3854,16 +3968,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3854,16 +3968,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
transition: 250ms ease opacity; transition: 250ms ease opacity;
} }
.c57:hover { .c59:hover {
opacity: 0.6; opacity: 0.6;
} }
.c58 { .c60 {
margin-left: 14px; margin-left: 14px;
size: 20px; size: 20px;
} }
.c60 { .c62 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -3880,7 +3994,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3880,7 +3994,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%); background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%);
} }
.c61 { .c63 {
display: grid; display: grid;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
...@@ -3893,7 +4007,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3893,7 +4007,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.c68 { .c70 {
display: grid; display: grid;
gap: 12px; gap: 12px;
width: 100%; width: 100%;
...@@ -3947,7 +4061,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3947,7 +4061,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
width: 100%; width: 100%;
} }
.c59 { .c61 {
display: -webkit-inline-box; display: -webkit-inline-box;
display: -webkit-inline-flex; display: -webkit-inline-flex;
display: -ms-inline-flexbox; display: -ms-inline-flexbox;
...@@ -3962,12 +4076,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3962,12 +4076,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
text-align: center; text-align: center;
} }
.c59:hover { .c61:hover {
color: #98A1C0; color: #98A1C0;
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c80 { .c82 {
-webkit-flex-direction: row; -webkit-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
...@@ -3979,7 +4093,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3979,7 +4093,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c82 { .c84 {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
...@@ -3988,75 +4102,75 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -3988,75 +4102,75 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c97 { .c99 {
display: none; display: none;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c83 { .c85 {
display: block; display: block;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c90 { .c92 {
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 24px; gap: 24px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c91 { .c93 {
margin: 0; margin: 0;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c62 { .c64 {
height: 360px; height: 360px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c62 { .c64 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c67 { .c69 {
height: 360px; height: 360px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c67 { .c69 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c69 { .c71 {
height: 260px; height: 260px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c69 { .c71 {
padding: 32px; padding: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c64 { .c66 {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c65 { .c67 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
max-width: 480px; max-width: 480px;
...@@ -4064,7 +4178,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4064,7 +4178,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c70 { .c72 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
max-width: 480px; max-width: 480px;
...@@ -4072,7 +4186,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4072,7 +4186,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c72 { .c74 {
height: 140px; height: 140px;
-webkit-flex-direction: row; -webkit-flex-direction: row;
-ms-flex-direction: row; -ms-flex-direction: row;
...@@ -4081,21 +4195,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4081,21 +4195,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c74 { .c76 {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
} }
} }
@media screen and (min-width:1280px) { @media screen and (min-width:1280px) {
.c75 { .c77 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c76 { .c78 {
width: auto; width: auto;
} }
} }
...@@ -4113,79 +4227,79 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4113,79 +4227,79 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c46 { .c48 {
height: 100vh; height: 100vh;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c47 { .c49 {
height: 100vh; height: 100vh;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c50 { .c52 {
font-size: 48px; font-size: 48px;
line-height: 56px; line-height: 56px;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c50 { .c52 {
font-size: 64px; font-size: 64px;
line-height: 72px; line-height: 72px;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c52 { .c54 {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c56 { .c58 {
font-size: 20px; font-size: 20px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c57 { .c59 {
visibility: visible; visibility: visible;
} }
} }
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.c60 { .c62 {
padding: 0 96px 5rem; padding: 0 96px 5rem;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c61 { .c63 {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c61 { .c63 {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:640px) { @media screen and (min-width:640px) {
.c68 { .c70 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 32px; gap: 32px;
} }
} }
@media screen and (min-width:1024px) { @media screen and (min-width:1024px) {
.c68 { .c70 {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
gap: 32px; gap: 32px;
} }
...@@ -4239,24 +4353,8 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4239,24 +4353,8 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
> >
<svg <svg
class="c16" class="c16"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
> >
<circle settings.svg
cx="12"
cy="12"
r="3"
/>
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
/>
</svg> </svg>
</div> </div>
</button> </button>
...@@ -4272,18 +4370,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4272,18 +4370,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
<div <div
class="c18" class="c18"
id="swap-currency-input" id="swap-currency-input"
label="[object Object]"
> >
<div <div
class="c19" class="c19"
> >
<div <div
class="c20" class="c20 css-1aekuku"
>
You pay
</div>
<div
class="c21"
> >
<input <input
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
class="c21 c22 token-amount-input" class="c22 c23 token-amount-input"
inputmode="decimal" inputmode="decimal"
maxlength="79" maxlength="79"
minlength="1" minlength="1"
...@@ -4295,36 +4397,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4295,36 +4397,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
/> />
<div> <div>
<button <button
class="c23 c24 c25 c26 open-currency-select-button" class="c24 c25 c26 c27 open-currency-select-button"
> >
<span <span
class="c27" class="c28"
> >
<div <div
class="c6 c7 c10" class="c6 c7 c10"
> >
<div <div
class="c28" class="c29"
style="margin-right: 2px;" style="margin-right: 2px;"
> >
<div <div
class="c29" class="c30"
> >
<img <img
alt="ETH logo" alt="ETH logo"
class="c30" class="c31"
src="ethereum-logo.png" src="ethereum-logo.png"
/> />
</div> </div>
</div> </div>
<span <span
class="c31 token-symbol-container" class="c32 token-symbol-container"
> >
ETH ETH
</span> </span>
</div> </div>
<svg <svg
class="c32" class="c33"
> >
dropdown.svg dropdown.svg
</svg> </svg>
...@@ -4333,13 +4435,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4333,13 +4435,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c33 c34" class="c34 c35"
> >
<div <div
class="c6 c7 c8" class="c6 c7 c8"
> >
<div <div
class="c35" class="c36"
/> />
<span /> <span />
</div> </div>
...@@ -4348,17 +4450,17 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4348,17 +4450,17 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c36" class="c37"
> >
<div <div
class="c37" class="c38"
color="#0D111C" color="#0D111C"
data-testid="swap-currency-button" data-testid="swap-currency-button"
> >
<svg <svg
fill="none" fill="none"
height="16" height="16"
stroke="#98A1C0" stroke="#0D111C"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2" stroke-width="2"
...@@ -4380,27 +4482,31 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4380,27 +4482,31 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c38" class="c39"
> >
<div> <div>
<div <div
class="c17 c39" class="c17 c40"
> >
<div <div
class="c18" class="c18"
id="swap-currency-output" id="swap-currency-output"
label="[object Object]"
> >
<div <div
class="c19" class="c19"
> >
<div <div
class="c20" class="c20 css-1aekuku"
>
You receive
</div>
<div
class="c21"
> >
<input <input
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
class="c21 c22 token-amount-input" class="c22 c23 token-amount-input"
inputmode="decimal" inputmode="decimal"
maxlength="79" maxlength="79"
minlength="1" minlength="1"
...@@ -4412,22 +4518,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4412,22 +4518,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
/> />
<div> <div>
<button <button
class="c23 c24 c25 c40 open-currency-select-button" class="c24 c25 c26 c41 open-currency-select-button"
> >
<span <span
class="c27" class="c28"
> >
<div <div
class="c6 c7 c10" class="c6 c7 c10"
> >
<span <span
class="c31 token-symbol-container" class="c32 token-symbol-container"
> >
Select token Select token
</span> </span>
</div> </div>
<svg <svg
class="c41" class="c42"
> >
dropdown.svg dropdown.svg
</svg> </svg>
...@@ -4436,13 +4542,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4436,13 +4542,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c33 c34" class="c34 c35"
> >
<div <div
class="c6 c7 c8" class="c6 c7 c8"
> >
<div <div
class="c35" class="c36"
/> />
<span /> <span />
</div> </div>
...@@ -4453,11 +4559,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4453,11 +4559,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
<div> <div>
<button <button
class="c42 c24 c43" class="c43 c44 c45"
font-weight="600" font-weight="600"
> >
<div <div
class="c44 c45" class="c46 c47"
/> />
Connect Wallet Connect Wallet
</button> </button>
...@@ -4468,52 +4574,52 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4468,52 +4574,52 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c46" class="c48"
/> />
<div <div
class="c47" class="c49"
> >
<div <div
class="c48" class="c50"
/> />
</div> </div>
<div <div
class="c49" class="c51"
> >
<h1 <h1
class="c50" class="c52"
> >
Trade crypto and NFTs with confidence Trade crypto and NFTs with confidence
</h1> </h1>
<div <div
class="c51" class="c53"
> >
<div <div
class="c52" class="c54"
> >
Buy, sell, and explore tokens and NFTs Buy, sell, and explore tokens and NFTs
</div> </div>
</div> </div>
<span <span
class="1 c53" class="1 c55"
> >
<a <a
class="c2 c24 c54 c55" class="c2 c25 c56 c57"
href="#/swap" href="#/swap"
> >
<p <p
class="0 c56" class="0 c58"
> >
Get started Get started
</p> </p>
</a> </a>
</span> </span>
<div <div
class="2 c57" class="2 c59"
> >
Learn more Learn more
<svg <svg
class="3 c58" class="3 c60"
fill="none" fill="none"
height="24" height="24"
stroke="currentColor" stroke="currentColor"
...@@ -4541,7 +4647,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4541,7 +4647,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</svg> </svg>
</div> </div>
<a <a
class="9 c59" class="9 c61"
href="https://wallet.uniswap.org/?utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1" href="https://wallet.uniswap.org/?utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1"
> >
<svg <svg
...@@ -4558,32 +4664,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4558,32 +4664,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="4 c60" class="4 c62"
> >
<div <div
class="5 c61" class="5 c63"
cols="2" cols="2"
> >
<a <a
class="c62" class="c64"
href="#/swap" href="#/swap"
> >
<div <div
class="c63" class="c65"
> >
<div <div
class="c64" class="c66"
> >
Swap tokens Swap tokens
</div> </div>
</div> </div>
<div <div
class="c65" class="c67"
type="Primary" type="Primary"
> >
Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more. Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
<div <div
class="c65 c66" class="c67 c68"
type="Primary" type="Primary"
> >
Trade Tokens Trade Tokens
...@@ -4591,25 +4697,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4591,25 +4697,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</a> </a>
<a <a
class="c67" class="c69"
href="#/nfts" href="#/nfts"
> >
<div <div
class="c63" class="c65"
> >
<div <div
class="c64" class="c66"
> >
Trade NFTs Trade NFTs
</div> </div>
</div> </div>
<div <div
class="c65" class="c67"
type="Primary" type="Primary"
> >
Buy and sell NFTs across marketplaces to find more listings at better prices. Buy and sell NFTs across marketplaces to find more listings at better prices.
<div <div
class="c65 c66" class="c67 c68"
type="Primary" type="Primary"
> >
Explore NFTs Explore NFTs
...@@ -4618,20 +4724,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4618,20 +4724,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="5 c68" class="5 c70"
cols="3" cols="3"
> >
<a <a
class="c69" class="c71"
href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-" href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-"
rel="noopenener noreferrer" rel="noopenener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c63" class="c65"
> >
<div <div
class="c64" class="c66"
> >
Buy crypto Buy crypto
</div> </div>
...@@ -4658,12 +4764,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4658,12 +4764,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c70" class="c72"
type="Secondary" type="Secondary"
> >
Buy crypto with your credit card or bank account at the best rates. Buy crypto with your credit card or bank account at the best rates.
<div <div
class="c70 c66" class="c72 c68"
type="Secondary" type="Secondary"
> >
Buy now Buy now
...@@ -4671,30 +4777,30 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4671,30 +4777,30 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</a> </a>
<a <a
class="c69" class="c71"
href="#/pools" href="#/pools"
> >
<div <div
class="c63" class="c65"
> >
<div <div
class="c64" class="c66"
> >
Earn Earn
</div> </div>
<img <img
alt="Analytics" alt="Analytics"
class="c71" class="c73"
src="aboutArrowLight.png" src="aboutArrowLight.png"
/> />
</div> </div>
<div <div
class="c70" class="c72"
type="Secondary" type="Secondary"
> >
Provide liquidity to pools on Uniswap and earn fees on swaps. Provide liquidity to pools on Uniswap and earn fees on swaps.
<div <div
class="c70 c66" class="c72 c68"
type="Secondary" type="Secondary"
> >
Provide liquidity Provide liquidity
...@@ -4702,16 +4808,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4702,16 +4808,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</a> </a>
<a <a
class="c69" class="c71"
href="https://docs.uniswap.org" href="https://docs.uniswap.org"
rel="noopenener noreferrer" rel="noopenener noreferrer"
target="_blank" target="_blank"
> >
<div <div
class="c63" class="c65"
> >
<div <div
class="c64" class="c66"
> >
Build dApps Build dApps
</div> </div>
...@@ -4738,12 +4844,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4738,12 +4844,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</svg> </svg>
</div> </div>
<div <div
class="c70" class="c72"
type="Secondary" type="Secondary"
> >
Build apps and tools on the largest DeFi protocol on Ethereum. Build apps and tools on the largest DeFi protocol on Ethereum.
<div <div
class="c70 c66" class="c72 c68"
type="Secondary" type="Secondary"
> >
Developer docs Developer docs
...@@ -4752,27 +4858,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4752,27 +4858,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c72" class="c74"
> >
<div <div
class="c73" class="c75"
> >
<div <div
class="c74" class="c76"
> >
Powered by the Uniswap Protocol Powered by the Uniswap Protocol
</div> </div>
<div <div
class="c75" class="c77"
> >
The leading decentralized crypto trading protocol, governed by a global community. The leading decentralized crypto trading protocol, governed by a global community.
</div> </div>
</div> </div>
<div <div
class="c76" class="c78"
> >
<a <a
class="c77 c78 c79" class="c79 c80 c81"
href="https://uniswap.org" href="https://uniswap.org"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -4783,53 +4889,53 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4783,53 +4889,53 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c80" class="c82"
> >
<div <div
class="c81 c82" class="c83 c84"
> >
<img <img
alt="Uniswap Logo" alt="Uniswap Logo"
class="c83" class="c85"
src="unicornEmbossLight.png" src="unicornEmbossLight.png"
/> />
<div <div
class="c84" class="c86"
> >
<a <a
class="c85" class="c87"
href="https://discord.gg/FCfyBSbCU5" href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c86" class="c88"
size="32" size="32"
> >
discord.svg discord.svg
</svg> </svg>
</a> </a>
<a <a
class="c85" class="c87"
href="https://twitter.com/uniswap" href="https://twitter.com/uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c87" class="c89"
size="32" size="32"
> >
twitter-safe.svg twitter-safe.svg
</svg> </svg>
</a> </a>
<a <a
class="c85" class="c87"
href="https://github.com/Uniswap" href="https://github.com/Uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c88" class="c90"
size="32" size="32"
> >
github.svg github.svg
...@@ -4837,7 +4943,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4837,7 +4943,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<span <span
class="2 c89" class="2 c91"
> >
© ©
2023 2023
...@@ -4845,51 +4951,51 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4845,51 +4951,51 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</span> </span>
</div> </div>
<div <div
class="c90" class="c92"
> >
<div <div
class="c91" class="c93"
> >
<span <span
class="c92" class="c94"
> >
App App
</span> </span>
<a <a
class="1 c93 c94" class="1 c95 c96"
href="#/swap" href="#/swap"
> >
Swap Swap
</a> </a>
<a <a
class="1 c93 c94" class="1 c95 c96"
href="#/tokens" href="#/tokens"
> >
Tokens Tokens
</a> </a>
<a <a
class="1 c93 c94" class="1 c95 c96"
href="#/nfts" href="#/nfts"
> >
NFTs NFTs
</a> </a>
<a <a
class="1 c93 c94" class="1 c95 c96"
href="#/pools" href="#/pools"
> >
Pools Pools
</a> </a>
</div> </div>
<div <div
class="c91" class="c93"
> >
<span <span
class="c92" class="c94"
> >
Protocol Protocol
</span> </span>
<a <a
class="c95 0 c96" class="c97 0 c98"
href="https://uniswap.org/community" href="https://uniswap.org/community"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -4897,7 +5003,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4897,7 +5003,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Community Community
</a> </a>
<a <a
class="c95 0 c96" class="c97 0 c98"
href="https://uniswap.org/governance" href="https://uniswap.org/governance"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -4905,7 +5011,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4905,7 +5011,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Governance Governance
</a> </a>
<a <a
class="c95 0 c96" class="c97 0 c98"
href="https://uniswap.org/developers" href="https://uniswap.org/developers"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -4914,15 +5020,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4914,15 +5020,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c91" class="c93"
> >
<span <span
class="c92" class="c94"
> >
Company Company
</span> </span>
<a <a
class="c95 0 c96" class="c97 0 c98"
href="https://boards.greenhouse.io/uniswaplabs" href="https://boards.greenhouse.io/uniswaplabs"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -4930,7 +5036,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4930,7 +5036,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Careers Careers
</a> </a>
<a <a
class="c95 0 c96" class="c97 0 c98"
href="https://uniswap.org/blog" href="https://uniswap.org/blog"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -4939,15 +5045,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4939,15 +5045,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<div <div
class="c91" class="c93"
> >
<span <span
class="c92" class="c94"
> >
Get Help Get Help
</span> </span>
<a <a
class="c95 0 c96" class="c97 0 c98"
href="https://support.uniswap.org/hc/en-us/requests/new" href="https://support.uniswap.org/hc/en-us/requests/new"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -4955,7 +5061,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4955,7 +5061,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Contact Us Contact Us
</a> </a>
<a <a
class="c95 0 c96" class="c97 0 c98"
href="https://support.uniswap.org/hc/en-us" href="https://support.uniswap.org/hc/en-us"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
...@@ -4965,50 +5071,50 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -4965,50 +5071,50 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</div> </div>
</div> </div>
<div <div
class="c81 c97" class="c83 c99"
> >
<img <img
alt="Uniswap Logo" alt="Uniswap Logo"
class="c83" class="c85"
src="unicornEmbossLight.png" src="unicornEmbossLight.png"
/> />
<div <div
class="c84" class="c86"
> >
<a <a
class="c85" class="c87"
href="https://discord.gg/FCfyBSbCU5" href="https://discord.gg/FCfyBSbCU5"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c86" class="c88"
size="32" size="32"
> >
discord.svg discord.svg
</svg> </svg>
</a> </a>
<a <a
class="c85" class="c87"
href="https://twitter.com/uniswap" href="https://twitter.com/uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c87" class="c89"
size="32" size="32"
> >
twitter-safe.svg twitter-safe.svg
</svg> </svg>
</a> </a>
<a <a
class="c85" class="c87"
href="https://github.com/Uniswap" href="https://github.com/Uniswap"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
> >
<svg <svg
class="c88" class="c90"
size="32" size="32"
> >
github.svg github.svg
...@@ -5016,7 +5122,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` ...@@ -5016,7 +5122,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
</a> </a>
</div> </div>
<span <span
class="2 c89" class="2 c91"
> >
© ©
2023 2023
......
src/pages/Swap/index.tsx
View file @ 1ffb9421
...@@ -74,14 +74,15 @@ export const ArrowContainer = styled.div` ...@@ -74,14 +74,15 @@ export const ArrowContainer = styled.div`
` `
const SwapSection = styled.div` const SwapSection = styled.div`
position: relative;
background-color: ${({ theme }) => theme.backgroundModule}; background-color: ${({ theme }) => theme.backgroundModule};
border-radius: 12px; border-radius: 16px;
padding: 16px;
color: ${({ theme }) => theme.textSecondary}; color: ${({ theme }) => theme.textSecondary};
font-size: 14px; font-size: 14px;
line-height: 20px;
font-weight: 500; font-weight: 500;
height: 120px;
line-height: 20px;
padding: 16px;
position: relative;
&:before { &:before {
box-sizing: border-box; box-sizing: border-box;
...@@ -585,9 +586,7 @@ export function Swap({ ...@@ -585,9 +586,7 @@ export function Swap({
<SwapSection> <SwapSection>
<Trace section={InterfaceSectionName.CURRENCY_INPUT_PANEL}> <Trace section={InterfaceSectionName.CURRENCY_INPUT_PANEL}>
<SwapCurrencyInputPanel <SwapCurrencyInputPanel
label={ label={<Trans>You pay</Trans>}
independentField === Field.OUTPUT && !showWrap ? <Trans>From (at most)</Trans> : <Trans>From</Trans>
}
disabled={disableTokenInputs} disabled={disableTokenInputs}
value={formattedAmounts[Field.INPUT]} value={formattedAmounts[Field.INPUT]}
showMaxButton={showMaxButton} showMaxButton={showMaxButton}
...@@ -616,10 +615,7 @@ export function Swap({ ...@@ -616,10 +615,7 @@ export function Swap({
}} }}
color={theme.textPrimary} color={theme.textPrimary}
> >
<ArrowDown <ArrowDown size="16" color={theme.textPrimary} />
size="16"
color={currencies[Field.INPUT] && currencies[Field.OUTPUT] ? theme.textPrimary : theme.textTertiary}
/>
</ArrowContainer> </ArrowContainer>
</TraceEvent> </TraceEvent>
</ArrowWrapper> </ArrowWrapper>
...@@ -632,7 +628,7 @@ export function Swap({ ...@@ -632,7 +628,7 @@ export function Swap({
value={formattedAmounts[Field.OUTPUT]} value={formattedAmounts[Field.OUTPUT]}
disabled={disableTokenInputs} disabled={disableTokenInputs}
onUserInput={handleTypeOutput} onUserInput={handleTypeOutput}
label={independentField === Field.INPUT && !showWrap ? <Trans>To (at least)</Trans> : <Trans>To</Trans>} label={<Trans>You receive</Trans>}
showMaxButton={false} showMaxButton={false}
hideBalance={false} hideBalance={false}
fiatValue={showFiatValueOutput ? fiatValueOutput : undefined} fiatValue={showFiatValueOutput ? fiatValueOutput : undefined}
...@@ -671,13 +667,13 @@ export function Swap({ ...@@ -671,13 +667,13 @@ export function Swap({
{showPriceImpactWarning && <PriceImpactWarning priceImpact={largerPriceImpact} />} {showPriceImpactWarning && <PriceImpactWarning priceImpact={largerPriceImpact} />}
<div> <div>
{swapIsUnsupported ? ( {swapIsUnsupported ? (
<ButtonPrimary disabled={true}> <ButtonPrimary $borderRadius="16px" disabled={true}>
<ThemedText.DeprecatedMain mb="4px"> <ThemedText.DeprecatedMain mb="4px">
<Trans>Unsupported Asset</Trans> <Trans>Unsupported Asset</Trans>
</ThemedText.DeprecatedMain> </ThemedText.DeprecatedMain>
</ButtonPrimary> </ButtonPrimary>
) : switchingChain ? ( ) : switchingChain ? (
<ButtonPrimary disabled={true}> <ButtonPrimary $borderRadius="16px" disabled={true}>
<Trans>Connecting to {getChainInfo(switchingChain)?.label}</Trans> <Trans>Connecting to {getChainInfo(switchingChain)?.label}</Trans>
</ButtonPrimary> </ButtonPrimary>
) : !account ? ( ) : !account ? (
...@@ -687,12 +683,13 @@ export function Swap({ ...@@ -687,12 +683,13 @@ export function Swap({
properties={{ received_swap_quote: getIsValidSwapQuote(trade, tradeState, swapInputError) }} properties={{ received_swap_quote: getIsValidSwapQuote(trade, tradeState, swapInputError) }}
element={InterfaceElementName.CONNECT_WALLET_BUTTON} element={InterfaceElementName.CONNECT_WALLET_BUTTON}
> >
<ButtonLight onClick={toggleWalletDrawer} fontWeight={600}> <ButtonLight onClick={toggleWalletDrawer} fontWeight={600} $borderRadius="16px">
<Trans>Connect Wallet</Trans> <Trans>Connect Wallet</Trans>
</ButtonLight> </ButtonLight>
</TraceEvent> </TraceEvent>
) : chainId && chainId !== connectedChainId ? ( ) : chainId && chainId !== connectedChainId ? (
<ButtonPrimary <ButtonPrimary
$borderRadius="16px"
onClick={async () => { onClick={async () => {
try { try {
await switchChain(connector, chainId) await switchChain(connector, chainId)
...@@ -710,6 +707,7 @@ export function Swap({ ...@@ -710,6 +707,7 @@ export function Swap({
</ButtonPrimary> </ButtonPrimary>
) : showWrap ? ( ) : showWrap ? (
<ButtonPrimary <ButtonPrimary
$borderRadius="16px"
disabled={Boolean(wrapInputError)} disabled={Boolean(wrapInputError)}
onClick={handleOnWrap} onClick={handleOnWrap}
fontWeight={600} fontWeight={600}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment