Dimi and Tim styling action

js/components/settings_container.js

@@ -14,6 +14,8 @@ import WalletSettingsStore from '../stores/wallet_settings_store';
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
 
+import Input from 'react-bootstrap/lib/Input';
+
 import classNames from 'classnames';
 
 let SettingsContainer = React.createClass({
@@ -123,6 +125,8 @@ const CollapsibleParagraph = React.createClass({
 });
 
 let SettingsProperty = React.createClass({
+
+    
     propTypes: {
         label: React.PropTypes.string,
         value: React.PropTypes.oneOfType([
@@ -142,28 +146,51 @@ let SettingsProperty = React.createClass({
         };
     },
 
-    //render() {
+    getInitialState() {
-    //    return (
+        return {
-    //        <div className="row ascribe-detail-property">
+            value: '',
-    //            <div className="row-same-height">
+            isFocused: false
-    //                <div className={this.props.labelClassName + ' col-xs-height col-bottom'}>
+        };
-    //                    <pre>{ this.props.label + this.props.separator}</pre>
+    },
-    //                </div>
+
-    //                <div className={this.props.valueClassName + ' col-xs-height col-bottom'}>
+    componentWillReceiveProps() {
-    //                    <pre>{ this.props.value }</pre>
+        this.setState({
-    //                </div>
+            value: this.props.value
-    //            </div>
+        });
-    //        </div>
+    },
-    //    );
+
-    //}
+    handleChange(event) {
+        this.setState({value: event.target.value});
+    },
+
+    handleFocus() {
+        console.log(this.state);
+        this.refs.input.getDOMNode().focus();
+        this.setState({
+            isFocused: !this.state.isFocused
+        });
+    },
+
+    getClassName() {
+        if(this.state.isFocused) {
+            return 'is-focused';
+        } else {
+            return '';
+        }
+    },
+
     render() {
         return (
-            <div className="row ascribe-detail-property">
+            <div 
-                <div className="row-same-height">
+                className={'ascribe-settings-wrapper ' + this.getClassName()}
-                    <label>
+                onClick={this.handleFocus}>
-                        <span>{ this.props.label + this.props.separator}</span>
+                <div className="ascribe-settings-property">
-                        <input type="text" disabled>{ this.props.value }</input>
+                    <span>{ this.props.label}</span>
-                    </label>
+                    <input
+                        ref="input"
+                        type="text"
+                        value={this.state.value}
+                        onChange={this.handleChange} />
                 </div>
             </div>
         );
@@ -180,8 +207,8 @@ let AccountSettings = React.createClass({
 
         return (
             <div>
-                <SettingsProperty label="Username" value={this.props.currentUser.username}/>
+                <SettingsProperty key={1} label="Username" value={this.props.currentUser.username}/>
-                <SettingsProperty label="Email" value={this.props.currentUser.email}/>
+                <SettingsProperty key={2} label="Email" value={this.props.currentUser.email}/>
             </div>
         );
     }

node_modules/react-s3-fineuploader

@@ -0,0 +1 @@
+Subproject commit 2161e28e1bf5f69719c8b376ecb24fd3334806ba

sass/ascribe_accordion_list.scss

@@ -2,7 +2,7 @@ $ascribe-accordion-list-item-height: 8em;
 $ascribe-accordion-list-font: 'Source Sans Pro';
 
 .ascribe-accordion-list-item {
-    background-color: rgba(0,0,0,0.004);
+    background-color: white;
     border: 1px solid black;
     height: $ascribe-accordion-list-item-height;
 
@@ -11,11 +11,11 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
 
     overflow:hidden;
 
-    border-left: 0.1em solid #E0E0E0;
+    border-left: 0.1em solid rgba(0,0,0,.2);
-    border-right: 0.1em solid #E0E0E0;
+    border-right: 0.1em solid rgba(0,0,0,.2);
-    border-top: 0.1em solid #E0E0E0;
+    border-top: 0.1em solid rgba(0,0,0,.2);
-    border-radius: 5px;
+    border-radius: 1px;
-    border-bottom: 0.2em solid #E0E0E0;
+    border-bottom: 0.1em solid rgba(0,0,0,.2);
     .wrapper {
         width:100%;
         height:100%;
@@ -50,15 +50,16 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
 }
 
 .ascribe-accordion-list-item-table {
+    font-size: .9em;
     text-align: center;
     margin-bottom: 3em;
-    background-color: rgba(0,0,0,0.004);
+    background-color: white;
 
-    border-bottom-left-radius: 4px;
+    border-bottom-left-radius: 1px;
-    border-bottom-right-radius: 4px;
+    border-bottom-right-radius: 1px;
-    border-bottom: 0.15em solid #E0E0E0;
+    border-bottom: 0.1em solid rgba(0,0,0,.15);
-    border-left: 0.1em solid #E0E0E0;
+    border-left: 0.1em solid rgba(0,0,0,.2);
-    border-right: 0.1em solid #E0E0E0;
+    border-right: 0.1em solid rgba(0,0,0,.2);
 }
 
 span.ascribe-accordion-list-table-toggle {

sass/ascribe_settings.scss

@@ -0,0 +1,60 @@
+.ascribe-settings-wrapper {
+    width: 100%;
+    text-align: center;
+    padding-bottom: 1em;
+
+    background-color: white;
+
+    border-left: 3px solid rgba(0,0,0,0);
+
+    &:last-child {
+        border-bottom: 1px solid rgba(0,0,0,.2);
+    }
+}
+
+.is-focused {
+    background-color: rgba(2, 182, 163, 0.1);
+    border-left: 3px solid rgba(2, 182, 163, 1);
+}
+
+.ascribe-settings-property {
+    display: inline-block;
+    width: 100%;
+    text-align: left;
+    border-top: 1px solid rgba(0,0,0,.2);
+
+    padding-top: 1em;
+    padding-left: 1.5em;
+
+    cursor:pointer;
+
+    span {
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-weight: normal;
+        font-size: 1em;
+        color: rgba(0,0,0,.7);
+    }
+
+    input {
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-weight: 400;
+        font-size: 1.1em;
+        width:100%;
+        margin-top: .7em;
+        border: 0;
+        background-color: rgba(0,0,0,0);
+        color: #38BAAD;
+
+        &:focus {
+            border:0;
+            outline:0;
+        }
+
+        &::selection {
+            color: white;
+            background-color: rgba(0,0,0,1);
+        }
+
+    }
+
+}

sass/main.scss

@@ -18,6 +18,12 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_media_player';
 @import 'ascribe-global-notification';
 @import 'offset_right';
+@import 'ascribe_settings';
+
+body {
+    background-color: #FDFDFD;
+    border-radius: 0;
+}
 
 .hidden {
     display: none;

sass/variables.scss

@@ -365,7 +365,7 @@ $navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2
 $navbar-collapse-max-height:       340px !default;
 
 $navbar-default-color:             #777 !default;
-$navbar-default-bg:                white !default;
+$navbar-default-bg:                #FDFDFD !default;
 $navbar-default-border:            #616161;
 
 // Navbar links