feat: Initial setup of theme.

src/layouts/AuthLayout/index.js

@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types';
+
+// @mui material components
+import Grid from '@mui/material/Grid';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+import MDTypography from 'components/MDTypography';
+
+// Material Dashboard 2 PRO React example components
+import PageLayout from 'layouts/PageLayout';
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController } from 'context';
+
+function AuthLayout({ header, title, description, illustration, children }) {
+  const [controller] = useMaterialUIController();
+  const { darkMode } = controller;
+
+  return (
+    <PageLayout background="white">
+      <Grid
+        container
+        sx={{
+          backgroundColor: ({ palette: { background, white } }) =>
+            darkMode ? background.default : white.main
+        }}
+      >
+        <Grid item xs={12} lg={6}>
+          <MDBox
+            display={{ xs: 'none', lg: 'flex' }}
+            width="calc(100% - 2rem)"
+            height="calc(100vh - 2rem)"
+            borderRadius="lg"
+            ml={2}
+            mt={2}
+            sx={{ backgroundImage: `url(${illustration})` }}
+          />
+        </Grid>
+        <Grid item xs={11} sm={8} md={6} lg={4} xl={3} sx={{ mx: 'auto' }}>
+          <MDBox display="flex" flexDirection="column" justifyContent="center" height="100vh">
+            <MDBox py={3} px={3} textAlign="center">
+              {!header ? (
+                <>
+                  <MDBox mb={1} textAlign="center">
+                    <MDTypography variant="h4" fontWeight="bold">
+                      {title}
+                    </MDTypography>
+                  </MDBox>
+                  <MDTypography variant="body2" color="text">
+                    {description}
+                  </MDTypography>
+                </>
+              ) : (
+                header
+              )}
+            </MDBox>
+            <MDBox p={3}>{children}</MDBox>
+          </MDBox>
+        </Grid>
+      </Grid>
+    </PageLayout>
+  );
+}
+
+// Setting default values for the props of AuthLayout
+AuthLayout.defaultProps = {
+  header: '',
+  title: '',
+  description: '',
+  illustration: ''
+};
+
+// Typechecking props for the AuthLayout
+AuthLayout.propTypes = {
+  header: PropTypes.node,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  illustration: PropTypes.string
+};
+
+export default AuthLayout;

src/layouts/DashboardLayout/index.js

@@ -0,0 +1,64 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React - v2.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-pro-react
+* Copyright 2021 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useEffect } from 'react';
+
+// react-router-dom components
+import { useLocation } from 'react-router-dom';
+
+// prop-types is a library for typechecking of props.
+import PropTypes from 'prop-types';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController, setLayout } from 'context';
+
+function DashboardLayout({ children }) {
+  const [controller, dispatch] = useMaterialUIController();
+  const { miniSidenav } = controller;
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    setLayout(dispatch, 'dashboard');
+  }, [pathname]);
+
+  return (
+    <MDBox
+      sx={({ breakpoints, transitions, functions: { pxToRem } }) => ({
+        p: 3,
+        position: 'relative',
+
+        [breakpoints.up('xl')]: {
+          marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274),
+          transition: transitions.create(['margin-left', 'margin-right'], {
+            easing: transitions.easing.easeInOut,
+            duration: transitions.duration.standard
+          })
+        }
+      })}
+    >
+      {children}
+    </MDBox>
+  );
+}
+
+// Typechecking props for the DashboardLayout
+DashboardLayout.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+export default DashboardLayout;

src/layouts/PageLayout/index.js

@@ -0,0 +1,62 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React - v2.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-pro-react
+* Copyright 2021 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+import { useEffect } from 'react';
+
+// react-router-dom components
+import { useLocation } from 'react-router-dom';
+
+// prop-types is a library for typechecking of props.
+import PropTypes from 'prop-types';
+
+// Material Dashboard 2 PRO React components
+import MDBox from 'components/MDBox';
+
+// Material Dashboard 2 PRO React context
+import { useMaterialUIController, setLayout } from 'context';
+
+function PageLayout({ background, children }) {
+  const [, dispatch] = useMaterialUIController();
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    setLayout(dispatch, 'page');
+  }, [pathname]);
+
+  return (
+    <MDBox
+      width="100vw"
+      height="100%"
+      minHeight="100vh"
+      bgColor={background}
+      sx={{ overflowX: 'hidden' }}
+    >
+      {children}
+    </MDBox>
+  );
+}
+
+// Setting default values for the props for PageLayout
+PageLayout.defaultProps = {
+  background: 'default'
+};
+
+// Typechecking props for the PageLayout
+PageLayout.propTypes = {
+  background: PropTypes.oneOf(['white', 'light', 'default']),
+  children: PropTypes.node.isRequired
+};
+
+export default PageLayout;