Markup initial Profile page with empty form

2 files changed, 52 insertions, 8 deletions

diff --git a/src/index.js b/src/index.js
index 0c3d415..f90c39a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,6 +10,7 @@ import Header from './components/Header/Header';
 import Timer from "./pages/Timer/Timer";
 import Scoreboard from "./pages/Scoreboard/Scoreboard";
 import Contribute from "./pages/Contribute/Contribute";
+import Profile from "./pages/Profile/Profile";
 
 
 const App = () => {
@@ -28,19 +29,17 @@ const App = () => {
           />
         );
 
+      case 'profile':
+        return <Profile/>;
+
       case 'scoreboard':
-        return (<Scoreboard />);
+        return <Scoreboard />;
 
       case 'contribute':
-        return (<Contribute />);
+        return <Contribute />;
 
       default:
-        return (
-          <p>
-            This text is rendered outside of <code>Header</code> component, but
-            interacting with <code>Header</code> can influence content of this page!
-          </p>
-        )
+        return <Contribute />;
     }
   };
 
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
new file mode 100644
index 0000000..3b0de1e
--- /dev/null
+++ b/src/pages/Profile/Profile.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import Window from "../../components/Window/Window";
+import ContentSection from "../../components/ContentSection/ContentSection";
+
+import {
+  TextField,
+  Button,
+  Typography,
+  makeStyles,
+} from "@material-ui/core";
+
+
+const useStyles = makeStyles(theme => ({
+  primary: {
+    padding: theme.spacing(4)
+  },
+}));
+
+const Profile = () => {
+  const classes = useStyles();
+
+  return (
+    <>
+      <Window type="primary">
+        <div className={classes.primary}>
+          <ContentSection sectionName="Tell us who you are">
+            <p> Here is some text about why you should register at ChronoCube: </p>
+            <p>
+              <TextField variant="outlined" color="secondary" label="Username" />
+            </p>
+            <Button variant="contained" color="secondary" size="large">
+              Submit!
+            </Button>
+          </ContentSection>
+        </div>
+      </Window>
+      <Window type="secondary" name="History">
+
+      </Window>
+    </>
+  )
+};
+
+
+export default Profile;