Add CSS styles to /login route page, including media queries

client/src/components/Login.js

@@ -3,25 +3,39 @@ import PropTypes from 'prop-types';
 import { withRouter } from 'react-router';
 import { Button } from 'react-bootstrap';
 
-const NavBarSignIn = ({ auth, firebaseSignInGoogle, firebaseSignInFacebook, router }) => {
+const Login = ({ auth, firebaseSignInGoogle, firebaseSignInFacebook, router }) => {
   if (auth.status === 'SIGNED_IN' && router.location.state.createCampaignFlow === true) {
     router.push('/create-campaign');
   }
 
   return (
-    <div>
-      To continue please sign in:{' '}
-      <Button bsStyle="primary" onClick={firebaseSignInFacebook}>
-        Sign in With Facebook
-      </Button>{' '}
-      <Button bsStyle="primary" onClick={firebaseSignInGoogle}>
-        Sign in With Google
-      </Button>
+    <div className="campaign-sign-in-container">
+      <div className="title-and-signin-container">
+        <h1 className="create-a-login-title">CREATE A LOG-IN</h1>
+        <div className="sign-in-container">
+          SIGN WITH:{' '}
+          <Button bsStyle="primary" className="google-login-btn" onClick={firebaseSignInGoogle}>
+            Google
+          </Button>
+          OR
+          <Button bsStyle="primary" className="facebook-login-btn" onClick={firebaseSignInFacebook}>
+            Facebook
+          </Button>{' '}
+        </div>
+      </div>
+      <div className="sign-in-explaination">
+        <h2 className="sign-up-campaign-title">Sign up to create a campaign</h2>
+        <p className="sign-up-campaign-body">As a campaign supporter,</p>
+        <p className="sign-up-campaign-body">your account lets you access your</p>
+        <p className="sign-up-campaign-body">campaign and make progress.</p>
+        <p className="sign-up-campaign-body">You can only sign one campaign</p>
+        <p className="sign-up-campaign-body">at a time.</p>
+      </div>
     </div>
   );
 };
 
-NavBarSignIn.propTypes = {
+Login.propTypes = {
   auth: PropTypes.shape({}).isRequired,
   firebaseSignInGoogle: PropTypes.func.isRequired,
   firebaseSignInFacebook: PropTypes.func.isRequired,
@@ -30,4 +44,4 @@ NavBarSignIn.propTypes = {
   }).isRequired
 };
 
-export default withRouter(NavBarSignIn);
+export default withRouter(Login);

client/src/stylesheets/components/_Login.scss

@@ -0,0 +1,68 @@
+.campaign-sign-in-container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.create-a-login-title {
+  font-weight: 700;
+  margin-bottom: 50px;
+  margin-top: 100px;
+  text-decoration: underline;
+}
+
+.facebook-login-btn,
+.google-login-btn {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+.sign-in-container {
+  background-color: #F2F2F2;
+  color: #22556f;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  padding: 30px;
+  width: 100%;
+}
+
+.sign-in-explaination {
+  margin-top: 150px;
+  padding: 40px;
+}
+
+.sign-up-campaign-body {
+  font-style: italic;
+}
+
+.sign-up-campaign-title {
+  font-weight: 700;
+  margin-bottom: 10px;
+  text-decoration: underline;
+}
+
+.title-and-signin-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  width: 30%;
+}
+
+@media screen and (max-width: 906px) {
+  .campaign-sign-in-container {
+    flex-direction: column;
+  }
+
+  .sign-in-container {
+    width: 272px;
+  }
+
+  .sign-in-explaination {
+    margin-top: 30px;
+  }
+
+  .title-and-signin-container {
+    width: 272px;
+  }
+}

client/src/stylesheets/main.scss

@@ -45,7 +45,9 @@
   'components/TenantOrPMChoice',
   'components/RecyclingInfo',
   'components/AdminAddSigantureModal',
-  'components/NotFound';
+  'components/NotFound',
+  'components/Login';
+
 
 
 //Do not change the order of these imports: