Public page layout component

.eslintrc

@@ -28,6 +28,8 @@
     "react/jsx-filename-extension": "off",
     "react/jsx-props-no-spreading": "off",
     "react/forbid-prop-types": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "import/prefer-default-export": "off",
     "react/prop-types": [
       2,
       {

src/components/index.js

@@ -8,6 +8,7 @@ import FormLayout from './FormLayout';
 import InputField from './InputField';
 import Loading from './Loading';
 import { ButtonWithConfirmationModal, ButtonWithAlertModal } from './modals';
+import { PublicPageLayout } from './layouts';
 import NavBar from './NavBar';
 import Table from './Table';
 import Tags from './Tags';
@@ -25,4 +26,5 @@ export {
   NavBar,
   Table,
   Tags,
+  PublicPageLayout,
 };

src/components/layouts/PublicPageLayout/PublicPageLayout.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Card, CardContent } from '@material-ui/core';
+import { Story, Meta } from '@storybook/react';
+
+import PublicPageLayout, { PublicPageLayoutProps } from './PublicPageLayout';
+
+export default {
+  title: 'Layouts/PublicPageLayout',
+  component: PublicPageLayout,
+} as Meta;
+
+const Template: Story<PublicPageLayoutProps> = args => {
+  const { children } = args;
+  return <PublicPageLayout>{children}</PublicPageLayout>;
+};
+
+export const SamplePublicPageLayout = Template.bind({});
+SamplePublicPageLayout.args = {
+  children: (
+    <Card>
+      <CardContent>
+        <h1>Title</h1>
+      </CardContent>
+    </Card>
+  ),
+};

src/components/layouts/PublicPageLayout/PublicPageLayout.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Grid, WithStyles, withStyles } from '@material-ui/core';
+
+import styles from './styles';
+
+export interface PublicPageLayoutProps extends WithStyles<typeof styles> {
+  children: JSX.Element;
+}
+
+function PublicPageLayout(props: PublicPageLayoutProps): JSX.Element {
+  const { children, classes } = props;
+  return (
+    <Grid
+      className={classes.root}
+      container
+      direction='row'
+      justify='center'
+      alignItems='center'
+    >
+      <Grid item className={classes.children}>
+        {children}
+      </Grid>
+    </Grid>
+  );
+}
+
+export default withStyles(styles)(PublicPageLayout);

src/components/layouts/PublicPageLayout/index.ts

@@ -0,0 +1,3 @@
+import PublicPageLayout from './PublicPageLayout';
+
+export default PublicPageLayout;

src/components/layouts/PublicPageLayout/styles.ts

@@ -0,0 +1,17 @@
+import { Theme } from '@material-ui/core';
+
+const styles = (theme: Theme) => ({
+  root: {
+    [theme.breakpoints.up('sm')]: {
+      marginTop: '8vh',
+    },
+    [theme.breakpoints.only('xs')]: {
+      marginTop: '3vh',
+    },
+  },
+  children: {
+    margin: theme.spacing(2),
+  },
+});
+
+export default styles;

src/components/layouts/index.ts

@@ -0,0 +1,3 @@
+import PublicPageLayout from './PublicPageLayout';
+
+export { PublicPageLayout };

src/index.tsx

