From f91cf1ae2dd90f33585a42b56327bf33993ae639 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Tue, 4 Aug 2020 23:16:29 +0300
Subject: [PATCH] feat: style email-sign-up page

---
 client/src/components/layouts/global.css | 24 ++++++++
 client/src/pages/email-sign-up.js        | 74 ++++++++++++------------
 2 files changed, 61 insertions(+), 37 deletions(-)

diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index 10643fc5d8..d11d720d2d 100644
--- a/client/src/components/layouts/global.css
+++ b/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;
+}
diff --git a/client/src/pages/email-sign-up.js b/client/src/pages/email-sign-up.js
index 95d6ef644c..8a6ed9b09a 100644
--- a/client/src/pages/email-sign-up.js
+++ b/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,43 +83,40 @@ class AcceptPrivacyTerms extends Component {
         <Helmet>
           <title>Email Sign Up | freeCodeCamp.org</title>
         </Helmet>
-        <Spacer size={2} />
-        <Row className='text-center'>
-          <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}>
-              <FormGroup>
-                <ControlLabel htmlFor='quincy-email'>
-                  Quincy's Emails
-                </ControlLabel>
-                <Spacer />
-                <Checkbox
-                  checked={quincyEmail}
-                  id='quincy-email'
-                  inline={true}
-                  onChange={this.createHandleChange('quincyEmail')}
+        <Grid className='default-page-wrapper'>
+          <SectionHeader>Email Sign Up</SectionHeader>
+          <Row>
+            <Col sm={8} smOffset={2} xs={12}>
+              <form onSubmit={this.handleSubmit}>
+                <FormGroup>
+                  <ControlLabel htmlFor='quincy-email'>
+                    Quincy's Emails
+                  </ControlLabel>
+                  <ButtonSpacer />
+                  <Checkbox
+                    checked={quincyEmail}
+                    id='quincy-email'
+                    inline={true}
+                    onChange={this.createHandleChange('quincyEmail')}
+                  >
+                    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'
                 >
-                  I want weekly emails from Quincy, freeCodeCamp.org's founder.
-                </Checkbox>
-              </FormGroup>
-              <ButtonSpacer />
-              <Button
-                block={true}
-                bsStyle='primary'
-                className='big-cta-btn'
-                type='submit'
-              >
-                Continue to freeCodeCamp.org
-              </Button>
-              <Spacer size={2} />
-            </form>
-          </Col>
-        </Row>
+                  Continue to freeCodeCamp.org
+                </Button>
+              </form>
+            </Col>
+          </Row>
+        </Grid>
       </Fragment>
     );
   }