Bump Gatbsy to v3

package.json

@@ -13,38 +13,37 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.15",
-    "@fortawesome/free-brands-svg-icons": "^5.7.2",
-    "@fortawesome/free-solid-svg-icons": "^5.7.2",
-    "@fortawesome/react-fontawesome": "^0.1.4",
-    "@material-ui/core": "^3.9.2",
-    "@material-ui/icons": "^3.0.2",
-    "classnames": "^2.2.6",
-    "core-js": "^2.6.5",
-    "gatsby": "^2.1.24",
-    "gatsby-plugin-manifest": "^2.0.22",
-    "gatsby-plugin-material-ui": "1.2.5",
-    "gatsby-plugin-offline": "^2.0.24",
-    "gatsby-plugin-react-helmet": "^3.0.8",
-    "gatsby-plugin-resolve-src": "^2.0.0",
-    "gatsby-plugin-sass": "^2.0.10",
-    "history": "^4.7.2",
-    "node-sass": "^4.13.1",
-    "nouislider": "^13.1.1",
-    "react": "^16.8.4",
-    "react-datetime": "^2.16.3",
-    "react-dom": "^16.8.4",
-    "react-helmet": "^5.2.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
+    "@material-ui/core": "^4.12.1",
+    "@material-ui/icons": "^4.11.2",
+    "classnames": "^2.3.1",
+    "core-js": "^3.15.2",
+    "gatsby": "^3.9.1",
+    "gatsby-plugin-manifest": "^3.9.0",
+    "gatsby-plugin-material-ui": "3.0.1",
+    "gatsby-plugin-offline": "^4.9.0",
+    "gatsby-plugin-react-helmet": "^4.9.0",
+    "gatsby-plugin-resolve-src": "^2.1.0",
+    "gatsby-plugin-sass": "^4.9.0",
+    "history": "^5.0.0",
+    "nouislider": "^15.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
     "react-icon": "^1.0.0",