@@ -18,6 +18,8 @@ const config = {
 
 firebase.initializeApp(config);
 
+document.body.style.height = '100%';
+document.body.style.margin = '0';
 ReactDOM.render(<App />, document.getElementById('root'));
 
 serviceWorker.unregister();

src/pages/EventRsvpPage/index.js

@@ -7,7 +7,7 @@ import EventRsvpForm from './components/EventRsvpForm';
 import styles from './styles';
 
 import HKN_TRIDENT_LOGO from '@Images/hkn-trident.png';
-import { Loading } from '@SharedComponents';
+import { Loading, PublicPageLayout } from '@SharedComponents';
 import { getEventById } from '@Services/events';
 
 class EventRsvpPage extends React.Component {
@@ -39,8 +39,6 @@ class EventRsvpPage extends React.Component {
   }
 
   handleSubmit = (values, setSubmitting) => {
-    console.log(values);
-
     setSubmitting(false);
   };
 
@@ -52,7 +50,7 @@ class EventRsvpPage extends React.Component {
       eventInfo == null ? (
         <Loading />
       ) : (
-        <div className={classes.root}>
+        <PublicPageLayout>
           <Card className={classes.eventRsvpCard}>
             <Grid container direction='column' alignItems='center' spacing={3}>
               <Grid item>
@@ -87,7 +85,7 @@ class EventRsvpPage extends React.Component {
               </Grid>
             </Grid>
           </Card>
-        </div>
+        </PublicPageLayout>
       );
 
     return EventRsvp;

src/pages/EventSignInPage/index.js

@@ -7,7 +7,7 @@ import EventSignInForm from './components/EventSignInForm';
 import styles from './styles';
 
 import HKN_TRIDENT_LOGO from '@Images/hkn-trident.png';
-import { Loading } from '@SharedComponents';
+import { Loading, PublicPageLayout } from '@SharedComponents';
 import { getEventById } from '@Services/events';
 import { signInToEvent } from '@Services/ApiEvents';
 
@@ -42,8 +42,6 @@ class EventSignInPage extends React.Component {
   handleSubmit = (values, setSubmitting) => {
     const { eventId } = this.state;
 
-    console.log(values);
-
     signInToEvent(eventId, values);
 
     setSubmitting(false);
@@ -57,7 +55,7 @@ class EventSignInPage extends React.Component {
       eventInfo == null ? (
         <Loading />
       ) : (
-        <div className={classes.root}>
+        <PublicPageLayout>
           <Card className={classes.eventSignInCard}>
             <Grid container direction='column' alignItems='center' spacing={3}>
               <Grid item>
@@ -92,7 +90,7 @@ class EventSignInPage extends React.Component {
               </Grid>
             </Grid>
           </Card>
-        </div>
+        </PublicPageLayout>
       );
 
     return EventSignIn;

src/pages/SignUpPage/index.js

@@ -5,6 +5,7 @@ import { withStyles } from '@material-ui/core/styles';
 import SignUpForm from './components/SignUpForm';
 import styles from './styles';
 
+import { PublicPageLayout } from '@SharedComponents/layouts';
 import { createUserAccountFromSignup } from '@Services/auth';
 import HKN_TRIDENT_LOGO from '@Images/hkn-trident.png';
 
@@ -31,34 +32,26 @@ class SignUpPage extends React.Component {
     const { classes } = this.props;
 
     return (
-      <Grid
-        className={classes.root}
-        container
-        direction='row'
-        justify='center'
-        alignItems='center'
-      >
-        <Grid item>
-          <Card elevation={3} className={classes.card}>
-            <CardContent>
-              <Grid
-                container
-                className={classes.cardContent}
-                alignItems='center'
-                direction='column'
-                spacing={2}
-              >
-                <Grid item>
-                  <Avatar className={classes.logo} src={HKN_TRIDENT_LOGO} />
-                </Grid>
-                <Grid item>
-                  <SignUpForm handleSubmit={this.handleSubmit} />
-                </Grid>
+      <PublicPageLayout>
+        <Card elevation={3} className={classes.card}>
+          <CardContent>
+            <Grid
+              container
+              className={classes.cardContent}
+              alignItems='center'
+              direction='column'
+              spacing={2}
+            >
+              <Grid item>
+                <Avatar className={classes.logo} src={HKN_TRIDENT_LOGO} />
               </Grid>
-            </CardContent>
-          </Card>
-        </Grid>
-      </Grid>
+              <Grid item>
+                <SignUpForm handleSubmit={this.handleSubmit} />
+              </Grid>
+            </Grid>
+          </CardContent>
+        </Card>
+      </PublicPageLayout>
     );
   }
 }