diff --git a/src/App.tsx b/src/App.tsx index 3bd3147..2ac65b1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,44 +16,116 @@ import Email from "./pages/Email"; import Thanks from "./pages/Thanks"; import Validator from "./pages/Validator"; import ValidatorSuccess from "./pages/ValidatorSuccess"; +import { createTheme, Box, ThemeProvider } from "@mui/material"; + +const darkTheme = createTheme({ + components: { + MuiAccordion: { + defaultProps: { + sx: { + border: "1px solid #48474F", + borderBottomRightRadius: 3, + borderBottomLeftRadius: 3, + }, + }, + }, + MuiButton: { + defaultProps: { + color: "primary", + sx: { + fontFamily: `DM Mono, monospace`, + fontWeight: 400, + }, + }, + }, + MuiLink: { + defaultProps: { + color: "text.primary", + fontSize: "14px", + }, + }, + MuiTypography: { + defaultProps: { + color: "text.primary", + fontWeight: 400, + }, + }, + MuiPaper: { + defaultProps: { + sx: { + backgroundImage: "none", + }, + }, + }, + }, + palette: { + mode: "dark", + primary: { + main: "#0000F4", + }, + secondary: { + main: "#A2A2FF", + }, + error: { + main: "#B20710", + }, + background: { + default: "#0F0F0F", + paper: "#18181A", + }, + text: { + primary: "#FBFBFB", + }, + info: { + main: "#FBFBFB", + }, + }, +}); function App() { return ( -
- - - } /> - } /> - } /> - } /> - } /> - }> - } /> - } - /> - } - /> - } - /> - } - /> - } - /> - - } /> - - + + +
+ + + } /> + } /> + } /> + } /> + } /> + }> + } + /> + } + /> + } /> + } + /> + } /> + } + /> + + } /> + + + + ); } diff --git a/src/components/Container.tsx b/src/components/Container.tsx new file mode 100644 index 0000000..76c737b --- /dev/null +++ b/src/components/Container.tsx @@ -0,0 +1,21 @@ +import { Box, BoxProps } from "@mui/material"; +import React, { PropsWithChildren } from "react"; + +export const Container: React.FC< + PropsWithChildren<{ boxProps?: BoxProps }> +> = ({ children, boxProps = {} }) => ( + + {children} + +); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index c1bd679..d92fdba 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,30 +1,88 @@ -import React from 'react'; -import { Link, useLocation } from 'react-router-dom'; +import React from "react"; +import { Link, useLocation } from "react-router-dom"; -import { AppBar, Toolbar, Avatar, Box, IconButton } from '@mui/material'; +import { + AppBar, + Toolbar, + SvgIcon, + Stack, + Divider, + Typography, +} from "@mui/material"; const Header: React.FC = () => { const location = useLocation(); return ( - + - - - - - Testnet Onboarding - - - + + + + + + + + + + + + + + + + + Testnet Onboarding + ); diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000..d3b1665 --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,28 @@ +import { Button, Typography } from "@mui/material"; +import React, { PropsWithChildren } from "react"; +import { Container } from "./Container"; +import { ArrowBack } from "@mui/icons-material"; +import { useNavigate } from "react-router-dom"; + +export const Layout: React.FC< + PropsWithChildren<{ title: string; backLinkTitle?: string }> +> = ({ children, title, backLinkTitle = "Home" }) => { + const navigate = useNavigate(); + + return ( + + + + {title} + + {children} + + ); +}; diff --git a/src/components/TermsAndConditionsBox.tsx b/src/components/TermsAndConditionsBox.tsx index ccc3a3c..6fa0433 100644 --- a/src/components/TermsAndConditionsBox.tsx +++ b/src/components/TermsAndConditionsBox.tsx @@ -1,43 +1,47 @@ -import React, { useState } from 'react'; -import { Document, Page, pdfjs } from 'react-pdf'; +import React, { useState } from "react"; +import { Document, Page, pdfjs } from "react-pdf"; -import { Typography } from '@mui/material'; +import { Typography } from "@mui/material"; // https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#copy-worker-to-public-directory -pdfjs.GlobalWorkerOptions.workerSrc = process.env.PUBLIC_URL + '/pdf.worker.min.mjs'; +pdfjs.GlobalWorkerOptions.workerSrc = + process.env.PUBLIC_URL + "/pdf.worker.min.mjs"; interface TermsAndConditionsBoxProps { height: string; onLoad?: () => void; } -const TermsAndConditionsBox = ({ height, onLoad }: TermsAndConditionsBoxProps ) => { +const TermsAndConditionsBox = ({ + height, + onLoad, +}: TermsAndConditionsBoxProps) => { const [numPages, setNumPages] = useState(); function onDocumentLoadSuccess({ numPages }: { numPages: number }): void { setNumPages(numPages); - if (onLoad){ + if (onLoad) { onLoad(); - }; + } } return ( <> - + Terms and Conditions
{Array.apply(null, Array(numPages)) diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index 9fbfd7a..45109de 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -1,9 +1,10 @@ -import React, { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; -import { Button, Box, Typography } from '@mui/material'; +import { Button, Box } from "@mui/material"; -import TermsAndConditionsBox from '../components/TermsAndConditionsBox'; +import TermsAndConditionsBox from "../components/TermsAndConditionsBox"; +import { Container } from "../components/Container"; const LandingPage = () => { const navigate = useNavigate(); @@ -11,43 +12,37 @@ const LandingPage = () => { const [isDisabled, setIsDisabled] = useState(true); const handleAccept = () => { - navigate('/verify-email'); + navigate("/verify-email"); }; return ( - <> - + { + setIsDisabled(false); }} - padding={5} - > - - Welcome to the LORO Testnet Onboarding App. The detailed instructions for completing this first step are found in the{' '} - LORO testnet repo. - Once your onboarding transaction has been submitted, await the completion of stage0. The genesis.json file and peer nodes will then be - published in the aforementioned repository for validators to begin stage1. Once enough validators are online and the Laconic chain is running, - those same validators can complete their service provider setup. Once service providers are live, app publishers can start deploying webapps to individual service providers. - - - {setIsDisabled(false);}} /> - + /> + - - + ); };