Fix checkout auth page for UI mockups (#68)

Author: shaunmaharaj

src/containers/CheckoutAuthPage.jsx

@@ -24,6 +24,7 @@ import ReactRouterPropTypes from 'react-router-prop-types';
 import intl from 'react-intl-universal';
 import { login, loginRegistered } from '../utils/AuthService';
 import cortexFetch from '../utils/Cortex';
+import './CheckoutAuthPage.less';
 
 const Config = require('Config');
 
@@ -128,15 +129,15 @@ class CheckoutAuthPage extends React.Component {
       <div>
         <div className="app-main" data-region="appMain" style={{ display: 'block' }}>
           <div className="container">
-            <h3>
+            <h3 className="view-title">
               {intl.get('sign-in-to-proceed')}
             </h3>
             <div className="checkout-auth-option-list equalize">
-              <div data-region="checkoutAutRegisterOptionRegion" style={{ display: 'block' }}>
-                <div className="checkout-auth-option-container" style={{ minHeight: '259px' }}>
-                  <h3>
+              <div className="checkoutAutRegisterOptionRegion" data-region="checkoutAutRegisterOptionRegion" style={{ display: 'block' }}>
+                <div className="checkout-auth-option-container">
+                  <h2>
                     {intl.get('create-an-account')}
-                  </h3>
+                  </h2>
                   <p>
                     {intl.get('create-an-account-message')}
                   </p>
@@ -145,11 +146,11 @@ class CheckoutAuthPage extends React.Component {
                   </button>
                 </div>
               </div>
-              <div data-region="checkoutAuthLoginOptionRegion" style={{ display: 'block' }}>
-                <div className="checkout-auth-option-container" style={{ minHeight: '259px' }}>
-                  <h3>
+              <div className="checkoutAuthLoginOptionRegion" data-region="checkoutAuthLoginOptionRegion" style={{ display: 'block' }}>
+                <div className="checkout-auth-option-container">
+                  <h2>
                     {intl.get('i-have-an-account')}
-                  </h3>
+                  </h2>
                   <form onSubmit={this.loginRegisteredUser}>
                     <div className="auth-feedback-container" data-region="authLoginFormFeedbackRegion">
                       {failedLogin ? intl.get('invalid-username-or-password') : ''}
@@ -185,11 +186,11 @@ class CheckoutAuthPage extends React.Component {
                   </form>
                 </div>
               </div>
-              <div data-region="checkoutAuthAnonymousOptionRegion" style={{ display: 'block' }}>
+              <div className="checkoutAuthAnonymousOptionRegion" data-region="checkoutAuthAnonymousOptionRegion" style={{ display: 'block' }}>
                 <div className="checkout-auth-option-container">
-                  <h3>
+                  <h2>
                     {intl.get('continue-without-account')}
-                  </h3>
+                  </h2>
                   <p>
                     {intl.get('continue-without-account-message')}
                     {' '}

src/containers/CheckoutAuthPage.less

@@ -0,0 +1,85 @@
+/**
+ * Copyright © 2018 Elastic Path Software Inc. All rights reserved.
+ *
+ * This is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This software is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this license. If not, see
+ *
+ *     https://www.gnu.org/licenses/
+ *
+ *
+ */
+
+@import './../style/common.less';
+
+.checkout-auth-option-list {
+  h2 {
+    font-size: 18px;
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+
+  .control-label {
+    .required-label {
+      color: red;
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+
+  .form-control {
+    display: block;
+    height: 34px;
+    padding: 6px 12px;
+    font-size: 14px;
+    color: #555555;
+    background-color: #ffffff;
+    border: 1px solid #cccccc;
+    border-radius: 4px;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  }
+
+  .checkout-auth-option-container {
+    padding-bottom: 40px;
+  }
+
+  .btn {
+    text-shadow: none;
+    color: @complimentBlueColor;
+    background-color: #ffffff;
+    border: solid 1px @complimentBlueColor;
+    border-radius: 0;
+    text-align: middle;
+    box-shadow: none;
+    white-space: nowrap;
+    height: auto;
+    display: inline-block;
+    width: 90px;
+    height: 30px;
+    margin-right: 10px;
+  }
+
+  .btn-primary {
+    padding: 8px 14px;
+    width: 100%;
+    height: 40px;
+    background-color: @mainBlueColor;
+    font-size: 12px;
+    font-weight: bold;
+    color: #ffffff;
+    border: 0;
+    border-radius: 0;
+    text-transform: uppercase;
+    margin-top: 10px;
+    max-width: 280px;
+  }
+}