[Ivan Diaz] - Responsive design

client/src/app/main/main-home/main-home-page-login-widget.js

@@ -1,14 +1,15 @@
-import React              from 'react';
+const React = require( 'react');
+const classNames = require('classnames');
 
-import UserActions        from 'actions/user-actions';
-import UserStore          from 'stores/user-store';
+const UserActions = require('actions/user-actions');
+const UserStore = require('stores/user-store');
 
-import Button             from 'core-components/button';
-import Form               from 'core-components/form';
-import Input              from 'core-components/input';
-import Checkbox           from 'core-components/checkbox';
-import Widget             from 'core-components/widget';
-import WidgetTransition   from 'core-components/widget-transition';
+const Button = require('core-components/button');
+const Form = require('core-components/form');
+const Input = require('core-components/input');
+const Checkbox = require('core-components/checkbox');
+const Widget = require('core-components/widget');
+const WidgetTransition = require('core-components/widget-transition');
 
 let MainHomePageLoginWidget = React.createClass({
 
@@ -20,7 +21,7 @@ let MainHomePageLoginWidget = React.createClass({
 
     render() {
         return (
-            <WidgetTransition sideToShow={this.state.sideToShow} className="login-widget--container">
+            <WidgetTransition sideToShow={this.state.sideToShow} className={classNames('login-widget--container', this.props.className)}>
                 {this.renderLogin()}
                 {this.renderPasswordRecovery()}
             </WidgetTransition>
@@ -36,7 +37,9 @@ let MainHomePageLoginWidget = React.createClass({
                         <Input placeholder="password" name="password" className="login-widget--input" password/>
                         <Checkbox name="remember" label="Remember Me" className="login-widget--input"/>
                     </div>
-                    <Button type="primary">LOG IN</Button>
+                    <div className="login-widget--submit-button">
+                        <Button type="primary">LOG IN</Button>
+                    </div>
                 </Form>
                 <Button className="login-widget--forgot-password" type="link" onClick={this.handleForgetPasswordClick}>
                     {'Forgot your password?'}
@@ -52,7 +55,9 @@ let MainHomePageLoginWidget = React.createClass({
                     <div className="login-widget--inputs">
                         <Input placeholder="email" name="email" className="login-widget--input"/>
                     </div>
-                    <Button type="primary">Recover my password</Button>
+                    <div className="login-widget--submit-button">
+                        <Button type="primary">Recover my password</Button>
+                    </div>
                 </Form>
                 <Button className="login-widget--forgot-password" type="link" onClick={this.handleBackToLoginClick}>
                     {'Back to login form'}

client/src/app/main/main-home/main-home-page-login-widget.scss

@@ -1,8 +1,7 @@
 .login-widget {
 
     &--container {
-        margin: 0 auto;
-        height: 327px;
+        height: 361px;
     }
 
     &--input {

client/src/app/main/main-home/main-home-page-portal.js

@@ -0,0 +1,16 @@
+const React = require('react');
+const classNames = require('classnames');
+
+const Widget = require('core-components/widget');
+
+const MainHomePagePortal = React.createClass({
+    render() {
+        return (
+            <Widget className={classNames('main-home-page-portal', this.props.className)}>
+                support portal
+            </Widget>
+        );
+    }
+});
+
+export default MainHomePagePortal;

client/src/app/main/main-home/main-home-page-portal.scss

@@ -0,0 +1,3 @@
+.main-home-page-portal {
+
+}

client/src/app/main/main-home/main-home-page.js

@@ -1,15 +1,15 @@
-import React              from 'react';
-import {ListenerMixin}    from 'reflux';
-import {RouteHandler}     from 'react-router';
+const React = require( 'react');
 
-import MainHomePageLoginWidget  from 'app/main/main-home/main-home-page-login-widget';
+const MainHomePageLoginWidget  = require('app/main/main-home/main-home-page-login-widget');
+const MainHomePagePortal  = require('app/main/main-home/main-home-page-portal');
 
-let MainHomePage = React.createClass({
+const MainHomePage = React.createClass({
 
 	render() {
 		return (
 			<div className="main-home-page">
-				<MainHomePageLoginWidget />
+				<MainHomePageLoginWidget className="col-md-4" />
+				<MainHomePagePortal className="col-md-8" />
 			</div>
 		);
 	}

client/src/app/main/main-layout.scss

@@ -9,9 +9,7 @@
     transition: max-height 0.15s ease-out;
 
     &--content {
-        text-align: center;
         min-height: 400px;
-        width: 1100px;
         padding: 20px;
     }
 }

client/src/core-components/widget-transition.scss

@@ -1,7 +1,6 @@
 .widget-transition {
     position: relative;
     display: inline-block;
-    min-width: 324px;
 
     &--widget {
         display: inline-block;

client/src/core-components/widget.scss

@@ -6,7 +6,7 @@
     text-align: center;
     padding: 20px;
     min-width: 324px;
-    min-height: 327px;
+    min-height: 361px;
 
     &--title {
         text-transform: uppercase;