From 7883ba5c7775c1bb4138ea839970a2e0543ad9ae Mon Sep 17 00:00:00 2001
From: Rick Reilly <credential.helper>
Date: Wed, 12 Feb 2020 16:52:36 -0500
Subject: [PATCH] wip

---
 src/registration/LoginPage.jsx | 81 ++++++++++++++++++----------------
 src/registration/_style.scss   | 25 +++++++++++
 2 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/src/registration/LoginPage.jsx b/src/registration/LoginPage.jsx
index b28411f..d5d925e 100644
--- a/src/registration/LoginPage.jsx
+++ b/src/registration/LoginPage.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input } from '@edx/paragon';
+import { Button, Input } from '@edx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFacebookF, faGoogle, faMicrosoft } from '@fortawesome/free-brands-svg-icons';
 
@@ -23,45 +23,48 @@ export default class LoginPage extends React.Component {
 
   render() {
     return (
-      <div className="d-flex align-items-center flex-column">
-        <div className="d-flex flex-row" style={{ width: '300px' }}>
-          <p>First time here?</p>
-          <a className="ml-2" href="/registration">Create an account!</a>
-        </div>
-        <form>
-          <div className="form-group" style={{ width: '400px' }}>
-            <h2>Sign In</h2>
-            <div className="d-flex flex-column align-items-start">
-              <label htmlFor="loginUsername" className="h6 mr-1">Username</label>
-              <Input
-                name="Username"
-                id="loginUsername"
-                type="email"
-                placeholder="username@domain.com"
-                value={this.state.username}
-                onChange={this.handleUsernameChange}
-              />
-            </div>
-            <p className="mb-4">The email address you used to register with edX.</p>
-            <div className="d-flex flex-column align-items-start">
-              <label htmlFor="loginUsername" className="h6 mr-1">Password</label>
-              <Input
-                name="Password"
-                id="loginPassword"
-                type="Password"
-                value={this.state.password}
-                onChange={this.handlePasswordChange}
-              />
-            </div>
+      <div className="d-flex justify-content-center">
+        <div className="d-flex flex-column" style={{ width: '400px' }}>
+          <div className="d-flex flex-row">
+            <p>First time here?</p>
+            <a className="ml-2" href="/registration">Create an account!</a>
+          </div>
+          <form className="m-0">
+            <div className="form-group">
+              <h2>Sign In</h2>
+              <div className="d-flex flex-column align-items-start">
+                <label htmlFor="loginUsername" className="h6 mr-1">Username</label>
+                <Input
+                  name="Username"
+                  id="loginUsername"
+                  type="email"
+                  placeholder="username@domain.com"
+                  value={this.state.username}
+                  onChange={this.handleUsernameChange}
+                />
+              </div>
+              <p className="mb-4">The email address you used to register with edX.</p>
+              <div className="d-flex flex-column align-items-start">
+                <label htmlFor="loginUsername" className="h6 mr-1">Password</label>
+                <Input
+                  name="Password"
+                  id="loginPassword"
+                  type="Password"
+                  value={this.state.password}
+                  onChange={this.handlePasswordChange}
+                />
+              </div>
+            </div>
+            <Button className="btn-primary">Sign in</Button>
+          </form>
+          <div className="section-heading-line mb-4">
+            <h3>or sign in with</h3>
+          </div>
+          <div className="row text-center d-block mb-4">
+            <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>
           </div>
-        </form>
-        <div>
-          <h3>or sign in with</h3>
-        </div>
-        <div className="row text-center d-block mb-4">
-          <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>
         </div>
       </div>
     );
diff --git a/src/registration/_style.scss b/src/registration/_style.scss
index 38cc39d..6e5a23f 100644
--- a/src/registration/_style.scss
+++ b/src/registration/_style.scss
@@ -36,3 +36,28 @@
 form:nth-child(n) {
   margin: 1rem;
 }
+
+.section-heading-line{
+  position: relative;
+  text-align: center;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 20%;
+    background-color: gray;
+    height: 1px;
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 50%;
+    width: 20%;
+    background-color: gray;
+    height: 1px;
+  }
+}
\ No newline at end of file