feat: not found page (#5708)

* chore: save

* save

* chore: finish

* chore: Fix link

* chore: remove div

* chore: tweaaks

* chore: tweaks

src/components/Button/index.tsx

@@ -79,6 +79,13 @@ export const ButtonPrimary = styled(BaseButton)`
   }
 `
 
+export const SmallButtonPrimary = styled(ButtonPrimary)`
+  width: auto;
+  font-size: 16px;
+  padding: 10px 16px;
+  border-radius: 12px;
+`
+
 export const ButtonLight = styled(BaseButton)`
   background-color: ${({ theme }) => theme.accentActionSoft};
   color: ${({ theme }) => theme.accentAction};

src/components/ErrorBoundary/index.tsx

 import { Trans } from '@lingui/macro'
 import * as Sentry from '@sentry/react'
-import { ButtonLight, ButtonPrimary } from 'components/Button'
+import { ButtonLight, SmallButtonPrimary } from 'components/Button'
 import { ChevronUpIcon } from 'nft/components/icons'
 import { useIsMobile } from 'nft/hooks'
 import React, { PropsWithChildren, useState } from 'react'
@@ -23,13 +23,6 @@ const BodyWrapper = styled.div<{ margin?: string }>`
   padding: 1rem;
 `
 
-const SmallButtonPrimary = styled(ButtonPrimary)`
-  width: auto;
-  font-size: 16px;
-  padding: 10px 16px;
-  border-radius: 12px;
-`
-
 const SmallButtonLight = styled(ButtonLight)`
   font-size: 16px;
   padding: 10px 16px;

src/pages/App.tsx

@@ -36,6 +36,7 @@ import Manage from './Earn/Manage'
 import Landing from './Landing'
 import MigrateV2 from './MigrateV2'
 import MigrateV2Pair from './MigrateV2/MigrateV2Pair'
+import NotFound from './NotFound'
 import Pool from './Pool'
 import { PositionPage } from './Pool/PositionPage'
 import PoolV2 from './Pool/v2'
@@ -68,6 +69,7 @@ const BodyWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
+  min-height: 100vh;
   padding: ${({ theme }) => theme.navHeight}px 0px 5rem 0px;
   align-items: center;
   flex: 1;
@@ -202,6 +204,7 @@ export default function App() {
             {isLoaded ? (
               <Routes>
                 <Route path="/" element={<Landing />} />
+
                 <Route path="tokens" element={<Tokens />}>
                   <Route path=":chainName" />
                 </Route>
@@ -253,8 +256,6 @@ export default function App() {
 
                 <Route path="about" element={<About />} />
 
-                <Route path="*" element={<RedirectPathToSwapOnly />} />
-
                 <Route
                   path="/nfts"
                   element={
@@ -296,6 +297,9 @@ export default function App() {
                     </Suspense>
                   }
                 />
+
+                <Route path="*" element={<Navigate to="/not-found" replace />} />
+                <Route path="/not-found" element={<NotFound />} />
               </Routes>
             ) : (
               <Loader />

src/pages/NotFound/index.tsx

+import { Trans } from '@lingui/macro'
+import { Trace } from '@uniswap/analytics'
+import { SmallButtonPrimary } from 'components/Button'
+import { useIsMobile } from 'nft/hooks'
+import { Link } from 'react-router-dom'
+import { useIsDarkMode } from 'state/user/hooks'
+import styled from 'styled-components/macro'
+import { ThemedText } from 'theme'
+
+import darkImage from '../../assets/images/404-page-dark.png'
+import lightImage from '../../assets/images/404-page-light.png'
+
+const Image = styled.img`
+  max-width: 510px;
+  width: 100%;
+  padding: 0 75px;
+`
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+const Header = styled(Container)`
+  gap: 30px;
+`
+
+const PageWrapper = styled(Container)`
+  flex: 1;
+  justify-content: center;
+  gap: 50px;
+
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
+    justify-content: space-between;
+    padding-top: 64px;
+  }
+`
+
+export default function NotFound() {
+  const isDarkMode = useIsDarkMode()
+  const isMobile = useIsMobile()
+
+  const Title = isMobile ? ThemedText.LargeHeader : ThemedText.Hero
+  const Paragraph = isMobile ? ThemedText.HeadlineMedium : ThemedText.HeadlineLarge
+
+  return (
+    <PageWrapper>
+      <Trace page="404-page" shouldLogImpression>
+        <Header>
+          <Container>
+            <Title>404</Title>
+            <Paragraph color="textSecondary">
+              <Trans>Page not found!</Trans>
+            </Paragraph>
+          </Container>
+          <Image src={isDarkMode ? darkImage : lightImage} alt="Liluni" />
+        </Header>
+        <SmallButtonPrimary as={Link} to="/">
+          <Trans>Oops, take me back to Swap</Trans>
+        </SmallButtonPrimary>
+      </Trace>
+    </PageWrapper>
+  )
+}

src/theme/components/text.tsx

@@ -31,12 +31,18 @@ export const ThemedText = {
   HeadlineSmall(props: TextProps) {
     return <TextWrapper fontWeight={600} fontSize={20} lineHeight="28px" color="textPrimary" {...props} />
   },
+  HeadlineMedium(props: TextProps) {
+    return <TextWrapper fontWeight={500} fontSize={28} color="textPrimary" {...props} />
+  },
   HeadlineLarge(props: TextProps) {
-    return <TextWrapper fontWeight={600} fontSize={36} lineHeight="44px" color="textPrimary" {...props} />
+    return <TextWrapper fontWeight={600} fontSize={36} lineHeight="36px" color="textPrimary" {...props} />
   },
   LargeHeader(props: TextProps) {
     return <TextWrapper fontWeight={400} fontSize={36} color="textPrimary" {...props} />
   },
+  Hero(props: TextProps) {
+    return <TextWrapper fontWeight={500} fontSize={48} color="textPrimary" {...props} />
+  },
   Link(props: TextProps) {
     return <TextWrapper fontWeight={600} fontSize={14} color="accentAction" {...props} />
   },

src/theme/index.tsx

@@ -91,7 +91,8 @@ function getSettings(darkMode: boolean) {
   }
 }
 
-function getTheme(darkMode: boolean) {
+// eslint-disable-next-line import/no-unused-modules -- used in styled.d.ts
+export function getTheme(darkMode: boolean) {
   return {
     darkMode,
     ...(darkMode ? darkTheme : lightTheme),