-    "react-icons": "^3.5.0",
-    "react-router-dom": "^4.3.1",
-    "react-slick": "^0.23.2",
-    "react-swipeable-views": "^0.13.1",
-    "typeface-roboto": "0.0.54",
-    "typeface-roboto-slab": "0.0.72"
+    "react-icons": "^4.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-slick": "^0.28.1",
+    "react-swipeable-views": "^0.14.0",
+    "sass": "^1.35.2",
+    "typeface-roboto": "1.1.13",
+    "typeface-roboto-slab": "1.1.13"
   },
   "devDependencies": {
-    "prettier": "^1.16.4"
+    "prettier": "^2.3.2"
   },
   "repository": {
     "type": "git",

src/assets/scss/core/variables/_bootstrap-material-design.scss

@@ -20,8 +20,8 @@ $mdb-input-font-size-base: 14px !default;
 $mdb-input-font-size-large: ceil(($font-size-base * 1.25)) !default; // ~20px
 $mdb-input-font-size-small: ceil(($font-size-base * 0.75)) !default; // ~12px
 
-$bmd-bmd-label-static-size-ratio: 75 / 100 !default;
-$bmd-help-size-ratio: 75 / 100 !default;
+$bmd-bmd-label-static-size-ratio: 0.75 !default;
+$bmd-help-size-ratio: 0.75 !default;
 
 $bmd-form-control-bg-repeat-y: no-repeat !default;
 $bmd-form-control-bg-position: center bottom, center calc(100% - 1px) !default;

src/assets/scss/core/variables/_variables.scss

@@ -3,6 +3,8 @@
 // Variables should follow the `$component-state-property-size` formula for
 // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
 
+@use "sass:math";
+
 //Font
 $fa-font-path: "core/fontawesome" !default;
 $fa-font-display: auto !default;
@@ -272,7 +274,7 @@ $h4-font-size: $font-size-base * 1.5 !default;
 $h5-font-size: $font-size-base * 1.25 !default;
 $h6-font-size: $font-size-base !default;
 
-$headings-margin-bottom: ($spacer / 2) !default;
+$headings-margin-bottom: math.div($spacer, 2) !default;
 $headings-font-family: inherit !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;
@@ -635,7 +637,7 @@ $nav-pills-link-active-bg: $component-active-bg !default;
 
 // Navbar
 
-$navbar-padding-y: ($spacer / 2) !default;
+$navbar-padding-y: math.div($spacer, 2) !default;
 $navbar-padding-x: $spacer !default;
 
 $navbar-nav-link-padding-x: 0.5rem !default;
@@ -646,7 +648,7 @@ $nav-link-height: (
   $font-size-base * $line-height-base + $nav-link-padding-y * 2
 ) !default;
 $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y: math.div(($nav-link-height - $navbar-brand-height), 2) !default;
 
 $navbar-toggler-padding-y: 0.25rem !default;
 $navbar-toggler-padding-x: 0.75rem !default;
@@ -724,7 +726,7 @@ $card-bg: $white !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 
-$card-group-margin: ($grid-gutter-width / 2) !default;
+$card-group-margin: math.div($grid-gutter-width, 2) !default;
 $card-deck-margin: $card-group-margin !default;
 
 $card-columns-count: 3 !default;

src/pages/404.js

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { Link } from "gatsby"
+
+// styles
+const pageStyles = {
+  color: "#232129",
+  padding: "96px",
+  fontFamily: "-apple-system, Roboto, sans-serif, serif",
+}
+const headingStyles = {
+  marginTop: 0,
+  marginBottom: 64,
+  maxWidth: 320,
+}
+
+const paragraphStyles = {
+  marginBottom: 48,
+}
+const codeStyles = {
+  color: "#8A6534",
+  padding: 4,
+  backgroundColor: "#FFF4DB",
+  fontSize: "1.25rem",
+  borderRadius: 4,
+}
+
+// markup
+const NotFoundPage = () => {
+  return (
+    <main style={pageStyles}>
+      <title>Not found</title>
+      <h1 style={headingStyles}>Page not found</h1>
+      <p style={paragraphStyles}>
+        Sorry{" "}
+        <span role="img" aria-label="Pensive emoji">
+          😔
+        </span>{" "}
+        we couldn’t find what you were looking for.
+        <br />
+        {process.env.NODE_ENV === "development" ? (
+          <>
+            <br />
+            Try creating a page in <code style={codeStyles}>src/pages/</code>.
+            <br />
+          </>
+        ) : null}
+        <br />
+        <Link to="/">Go home</Link>.
+      </p>
+    </main>
+  )
+}
+
+export default NotFoundPage

src/pages/Components/Components.jsx

@@ -7,7 +7,7 @@ import { Link } from "gatsby";
 import withStyles from "@material-ui/core/styles/withStyles";
 // @material-ui/icons
 // core components
-import Header from "components/Header/Header.jsx";
+  import Header from "components/Header/Header.jsx";
 import Footer from "components/Footer/Footer.jsx";
 import GridContainer from "components/Grid/GridContainer.jsx";
 import GridItem from "components/Grid/GridItem.jsx";
@@ -30,6 +30,8 @@ import SectionDownload from "./Sections/SectionDownload.jsx";
 
 import componentsStyle from "assets/jss/material-kit-react/views/components.jsx";
 
+import bg4 from "assets/img/bg4.jpg";
+
 class Components extends React.Component {
   render() {
     const { classes, ...rest } = this.props;
@@ -46,7 +48,7 @@ class Components extends React.Component {
           }}
           {...rest}
         />
-        <Parallax image={require("assets/img/bg4.jpg")}>
+        <Parallax image={bg4}>
           <div className={classes.container}>
             <GridContainer>
               <GridItem>

src/pages/Components/Sections/SectionJavascript.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 // react plugin for creating date-time-picker
-import Datetime from "react-datetime";
+//import Datetime from "react-datetime";
 // @material-ui/core components
 import withStyles from "@material-ui/core/styles/withStyles";
 import Slide from "@material-ui/core/Slide";
@@ -10,7 +10,7 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogActions from "@material-ui/core/DialogActions";
 import InputLabel from "@material-ui/core/InputLabel";
-import FormControl from "@material-ui/core/FormControl";
+//import FormControl from "@material-ui/core/FormControl";
 import Tooltip from "@material-ui/core/Tooltip";
 import Popover from "@material-ui/core/Popover";
 // @material-ui/icons
@@ -156,11 +156,15 @@ class SectionJavascript extends React.Component {
                       Datetime Picker
                     </InputLabel>
                     <br />
+                    {
+                      /*
                     <FormControl fullWidth>
                       <Datetime
                         inputProps={{ placeholder: "Datetime Picker Here" }}
                       />
                     </FormControl>
+                       */
+                    }
                   </GridItem>
                 </GridContainer>
               </GridItem>

src/pages/LandingPage/LandingPage.jsx

@@ -20,13 +20,17 @@ import Parallax from "components/Parallax/Parallax.jsx";
 
 import landingPageStyle from "assets/jss/material-kit-react/views/landingPage.jsx";
 
+import landingBg from "assets/img/landing-bg.jpg";
+
 // Sections for this page
 import ProductSection from "./Sections/ProductSection.jsx";
 import TeamSection from "./Sections/TeamSection.jsx";
 import WorkSection from "./Sections/WorkSection.jsx";
 
 const dashboardRoutes = [];
 
+
+
 class LandingPage extends React.Component {
   render() {
     const { classes, ...rest } = this.props;
@@ -44,7 +48,7 @@ class LandingPage extends React.Component {
           }}
           {...rest}
         />
-        <Parallax filter image={require("assets/img/landing-bg.jpg")}>
+        <Parallax filter image={landingBg}>
           <div className={classes.container}>
             <GridContainer>
               <GridItem xs={12} sm={12} md={6}>

src/pages/ProfilePage/ProfilePage.jsx

@@ -34,6 +34,8 @@ import work5 from "assets/img/examples/clem-onojegaw.jpg";
 
 import profilePageStyle from "assets/jss/material-kit-react/views/profilePage.jsx";
 
+import profileBg from "assets/img/profile-bg.jpg";
+
 class ProfilePage extends React.Component {
   render() {
     const { classes, ...rest } = this.props;
@@ -56,7 +58,7 @@ class ProfilePage extends React.Component {
           }}
           {...rest}
         />
-        <Parallax small filter image={require("assets/img/profile-bg.jpg")} />
+        <Parallax small filter image={profileBg} />
         <div className={classNames(classes.main, classes.mainRaised)}>
           <div>
             <div className={classes.container}>

src/pages/index.js

@@ -13,13 +13,15 @@ import LoginPage from "./LoginPage/LoginPage.jsx";
 
 let hist = createMemoryHistory();
 
-export default () => (
-  <Router history={hist}>
-    <Switch>
-      <Route path="/landing-page" component={LandingPage} />
-      <Route path="/profile-page" component={ProfilePage} />
-      <Route path="/login-page" component={LoginPage} />
-      <Route path="/" component={Components} />
-    </Switch>
-  </Router>
-);
+export default function Index() {
+  return (
+    <Router history={hist}>
+      <Switch>
+        <Route path="/landing-page" component={LandingPage} />
+        <Route path="/profile-page" component={ProfilePage} />
+        <Route path="/login-page" component={LoginPage} />
+        <Route path="/" component={Components} />
+      </Switch>
+    </Router>
+  )
+}

src/pages/landing-page.js

@@ -1,6 +1,8 @@
 import React from "react";
 import LandingPage from "./LandingPage/LandingPage";
 
-export default () => (
-  <LandingPage/>
-);
+export default function LandingPageP () {
+  return (
+    <LandingPage/>
+  );
+}

src/pages/login-page.js

@@ -1,6 +1,8 @@
 import React from "react";
 import LoginPage from "./LoginPage/LoginPage";
 
-export default () => (
-  <LoginPage/>
-);
+export default function LoginPageP() {
+  return (
+    <LoginPage/>
+  );
+}

src/pages/profile-page.js

@@ -1,6 +1,8 @@
 import React from "react";
 import ProfilePage from "./ProfilePage/ProfilePage";
 
-export default () => (
-  <ProfilePage/>
-);
+export default function ProfilePageP(){
+  return (
+    <ProfilePage/>
+  );
+}