loan form styled,

overlay styled

js/components/ascribe_forms/form_loan.js

@@ -28,8 +28,8 @@ let LoanForm = React.createClass({
             bitcoin_id: this.getBitcoinIds().join(),
             loanee: this.refs.loanee.state.value,
             gallery_name: this.refs.gallery_name.state.value,
-            startdate: this.refs.startdate.state.value.format("YYYY-MM-DD"),
+            startdate: this.refs.startdate.state.value_formatted,
-            enddate: this.refs.enddate.state.value.format("YYYY-MM-DD"),
+            enddate: this.refs.enddate.state.value_formatted,
             loan_message: this.refs.loan_message.state.value,
             password: this.refs.password.state.value,
             terms: this.refs.terms.state.value
@@ -102,12 +102,12 @@ ${username}`;
                     type="text"
                     submitted={this.state.submitted}/>
                 <div className="row">
-                    <div className="col-md-6">
+                    <div className="col-xs-6">
                         <InputDate
                             ref="startdate"
                             placeholderText="Loan start date" />
                     </div>
-                    <div className="col-md-6 form-group">
+                    <div className="col-xs-6 form-group">
                         <InputDate
                             ref="enddate"
                             placeholderText="Loan end date" />

js/components/ascribe_forms/input_date.js

@@ -9,42 +9,31 @@ let InputDate = React.createClass({
 
     getInitialState() {
         return {value: null,
+                value_formatted: null,
                 alerts: null // needed in AlertMixin
         };
     },
 
     handleChange(date) {
-        this.setState({value: date});
+        this.setState({
+            value: date,
+            value_formatted: date.format("YYYY-MM-DD")});
     },
 
     render: function () {
         let className = "form-control input-text-ascribe";
         let alerts = (this.props.submitted) ? null : this.state.alerts;
         return (
+            <div className="form-group">
+                {alerts}
                 <DatePicker
                     key="example2"
                     dateFormat="YYYY-MM-DD"
                     selected={this.state.value}
                     onChange={this.handleChange}
-                 placeholderText={this.props.placeholderText}
+                    placeholderText={this.props.placeholderText}/>
-              />
+            </div>
         );
-        //return (
-        //    <div className="input-group date"
-        //        ref={this.props.name + "_picker"}
-        //        onChange={this.handleChange}>
-        //        <input className={className}
-        //            ref={this.props.name}
-        //            placeholder={this.props.placeholder}
-        //            required={this.props.required}
-        //            type="text"/>
-        //        <span className="input-group-addon input-text-ascribe">
-        //            <span className="glyphicon glyphicon-calendar" style={{"color": "black"}}></span>
-        //        </span>
-        //    </div>
-        //)
-
-
     }
 });
 

js/mixins/form_mixin.js

@@ -8,7 +8,6 @@ export const FormMixin = {
     getInitialState() {
         return {
             submitted: false
-            , status: null
             , errors: []
         }
     },
@@ -16,12 +15,18 @@ export const FormMixin = {
     submit(e) {
         e.preventDefault();
         this.setState({submitted: true});
+        this.clearErrors();
         fetch
             .post(this.url(), { body: this.getFormData() })
             .then(response => { this.props.handleSuccess(); })
             .catch(this.handleError);
     },
-
+    clearErrors(){
+        for (var ref in this.refs){
+            this.refs[ref].clearAlerts();
+        }
+        this.setState({errors:[]});
+    },
     handleError(err){
         if (err.json) {
             for (var input in err.json.errors){

sass/ascribe_piece_list_bulk_modal.scss

@@ -11,7 +11,7 @@
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     border-bottom: 0.2em solid #E0E0E0;
-    z-index:9999;
+    z-index:1041; // between overlay and modal
 }
 
 .piece-list-bulk-modal-clear-all {

sass/main.scss

@@ -173,6 +173,7 @@
     background: transparent;
     border-radius: 0 !important;
     box-shadow: none;
+    width: 100%;
 }
 
 .textarea-ascribe-message {