From c54bbe231f5807313b2a48b08a9ecb0755dc5f8a Mon Sep 17 00:00:00 2001
From: diminator <dimi.dejonghe@gmail.com>
Date: Wed, 15 Jul 2015 13:20:34 +0200
Subject: [PATCH] width styling of forms

---
 js/components/password_reset_container.js | 14 +++++++-------
 js/components/settings_container.js       |  6 +++---
 sass/ascribe_settings.scss                |  4 ++++
 sass/main.scss                            |  5 +++++
 sass/whitelabel/prize/landing.scss        |  3 ++-
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/js/components/password_reset_container.js b/js/components/password_reset_container.js
index 478b4252..20851632 100644
--- a/js/components/password_reset_container.js
+++ b/js/components/password_reset_container.js
@@ -5,7 +5,7 @@ import Router from 'react-router';
 
 import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
-
+import FormPropertyHeader from './ascribe_forms/form_property_header';
 import apiUrls from '../constants/api_urls';
 
 import GlobalNotificationModel from '../models/global_notification_model';
@@ -25,9 +25,6 @@ let PasswordResetContainer = React.createClass({
         if (this.props.query.email && this.props.query.token) {
             return (
                 <div>
-                    <div className="ascribe-login-text ascribe-login-header">
-                        {getLangText('Reset the password for')} {this.props.query.email}
-                    </div>
                     <PasswordResetForm
                         email={this.props.query.email}
                         token={this.props.query.token}/>
@@ -38,9 +35,6 @@ let PasswordResetContainer = React.createClass({
             if (this.state.isRequested === false) {
                 return (
                     <div>
-                        <div className="ascribe-login-text ascribe-login-header">
-                            {getLangText('Reset your password')}
-                        </div>
                         <PasswordRequestResetForm
                             handleRequestSuccess={this.handleRequestSuccess}/>
                     </div>
@@ -86,6 +80,9 @@ let PasswordRequestResetForm = React.createClass({
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                     </span>
                     }>
+                <FormPropertyHeader>
+                    <h3>{getLangText('Reset your password')}</h3>
+                </FormPropertyHeader>
                 <Property
                     name='email'
                     label={getLangText('Email')}>
@@ -133,6 +130,9 @@ let PasswordResetForm = React.createClass({
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                     </span>
                     }>
+                <FormPropertyHeader>
+                    <h3>{getLangText('Reset the password for')} {this.props.email}</h3>
+                </FormPropertyHeader>
                 <Property
                     name='password'
                     label={getLangText('Password')}>
diff --git a/js/components/settings_container.js b/js/components/settings_container.js
index 5308c732..724e12ac 100644
--- a/js/components/settings_container.js
+++ b/js/components/settings_container.js
@@ -32,7 +32,7 @@ let SettingsContainer = React.createClass({
 
     render() {
         return (
-            <div>
+            <div className="settings-container">
                 <AccountSettings />
                 <APISettings />
                 <BitcoinWalletSettings />
@@ -297,10 +297,10 @@ let APISettings = React.createClass({
                         name={app.name}
                         label={app.name}>
                         <div className="row-same-height">
-                            <div className="no-padding col-xs-6 col-xs-height col-middle">
+                            <div className="no-padding col-xs-6 col-sm-10 col-xs-height col-middle">
                             {'Bearer ' + app.bearer_token.token}
                             </div>
-                            <div className="col-xs-6 col-xs-height">
+                            <div className="col-xs-6 col-sm-2 col-xs-height">
                                 <button
                                     className="pull-right btn btn-default btn-sm"
                                     onClick={this.handleTokenRefresh}
diff --git a/sass/ascribe_settings.scss b/sass/ascribe_settings.scss
index 8dd0b169..8243b387 100644
--- a/sass/ascribe_settings.scss
+++ b/sass/ascribe_settings.scss
@@ -1,3 +1,7 @@
+.settings-container{
+    max-width: 600px;
+    margin: auto;
+}
 
 .ascribe-settings-wrapper {
     width: 100%;
diff --git a/sass/main.scss b/sass/main.scss
index 1b92bf6b..a1f4258f 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -44,6 +44,11 @@ hr {
     margin-bottom: 15px;
 }
 
+form{
+    max-width: 600px;
+    margin: auto;
+}
+
 #main {
     height: 100%;
 }
diff --git a/sass/whitelabel/prize/landing.scss b/sass/whitelabel/prize/landing.scss
index 5f605376..98c44930 100644
--- a/sass/whitelabel/prize/landing.scss
+++ b/sass/whitelabel/prize/landing.scss
@@ -1,6 +1,7 @@
 .wp {
     height: 100%;
-
+    max-width: 90%;
+    margin: auto;
     /* We need this, otherwise piece list will have a scrollbar */
     overflow-x: hidden;
 }