diff --git a/src/components/Disclaimer.tsx b/src/components/Disclaimer.tsx new file mode 100644 index 0000000..81d4764 --- /dev/null +++ b/src/components/Disclaimer.tsx @@ -0,0 +1,36 @@ +import { styled, Box, Typography } from '@mui/material'; + +import { DISCLAIMER_HEIGHT } from '~/utils'; + +export const Disclaimer = () => { + return ( + + + Disclaimer: This application is currently in beta. Please proceed at your own risk. Any funds lost through its + use are non-recoverable. + + + ); +}; + +export const Container = styled(Box)` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 1rem 1.6rem; + height: ${DISCLAIMER_HEIGHT}rem; + width: 100%; + margin: 0 auto; + background-color: white; + + h1 { + font-size: 1rem; + color: #121212; + font-weight: 500; + letter-spacing: 1; + @media (max-width: 720px) { + font-size: 0.8rem; + } + } +`; diff --git a/src/components/index.ts b/src/components/index.ts index d54caf8..0fe1f0b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1 +1,2 @@ export * from './Theme'; +export * from './Disclaimer'; diff --git a/src/containers/Landing/index.tsx b/src/containers/Landing/index.tsx index 6b217cf..7fe18b3 100644 --- a/src/containers/Landing/index.tsx +++ b/src/containers/Landing/index.tsx @@ -1,6 +1,6 @@ import { styled } from '@mui/material/styles'; -import { MAIN_HEIGHT } from '~/utils'; +import { DISCLAIMER_HEIGHT, SURROUND_HEIGHT } from '~/utils'; export const Landing = () => { return ( @@ -13,7 +13,7 @@ export const Landing = () => { const LandingContainer = styled('div')({ display: 'flex', flexDirection: 'column', - height: `calc(100vh - ${MAIN_HEIGHT}rem)`, + height: `calc(100vh - ${SURROUND_HEIGHT}rem - ${DISCLAIMER_HEIGHT}rem)`, padding: '0 8rem', alignItems: 'center', justifyContent: 'center', diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 07bb227..6cb77bf 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -24,7 +24,9 @@ export default function MyDocument(props: DocumentProps & DocumentHeadTagsProps) - + + {/* To prevent all search engines from indexing */} +
diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx index e3e15c0..dfa21d7 100644 --- a/src/pages/layout.tsx +++ b/src/pages/layout.tsx @@ -1,10 +1,14 @@ import { Box, CssBaseline, styled } from '@mui/material'; + +import { Disclaimer } from '~/components'; import { Footer, Header } from '~/containers'; export default function Layout({ children }: { children: React.ReactNode }) { return ( <> + +

This website requires JavaScript to function properly.

diff --git a/src/utils/Variables.ts b/src/utils/Variables.ts index f8caa97..b12b822 100644 --- a/src/utils/Variables.ts +++ b/src/utils/Variables.ts @@ -28,6 +28,7 @@ export const zIndex = { TOAST: 500, }; +export const DISCLAIMER_HEIGHT = 3; export const HEADER_HEIGHT = 8; // Header height in rem units export const FOOTER_HEIGHT = 8; // Footer height in rem units -export const MAIN_HEIGHT = HEADER_HEIGHT + FOOTER_HEIGHT; +export const SURROUND_HEIGHT = HEADER_HEIGHT + FOOTER_HEIGHT;