Ended Graphic Feats

package.json

@@ -6,8 +6,6 @@
         "@emailjs/browser": "^3.4.0",
         "@emotion/react": "^11.8.1",
         "@emotion/styled": "^11.8.1",
-        "@material-ui/core": "^4.11.0",
-        "@material-ui/icons": "^4.9.1",
         "@mui/icons-material": "^5.4.2",
         "@mui/material": "^5.4.3",
         "@mui/styles": "^5.4.2",
@@ -50,4 +48,4 @@
     "devDependencies": {
         "@types/leaflet": "^1.7.9"
     }
-}
+}

src/App.tsx

@@ -5,26 +5,29 @@ import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Privacy from "./onepirate/Privacy";
 import Contact from "./onepirate/Contact";
 import Terms from "./onepirate/Terms";
+import { ParallaxProvider } from 'react-scroll-parallax';
 
 function App() {
   return (
     <React.Fragment>
-      <Router>
-        <Switch>
-          <Route path="/contattami">
-            <Contact />
-          </Route>
-          <Route path="/privacy">
-            <Privacy />
-          </Route>
-          <Route path="/terms">
-            <Terms />
-          </Route>
-          <Route path="/">
-            <Home />
-          </Route>
-        </Switch>
-      </Router>
+      <ParallaxProvider>
+        <Router>
+          <Switch>
+            <Route path="/contattami">
+              <Contact />
+            </Route>
+            <Route path="/privacy">
+              <Privacy />
+            </Route>
+            <Route path="/terms">
+              <Terms />
+            </Route>
+            <Route path="/">
+              <Home />
+            </Route>
+          </Switch>
+        </Router>
+      </ParallaxProvider>
     </React.Fragment>
   );
 }

src/onepirate/Contact.tsx

