feat: Initial landing page redesign updates (#5456)
* Initial landing page redesign updates * export * unnecessary brackets * unused component * remove state for the overlay * remove more show landing logic * only show when on / * gated * pointer events fix * import z-index * get started -> continue * rm text-fill-color * no fill color * unused icon * dont add route * css fixes
This commit is contained in:
parent
6480b947ef
commit
50f6401a8a
@ -211,6 +211,19 @@ export const ButtonEmpty = styled(BaseButton)`
|
||||
}
|
||||
`
|
||||
|
||||
export const ButtonCTA = styled(BaseButton)<{ redesignFlag?: boolean }>`
|
||||
background: linear-gradient(10deg, rgba(255, 0, 199, 1) 0%, rgba(255, 159, 251, 1) 100%);
|
||||
width: fit-content;
|
||||
border-radius: 24px;
|
||||
border: none;
|
||||
padding: 16px 77.5px;
|
||||
margin-left: 12px;
|
||||
margin-bottom: 12px;
|
||||
color: ${({ theme }) => theme.white};
|
||||
&:hover {
|
||||
opacity: 75%;
|
||||
}
|
||||
`
|
||||
export const ButtonText = styled(BaseButton)`
|
||||
padding: 0;
|
||||
width: fit-content;
|
||||
|
@ -7,7 +7,7 @@ import { Box } from 'nft/components/Box'
|
||||
import { Row } from 'nft/components/Flex'
|
||||
import { UniIcon } from 'nft/components/icons'
|
||||
import { ReactNode } from 'react'
|
||||
import { NavLink, NavLinkProps, useLocation } from 'react-router-dom'
|
||||
import { NavLink, NavLinkProps, useLocation, useNavigate } from 'react-router-dom'
|
||||
import styled from 'styled-components/macro'
|
||||
|
||||
import { Bag } from './Bag'
|
||||
@ -87,14 +87,22 @@ const PageTabs = () => {
|
||||
|
||||
const Navbar = () => {
|
||||
const isNftPage = useIsNftPage()
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className={styles.nav}>
|
||||
<Box display="flex" height="full" flexWrap="nowrap" alignItems="stretch">
|
||||
<Box className={styles.leftSideContainer}>
|
||||
<Box as="a" href="#/swap" className={styles.logoContainer}>
|
||||
<UniIcon width="48" height="48" className={styles.logo} />
|
||||
<Box className={styles.logoContainer}>
|
||||
<UniIcon
|
||||
width="48"
|
||||
height="48"
|
||||
className={styles.logo}
|
||||
onClick={() => {
|
||||
navigate('/')
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
{!isNftPage && (
|
||||
<Box display={{ sm: 'flex', lg: 'none' }}>
|
||||
|
@ -12,6 +12,9 @@ export const nav = style([
|
||||
zIndex: '2',
|
||||
background: 'backgroundFloating',
|
||||
}),
|
||||
{
|
||||
backdropFilter: 'blur(24px)',
|
||||
},
|
||||
])
|
||||
|
||||
export const logoContainer = style([
|
||||
@ -19,6 +22,7 @@ export const logoContainer = style([
|
||||
display: 'flex',
|
||||
marginRight: { sm: '12', xxl: '20' },
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
}),
|
||||
])
|
||||
|
||||
|
@ -23,13 +23,19 @@ export const PageWrapper = styled.div`
|
||||
`
|
||||
|
||||
// Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility.
|
||||
export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string }>`
|
||||
export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string; open: boolean }>`
|
||||
position: relative;
|
||||
background: ${({ theme }) => theme.backgroundSurface};
|
||||
border-radius: 16px;
|
||||
border: 1px solid ${({ theme }) => theme.backgroundOutline};
|
||||
padding: 8px;
|
||||
z-index: ${Z_INDEX.deprecated_content};
|
||||
cursor: ${({ open }) => (open ? 'pointer' : 'suto')};
|
||||
transition: transform 250ms ease;
|
||||
&:hover {
|
||||
border: 1px solid ${({ theme, open }) => (open ? theme.accentAction : theme.backgroundOutline)};
|
||||
transform: ${({ open }) => (open ? `translateY(-4px)` : `none`)};
|
||||
}
|
||||
`
|
||||
|
||||
export const ArrowWrapper = styled.div<{ clickable: boolean }>`
|
||||
|
185
src/pages/About.tsx
Normal file
185
src/pages/About.tsx
Normal file
@ -0,0 +1,185 @@
|
||||
import { Box } from 'nft/components/Box'
|
||||
import { DiscordIconMenu, GithubIconMenu, TwitterIconMenu } from 'nft/components/icons'
|
||||
import { ReactNode } from 'react'
|
||||
import { BookOpen, Globe, Heart, HelpCircle, Terminal, Twitter } from 'react-feather'
|
||||
import { useIsDarkMode } from 'state/user/hooks'
|
||||
import styled, { useTheme } from 'styled-components/macro'
|
||||
import { BREAKPOINTS } from 'theme'
|
||||
|
||||
const MOBILE_BREAKPOINT = BREAKPOINTS.md
|
||||
|
||||
const IconRow = styled.span`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
`
|
||||
|
||||
const SMALL_CARD_ICON_SIZE = 32
|
||||
|
||||
const Icon = ({ href, children }: { href?: string; children: ReactNode }) => {
|
||||
return (
|
||||
<Box
|
||||
as={href ? 'a' : 'div'}
|
||||
href={href ?? undefined}
|
||||
target={href ? '_blank' : undefined}
|
||||
rel={href ? 'noopener noreferrer' : undefined}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
color="textPrimary"
|
||||
background="none"
|
||||
border="none"
|
||||
justifyContent="center"
|
||||
textAlign="center"
|
||||
marginRight="12"
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
const PageWrapper = styled.span<{ isDarkMode: boolean }>`
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`
|
||||
|
||||
const TitleText = styled.h1<{ isDarkMode: boolean }>`
|
||||
color: transparent;
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0px;
|
||||
background: ${({ isDarkMode }) =>
|
||||
isDarkMode
|
||||
? 'linear-gradient(20deg, rgba(255, 244, 207, 1) 10%, rgba(255, 87, 218, 1) 100%)'
|
||||
: 'linear-gradient(10deg, rgba(255,79,184,1) 0%, rgba(255,159,251,1) 100%)'};
|
||||
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
|
||||
@media screen and (min-width: ${MOBILE_BREAKPOINT}px) {
|
||||
font-size: 72px;
|
||||
}
|
||||
`
|
||||
|
||||
const Body = styled.p`
|
||||
color: ${({ theme }) => theme.textPrimary};
|
||||
font-size: 18px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
`
|
||||
|
||||
const ContentWrapper = styled.span`
|
||||
max-width: 960px;
|
||||
pointer-events: all;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 8rem 1rem 1rem 1rem;
|
||||
gap: 24px;
|
||||
|
||||
@media screen and (min-width: ${MOBILE_BREAKPOINT}px) {
|
||||
padding: 8rem 5rem 5rem 5rem;
|
||||
gap: 56px;
|
||||
}
|
||||
`
|
||||
|
||||
const SmallCardContainer = styled.div`
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@media screen and (min-width: ${BREAKPOINTS.sm}px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@media screen and (min-width: ${BREAKPOINTS.lg}px) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
`
|
||||
|
||||
const SmallCard = styled.a`
|
||||
background-color: #0e111a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
padding: 32px;
|
||||
min-height: 220px;
|
||||
font-weight: light;
|
||||
border-radius: 12px;
|
||||
border: 1px solid ${({ theme }) => theme.backgroundOutline};
|
||||
font-size: 32px;
|
||||
transition: 200ms ease all;
|
||||
|
||||
&:hover {
|
||||
transition: 200ms ease background-color;
|
||||
background-color: ${({ theme }) => theme.backgroundModule};
|
||||
}
|
||||
`
|
||||
|
||||
export default function About() {
|
||||
const isDarkMode = useIsDarkMode()
|
||||
const theme = useTheme()
|
||||
|
||||
return (
|
||||
<PageWrapper isDarkMode={isDarkMode}>
|
||||
<ContentWrapper>
|
||||
<TitleText isDarkMode={isDarkMode}>
|
||||
Our mission: <br />
|
||||
Unlock universal ownership & exchange
|
||||
</TitleText>
|
||||
<Body>
|
||||
Uniswap Labs is building the future of decentralized finance by harnessing the power of the Uniswap Protocol.
|
||||
</Body>
|
||||
|
||||
<SmallCardContainer>
|
||||
<SmallCard href="https://uniswap.org" target="_blank" rel="noopener noreferrer">
|
||||
<Globe size={SMALL_CARD_ICON_SIZE} strokeWidth={1} color={theme.textSecondary} />
|
||||
Uniswap Protocol
|
||||
</SmallCard>
|
||||
<SmallCard href="https://uniswap.org/blog" target="_blank" rel="noopener noreferrer">
|
||||
<BookOpen size={SMALL_CARD_ICON_SIZE} strokeWidth={1} color={theme.textSecondary} />
|
||||
Blog
|
||||
</SmallCard>
|
||||
<SmallCard href="https://boards.greenhouse.io/uniswaplabs" target="_blank" rel="noopener noreferrer">
|
||||
<Heart size={SMALL_CARD_ICON_SIZE} strokeWidth={1} color={theme.textSecondary} />
|
||||
Careers
|
||||
</SmallCard>
|
||||
<SmallCard href="https://support.uniswap.org/" target="_blank" rel="noopener noreferrer">
|
||||
<HelpCircle size={SMALL_CARD_ICON_SIZE} strokeWidth={1} color={theme.textSecondary} />
|
||||
Support
|
||||
</SmallCard>
|
||||
<SmallCard href="https://twitter.com/Uniswap" target="_blank" rel="noopener noreferrer">
|
||||
<Twitter size={SMALL_CARD_ICON_SIZE} strokeWidth={1} color={theme.textSecondary} />
|
||||
Twitter
|
||||
</SmallCard>
|
||||
<SmallCard href="https://uniswap.org/developers" target="_blank" rel="noopener noreferrer">
|
||||
<Terminal size={SMALL_CARD_ICON_SIZE} strokeWidth={1} color={theme.textSecondary} />
|
||||
Developers
|
||||
</SmallCard>
|
||||
</SmallCardContainer>
|
||||
|
||||
<span>
|
||||
<small>
|
||||
Media inquires for Uniswap Labs - Contact <a href="mailto:media@uniswap.org">media@uniswap.org</a>
|
||||
</small>
|
||||
</span>
|
||||
<IconRow>
|
||||
<Icon href="https://discord.com/invite/FCfyBSbCU5">
|
||||
<DiscordIconMenu width={24} height={24} color={theme.textSecondary} />
|
||||
</Icon>
|
||||
<Icon href="https://twitter.com/Uniswap">
|
||||
<TwitterIconMenu width={24} height={24} color={theme.textSecondary} />
|
||||
</Icon>
|
||||
<Icon href="https://github.com/Uniswap">
|
||||
<GithubIconMenu width={24} height={24} color={theme.textSecondary} />
|
||||
</Icon>
|
||||
</IconRow>
|
||||
</ContentWrapper>
|
||||
</PageWrapper>
|
||||
)
|
||||
}
|
@ -3,6 +3,7 @@ import { CustomUserProperties, EventName, getBrowser, PageName } from '@uniswap/
|
||||
import Loader from 'components/Loader'
|
||||
import TopLevelModals from 'components/TopLevelModals'
|
||||
import { useFeatureFlagsIsLoaded } from 'featureFlags'
|
||||
import { LandingPageVariant, useLandingPageFlag } from 'featureFlags/flags/landingPage'
|
||||
import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
|
||||
import { CollectionPageSkeleton } from 'nft/components/collection/CollectionPageSkeleton'
|
||||
import { AssetDetailsLoading } from 'nft/components/details/AssetDetailsLoading'
|
||||
@ -25,11 +26,13 @@ import Polling from '../components/Polling'
|
||||
import Popups from '../components/Popups'
|
||||
import { useIsExpertMode } from '../state/user/hooks'
|
||||
import DarkModeQueryParamReader from '../theme/components/DarkModeQueryParamReader'
|
||||
import About from './About'
|
||||
import AddLiquidity from './AddLiquidity'
|
||||
import { RedirectDuplicateTokenIds } from './AddLiquidity/redirects'
|
||||
import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
|
||||
import Earn from './Earn'
|
||||
import Manage from './Earn/Manage'
|
||||
import Landing from './Landing'
|
||||
import MigrateV2 from './MigrateV2'
|
||||
import MigrateV2Pair from './MigrateV2/MigrateV2Pair'
|
||||
import Pool from './Pool'
|
||||
@ -178,6 +181,8 @@ export default function App() {
|
||||
|
||||
const isHeaderTransparent = !scrolledState && !isBagExpanded
|
||||
|
||||
const landingPageFlag = useLandingPageFlag()
|
||||
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<DarkModeQueryParamReader />
|
||||
@ -191,9 +196,11 @@ export default function App() {
|
||||
<Popups />
|
||||
<Polling />
|
||||
<TopLevelModals />
|
||||
<Landing />
|
||||
<Suspense fallback={<Loader />}>
|
||||
{isLoaded ? (
|
||||
<Routes>
|
||||
{landingPageFlag === LandingPageVariant.Enabled && <Route path="/" element={<Swap />} />}
|
||||
<Route path="tokens" element={<Tokens />}>
|
||||
<Route path=":chainName" />
|
||||
</Route>
|
||||
@ -243,6 +250,8 @@ export default function App() {
|
||||
<Route path="migrate/v2" element={<MigrateV2 />} />
|
||||
<Route path="migrate/v2/:address" element={<MigrateV2Pair />} />
|
||||
|
||||
<Route path="about" element={<About />} />
|
||||
|
||||
<Route path="*" element={<RedirectPathToSwapOnly />} />
|
||||
|
||||
<Route
|
||||
|
170
src/pages/Landing.tsx
Normal file
170
src/pages/Landing.tsx
Normal file
File diff suppressed because one or more lines are too long
@ -12,6 +12,7 @@ import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter
|
||||
import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
|
||||
import { MouseoverTooltip } from 'components/Tooltip'
|
||||
import { isSupportedChain } from 'constants/chains'
|
||||
import { LandingPageVariant, useLandingPageFlag } from 'featureFlags/flags/landingPage'
|
||||
import { useSwapCallback } from 'hooks/useSwapCallback'
|
||||
import useTransactionDeadline from 'hooks/useTransactionDeadline'
|
||||
import JSBI from 'jsbi'
|
||||
@ -19,7 +20,7 @@ import { formatSwapQuoteReceivedEventProperties } from 'lib/utils/analytics'
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { ReactNode } from 'react'
|
||||
import { ArrowDown, CheckCircle, HelpCircle } from 'react-feather'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
import { Text } from 'rebass'
|
||||
import { useToggleWalletModal } from 'state/application/hooks'
|
||||
import { InterfaceTrade } from 'state/routing/types'
|
||||
@ -495,6 +496,11 @@ export default function Swap() {
|
||||
const showDetailsDropdown = Boolean(
|
||||
!showWrap && userHasSpecifiedInputOutput && (trade || routeIsLoading || routeIsSyncing)
|
||||
)
|
||||
|
||||
const location = useLocation()
|
||||
|
||||
const landingPageFlag = useLandingPageFlag()
|
||||
|
||||
return (
|
||||
<Trace page={PageName.SWAP_PAGE} shouldLogImpression>
|
||||
<>
|
||||
@ -507,7 +513,11 @@ export default function Swap() {
|
||||
showCancel={true}
|
||||
/>
|
||||
<PageWrapper>
|
||||
<SwapWrapper id="swap-page">
|
||||
<SwapWrapper
|
||||
onClick={() => landingPageFlag === LandingPageVariant.Enabled && navigate('/swap')}
|
||||
open={landingPageFlag === LandingPageVariant.Enabled && location.pathname === '/'}
|
||||
id="swap-page"
|
||||
>
|
||||
<SwapHeader allowedSlippage={allowedSlippage} />
|
||||
<ConfirmSwapModal
|
||||
isOpen={showConfirm}
|
||||
|
@ -17,7 +17,7 @@ export const MEDIA_WIDTHS = {
|
||||
deprecated_upToLarge: 1280,
|
||||
}
|
||||
|
||||
const BREAKPOINTS = {
|
||||
export const BREAKPOINTS = {
|
||||
xs: 396,
|
||||
sm: 640,
|
||||
md: 768,
|
||||
|
Loading…
Reference in New Issue
Block a user