wip

src/registration/RegistrationPage.jsx

@@ -1,7 +1,10 @@
 import React from 'react';
-import logo from '../assets/headerlogo.svg';
-import EmailField from '../account-settings/EmailField';
 import { Button, Input } from '@edx/paragon';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFacebookF, faGoogle, faMicrosoft } from '@fortawesome/free-brands-svg-icons';
+import { faGraduationCap } from '@fortawesome/free-solid-svg-icons';
+import logo from '../assets/headerlogo.svg'
+import EmailField from '../account-settings/EmailField';
 
 // export default () => <EmailField />;
 
@@ -17,18 +20,19 @@ class RegistrationPage extends React.Component {
           <img src={logo} alt="edX" class="logo"/>
         </div>
 
-        <div className="row registration-container">
-          <div className="col-8 md-5">
-            <span>Already have an edX account?</span>
-            <a href="https://courses.edx.org/register?next=/dashboard#login">Sign in.</a>
+        <div className="row registration-container d-block">
+          <div className="mb-4">
+            <FontAwesomeIcon className="d-block mx-auto fa-2x" icon={faGraduationCap} />
+            <h5 className="d-block mx-auto text-center">Start learning now!</h5>
           </div>
-          <div className="col-5 md-5">
-            <span>Create an account and start learning</span>
-            <span>Create an account using</span>
-              <button>Facebook</button>
-              <button>Google</button>
-              <button>Microsoft</button>
-            <span>or create a new one here</span>
+          <div className="row text-center d-block mb-4">
+            <span className="d-block mx-auto text-center">Create an account using</span>
+              <button className="btn-social facebook"><FontAwesomeIcon className="mr-2" icon={faFacebookF} />Facebook</button>
+              <button className="btn-social google"><FontAwesomeIcon className="mr-2" icon={faGoogle} />Google</button>
+              <button className="btn-social microsoft"><FontAwesomeIcon className="mr-2" icon={faMicrosoft} />Microsoft</button>
+            <span className="d-block mx-auto text-center">or create a new one here</span>
+          </div>
+          <form className="col-6 mb-4 mx-auto">
             <Input type="text" defaultValue="Email (required)" />
             <Input type="text" defaultValue="Full Name (required)" />
             <Input type="text" defaultValue="Public Username (required)" />
@@ -43,11 +47,13 @@ class RegistrationPage extends React.Component {
                 { value: 'Foo ssBar', label: 'Farboo' },
               ]}
             />
-
-
+            <Button className="btn-primary float-right">Create Account</Button>
+          </form>
+          <div className="text-center mb-2">
+            <span>Already have an edX account?</span>
+            <a href="https://courses.edx.org/register?next=/dashboard#login"> Sign in.</a>
           </div>
         </div>
-        <Button className="btn-primary">Create Account</Button>
       </React.Fragment>
     )
   }

src/registration/_style.scss

@@ -1,5 +1,6 @@
 .registration-container {
   margin: 5rem;
+  line-height: 1.5;
 }
 .registration-header {
   border-bottom: 1px solid #e7e7e7;
@@ -15,3 +16,23 @@
   position: relative;
   box-sizing: content-box;
 }
+.btn-social {
+  padding: 0.5rem 1rem;
+  color: white;
+  margin-right: 1rem;
+}
+.facebook {
+  border-color: #4267b2;
+  background-color: #4267b2;
+}
+.google {
+  border-color: #4285f4;
+  background-color: #4285f4;
+}
+.microsoft {
+  border-color: #2f2f2f;
+  background-color: #2f2f2f;
+}
+form:nth-child(n) {
+  margin: 1rem;
+}