@@ -1,22 +1,19 @@
-import withRoot from "./modules/withRoot";
-// --- Post bootstrap -----
-import React from "react";
+import * as React from "react";
 import Typography from "./modules/components/Typography";
 import AppFooter from "./modules/views/AppFooter";
 import AppAppBar from "./modules/views/AppAppBar";
 import AppForm from "./modules/views/AppForm";
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
-import Avatar from '@mui/material/Avatar';
-import Divider from '@mui/material/Divider';
-import { Call, EmailRounded } from "@material-ui/icons";
-
+import withRoot from "./modules/withRoot";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemAvatar from "@mui/material/ListItemAvatar";
+import Avatar from "@mui/material/Avatar";
+import { Call, EmailRounded } from "@mui/icons-material";
+import ListItemText from "@mui/material/ListItemText";
+import Divider from "@mui/material/Divider";
 
 function Contact() {
-
   return (
     <React.Fragment>
       <AppAppBar />
@@ -65,4 +62,3 @@ function Contact() {
 }
 
 export default withRoot(Contact);
-

src/onepirate/Home.tsx

@@ -1,13 +1,12 @@
-import withRoot from "./modules/withRoot";
-// --- Post bootstrap -----
-import React from "react";
+import * as React from "react";
 import ProductCategories from "./modules/views/ProductCategories";
 import ProductSmokingHero from "./modules/views/ProductSmokingHero";
 import AppFooter from "./modules/views/AppFooter";
 import ProductHero from "./modules/views/ProductHero";
 import ProductValues from "./modules/views/ProductValues";
 import ProductHowItWorks from "./modules/views/ProductHowItWorks";
 import ProductCTA from "./modules/views/ProductCTA";
+import withRoot from "./modules/withRoot";
 
 function Index() {
   return (

src/onepirate/Privacy.tsx

@@ -1,12 +1,11 @@
-import withRoot from "./modules/withRoot";
-// --- Post bootstrap -----
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import Container from "@mui/material/Container";
 import Box from "@mui/material/Box";
 import Markdown from "./modules/components/Markdown";
 import Typography from "./modules/components/Typography";
 import AppAppBar from "./modules/views/AppAppBar";
 import AppFooter from "./modules/views/AppFooter";
+import withRoot from "./modules/withRoot";
 
 function Privacy() {
   const [markdown, setMarkdown] = useState("");
@@ -27,7 +26,7 @@ function Privacy() {
     <React.Fragment>
       <AppAppBar />
       <Container>
-        <Box mt={7} mb={12}>
+        <Box sx={{ mt: 7, mb: 12 }}>
           <Typography variant="h3" gutterBottom marked="center" align="center">
             Privacy
           </Typography>

src/onepirate/Terms.tsx

@@ -1,12 +1,11 @@
-import withRoot from "./modules/withRoot";
-// --- Post bootstrap -----
 import React, { useState, useEffect } from "react";
 import Container from "@mui/material/Container";
 import Box from "@mui/material/Box";
 import Markdown from "./modules/components/Markdown";
 import Typography from "./modules/components/Typography";
 import AppAppBar from "./modules/views/AppAppBar";
 import AppFooter from "./modules/views/AppFooter";
+import withRoot from "./modules/withRoot";
 
 function Terms() {
   const [markdown, setMarkdown] = useState("");
@@ -27,7 +26,7 @@ function Terms() {
     <React.Fragment>
       <AppAppBar />
       <Container>
-        <Box mt={7} mb={12}>
+        <Box sx={{ mt: 7, mb: 12 }}>
           <Typography variant="h3" gutterBottom marked="center" align="center">
             Terms
           </Typography>

src/onepirate/modules/components/AppBar.tsx

@@ -1,17 +1,8 @@
-import React from "react";
-import { Theme } from "@mui/material/styles";
-import { WithStyles } from '@mui/styles';
-import withStyles from '@mui/styles/withStyles';
+import * as React from "react";
 import MuiAppBar, { AppBarProps } from "@mui/material/AppBar";
 
-const styles = (theme: Theme) => ({
-  root: {
-    color: theme.palette.common.white,
-  },
-});
-
-function AppBar(props: WithStyles<typeof styles> & AppBarProps) {
+function AppBar(props: AppBarProps) {
   return <MuiAppBar elevation={0} position="fixed" {...props} />;
 }
 
-export default withStyles(styles)(AppBar);
+export default AppBar;

src/onepirate/modules/components/Button.tsx

@@ -1,37 +1,32 @@
-import { Theme } from "@mui/material/styles";
-import { WithStyles } from '@mui/styles';
-import withStyles from '@mui/styles/withStyles';
-import createStyles from '@mui/styles/createStyles';
+import * as React from "react";
+import { experimentalStyled as styled } from "@mui/material/styles";
 import MuiButton, { ButtonProps } from "@mui/material/Button";
-import React from "react";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    root: {
-      borderRadius: 0,
-      fontWeight: theme.typography.fontWeightMedium,
-      fontFamily: theme.typography.h1.fontFamily,
-      padding: theme.spacing(2, 4),
-      fontSize: theme.typography.pxToRem(14),
-      boxShadow: "none",
-      "&:active, &:focus": {
-        boxShadow: "none",
-      },
-    },
-    sizeSmall: {
-      padding: theme.spacing(1, 3),
-      fontSize: theme.typography.pxToRem(13),
-    },
-    sizeLarge: {
-      padding: theme.spacing(2, 5),
-      fontSize: theme.typography.pxToRem(16),
-    },
-  });
+const ButtonRoot = styled(MuiButton)(({ theme, size }) => ({
+  borderRadius: 0,
+  fontWeight: theme.typography.fontWeightMedium,
+  fontFamily: theme.typography.h1.fontFamily,
+  padding: theme.spacing(2, 4),
+  fontSize: theme.typography.pxToRem(14),
+  boxShadow: "none",
+  "&:active, &:focus": {
+    boxShadow: "none",
+  },
+  ...(size === "small" && {
+    padding: theme.spacing(1, 3),
+    fontSize: theme.typography.pxToRem(13),
+  }),
+  ...(size === "large" && {
+    padding: theme.spacing(2, 5),
+    fontSize: theme.typography.pxToRem(16),
+  }),
+}));
 
+// See https://mui.com/guides/typescript/#usage-of-component-prop for why the types uses `C`.
 function Button<C extends React.ElementType>(
-  props: ButtonProps<C, { component?: C }> & WithStyles<typeof styles>
+  props: ButtonProps<C, { component?: C }>
 ) {
-  return <MuiButton {...props} />;
+  return <ButtonRoot {...props} />;
 }
 
-export default withStyles(styles)(Button);
+export default Button;

src/onepirate/modules/components/Markdown.tsx

@@ -1,49 +1,58 @@
-import React from "react";
+import * as React from "react";
 import ReactMarkdown from "markdown-to-jsx";
 import { Theme } from "@mui/material/styles";
-import { WithStyles } from '@mui/styles';
-import createStyles from '@mui/styles/createStyles';
-import withStyles from '@mui/styles/withStyles';
-import Typography, { TypographyProps } from "@mui/material/Typography";
+import { withStyles, WithStyles } from "@mui/styles";
+import Typography from "@mui/material/Typography";
 import Link from "@mui/material/Link";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    listItem: {
-      marginTop: theme.spacing(1),
-    },
-  });
+const styles = (theme: Theme) => ({
+  listItem: {
+    marginTop: theme.spacing(1),
+  },
+});
 
 const options = {
   overrides: {
     h1: {
-      component: (props: TypographyProps) => (
-        <Typography gutterBottom variant="h4" {...props} />
-      ),
+      component: Typography,
+      props: {
+        gutterBottom: true,
+        variant: "h1",
+      },
     },
     h2: {
-      component: (props: TypographyProps) => (
-        <Typography gutterBottom variant="h6" {...props} />
-      ),
+      component: Typography,
+      props: { gutterBottom: true, variant: "h2" },
     },
     h3: {
-      component: (props: TypographyProps) => (
-        <Typography gutterBottom variant="subtitle1" {...props} />
-      ),
+      component: Typography,
+      props: { gutterBottom: true, variant: "subtitle1" },
     },
     h4: {
-      component: (props: TypographyProps) => {
-        return (
-          <Typography gutterBottom variant="caption" paragraph {...props} />
-        );
+      component: Typography,
+      props: {
+        gutterBottom: true,
+        variant: "caption",
+        paragraph: true,
       },
     },
+    h5: {
+      component: Typography,
+      props: { paragraph: true, variant: "h5" },
+    },
+    h6: {
+      component: Typography,
+      props: { paragraph: true, variant: "h6" },
+    }, 
     p: {
-      component: (props: TypographyProps) => (
-        <Typography paragraph {...props} />
-      ),
+      component: Typography,
+      props: { paragraph: true, variant: "h5" },
     },
     a: { component: Link },
+    span: { 
+      component: Typography,
+      props: { paragraph: true, variant: "h5" },
+    },
     li: {
       component: withStyles(styles)((props: WithStyles<typeof styles>) => {
         const { classes, ...other } = props;
@@ -57,8 +66,6 @@ const options = {
   },
 };
 
-function Markdown(props: any) {
+export default function Markdown(props: any) {
   return <ReactMarkdown options={options} {...props} />;
 }
-
-export default Markdown;