diff --git a/src/layouts/App.tsx b/src/layouts/App.tsx index d70b893a..512e2127 100644 --- a/src/layouts/App.tsx +++ b/src/layouts/App.tsx @@ -11,6 +11,55 @@ import { QueryClient, QueryClientProvider } from "react-query" import styled from "styled-components" import usePairs from "rest/usePairs" import useMigration from "hooks/useMigration" +import Modal from "components/Modal" + +const ModalContent = styled.div` + width: 100%; + max-width: calc(100vw - 32px); + margin: 0 auto; + border-radius: 20px; + box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.35); + background-color: #fff; + padding: 30px 0px; + color: #5c5c5c; + & > div { + position: relative; + width: 100%; + height: auto; + max-height: 80vh; + overflow-y: auto; + padding: 0 30px; + + font-size: 14px; + font-weight: normal; + font-stretch: normal; + font-style: normal; + line-height: 1.71; + letter-spacing: normal; + text-align: center; + color: #5c5c5c; + } + + @media screen and (max-width: ${({ theme }) => theme.breakpoint}) { + padding: 30px 0px; + & > div { + padding: 0 16px; + } + } +` + +const ModalTitle = styled.div` + display: block; + font-size: 20px; + font-weight: bold; + font-stretch: normal; + font-style: normal; + line-height: 1.35; + letter-spacing: normal; + text-align: center; + color: #0222ba; + margin-bottom: 30px; +` const queryClient = new QueryClient({ defaultOptions: { @@ -84,6 +133,31 @@ const App = () => { )}