feat: style email-sign-up page

client/src/components/layouts/global.css

@@ -493,3 +493,27 @@ blockquote .small {
 #search::placeholder {
   color: var(--secondary-color);
 }
+
+/* checkbox */
+
+.checkbox-inline input[type='checkbox'] {
+  margin-left: -30px;
+}
+
+.checkbox-inline {
+  padding-left: 30px;
+}
+
+input[type='checkbox'] {
+  height: 21px;
+  width: 21px;
+}
+
+/* general page styling */
+.default-page-wrapper {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 20px;
+}

client/src/pages/email-sign-up.js

@@ -2,18 +2,21 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import SectionHeader from '../components/settings/SectionHeader';
+
 import {
   Row,
   Col,
   Button,
   FormGroup,
   ControlLabel,
+  Grid,
   Checkbox
 } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
 import { createSelector } from 'reselect';
 
-import { ButtonSpacer, Spacer } from '../components/helpers';
+import { ButtonSpacer } from '../components/helpers';
 import { acceptTerms, userSelector } from '../redux';
 import createRedirect from '../components/createRedirect';
 
@@ -80,13 +83,8 @@ class AcceptPrivacyTerms extends Component {
         <Helmet>
           <title>Email Sign Up | freeCodeCamp.org</title>
         </Helmet>
-        <Spacer size={2} />
+        <Grid className='default-page-wrapper'>
-        <Row className='text-center'>
+          <SectionHeader>Email Sign Up</SectionHeader>
-          <Col sm={8} smOffset={2} xs={12}>
-            <h1>Email Sign Up </h1>
-          </Col>
-        </Row>
-        <Spacer size={2} />
           <Row>
             <Col sm={8} smOffset={2} xs={12}>
               <form onSubmit={this.handleSubmit}>
@@ -94,29 +92,31 @@ class AcceptPrivacyTerms extends Component {
                   <ControlLabel htmlFor='quincy-email'>
                     Quincy's Emails
                   </ControlLabel>
-                <Spacer />
+                  <ButtonSpacer />
                   <Checkbox
                     checked={quincyEmail}
                     id='quincy-email'
                     inline={true}
                     onChange={this.createHandleChange('quincyEmail')}
                   >
-                  I want weekly emails from Quincy, freeCodeCamp.org's founder.
+                    I want weekly emails from Quincy, freeCodeCamp.org's
+                    founder.
                   </Checkbox>
                 </FormGroup>
                 <ButtonSpacer />
                 <Button
                   block={true}
+                  bsSize='lg'
                   bsStyle='primary'
                   className='big-cta-btn'
                   type='submit'
                 >
                   Continue to freeCodeCamp.org
                 </Button>
-              <Spacer size={2} />
               </form>
             </Col>
           </Row>
+        </Grid>
       </Fragment>
     );
   }