spinners in forms

button wide

js/components/ascribe_detail/edition.js

@@ -81,7 +81,7 @@ let Edition = React.createClass({
                 </Col>
                 <Col md={6} className="ascribe-edition-details">
                     <div className="ascribe-detail-header">
-                        <hr/>
+                        <hr style={{marginTop: 0}}/>
                         <h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
                         <EditionDetailProperty label="BY" value={this.props.edition.artist_name} />
                         <EditionDetailProperty label="DATE" value={ this.props.edition.date_created.slice(0, 4) } />

js/components/ascribe_forms/create_editions_form.js

@@ -8,6 +8,7 @@ import Property from '../ascribe_forms/property';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
+import AscribeSpinner from '../ascribe_spinner';
 import ApiUrls from '../../constants/api_urls';
 
 import { getLangText } from '../../utils/lang_utils';
@@ -43,12 +44,12 @@ let CreateEditionsForm = React.createClass({
                 buttons={
                     <button
                         type="submit"
-                        className="btn ascribe-btn ascribe-btn-login">
+                        className="btn btn-default btn-wide">
                         {getLangText('Create editions')}
                     </button>}
                 spinner={
-                    <button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <button className="btn btn-default btn-wide btn-spinner">
-                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                        <AscribeSpinner color="dark-blue" size="md" />
                     </button>
                     }>
                 <Property

js/components/ascribe_forms/form_contract_agreement.js

@@ -15,6 +15,7 @@ import PropertyCollapsible from './property_collapsible';
 import InputTextAreaToggable from './input_textarea_toggable';
 
 import ApiUrls from '../../constants/api_urls';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
@@ -100,12 +101,12 @@ let ContractAgreementForm = React.createClass({
                     handleSuccess={this.handleSubmitSuccess}
                     buttons={<button
                                 type="submit"
-                                className="btn ascribe-btn ascribe-btn-login">
+                                className="btn btn-default btn-wide">
                                 {getLangText('Send contract')}
                             </button>}
                     spinner={
-                        <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <span className="btn btn-default btn-wide btn-spinner">
-                            <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                            <AscribeSpinner color="dark-blue" size="md" />
                         </span>
                         }>
                     <div className="ascribe-form-header">

js/components/ascribe_forms/form_loan.js

@@ -191,7 +191,7 @@ let LoanForm = React.createClass({
             return (
                 <button
                     type="submit"
-                    className="btn ascribe-btn ascribe-btn-login">
+                    className="btn btn-default btn-wide">
                     {getLangText('Finish process')}
                 </button>
             );

js/components/ascribe_forms/form_login.js

@@ -14,6 +14,7 @@ import Property from './property';
 
 import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -125,12 +126,12 @@ let LoginForm = React.createClass({
                 buttons={
                     <button
                         type="submit"
-                        className="btn ascribe-btn ascribe-btn-login">
+                        className="btn btn-default btn-wide">
                         {this.props.submitMessage}
                     </button>}
                 spinner={
-                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn btn-default btn-wide btn-spinner">
-                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                        <AscribeSpinner color="dark-blue" size="md" />
                     </span>
                     }>
                 <div className="ascribe-form-header">

js/components/ascribe_forms/form_register_piece.js

@@ -11,6 +11,7 @@ import InputFineUploader from './input_fineuploader';
 
 import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 import { mergeOptions } from '../../utils/general_utils';
@@ -83,14 +84,14 @@ let RegisterPieceForm = React.createClass({
                 buttons={
                     <button
                         type="submit"
-                        className="btn ascribe-btn ascribe-btn-login"
+                        className="btn btn-default btn-wide"
                         disabled={!this.state.isUploadReady || this.props.disabled}>
                         {this.props.submitMessage}
                     </button>
                 }
                 spinner={
-                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn btn-default btn-wide btn-spinner">
-                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                        <AscribeSpinner color="dark-blue" size="md" />
                     </span>
                     }>
                 <div className="ascribe-form-header">

js/components/ascribe_forms/form_signup.js

@@ -3,8 +3,6 @@
 import React from 'react';
 import Router from 'react-router';
 
-import { getLangText } from '../../utils/lang_utils';
-
 import UserStore from '../../stores/user_store';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
@@ -16,6 +14,9 @@ import InputCheckbox from './input_checkbox';
 
 import AppConstants from '../../constants/application_constants';
 import ApiUrls from '../../constants/api_urls';
+import AscribeSpinner from '../ascribe_spinner';
+
+import { getLangText } from '../../utils/lang_utils';
 
 
 let SignupForm = React.createClass({
@@ -109,12 +110,12 @@ let SignupForm = React.createClass({
                 getFormData={this.getFormData}
                 handleSuccess={this.handleSuccess}
                 buttons={
-                    <button type="submit" className="btn ascribe-btn ascribe-btn-login">
+                    <button type="submit" className="btn btn-default btn-wide">
                         {this.props.submitMessage}
                     </button>}
                 spinner={
-                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn btn-default btn-wide btn-spinner">
-                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                        <AscribeSpinner color="dark-blue" size="md" />
                     </span>
                     }>
                 <div className="ascribe-form-header">

js/components/ascribe_forms/property.js

@@ -125,6 +125,17 @@ let Property = React.createClass({
         }
     },
 
+    isDescendant(parent, child) {
+        let node = child.parentNode;
+        while (node != null) {
+        if (node === parent) {
+            return true;
+        }
+            node = node.parentNode;
+        }
+        return false;
+    },
+
     handleChange(event) {
         this.props.handleChange(event);
         if (typeof this.props.onChange === 'function') {
@@ -154,6 +165,13 @@ let Property = React.createClass({
     },
 
     handleBlur(event) {
+        let e = event.toElement || event.relatedTarget;
+        if (this.isDescendant(this.getDOMNode(), e)){
+            return;
+        }
+        if (this.refs.input.getDOMNode() === document.activeElement) {
+            return;
+        }
         this.setState({
             isFocused: false
         });
@@ -208,7 +226,7 @@ let Property = React.createClass({
                 style,
                 onChange: this.handleChange,
                 onFocus: this.handleFocus,
-                onBlur: this.handleBlur,
+                onClick: this.handleClick,
                 disabled: !this.props.editable,
                 ref: 'input'
             });
@@ -242,7 +260,8 @@ let Property = React.createClass({
             <div
                 className={'ascribe-property-wrapper ' + this.getClassName()}
                 onClick={this.handleFocus}
-                onFocus={this.handleFocus}
+                onMouseOut={this.handleBlur}
+                onMouseOver={this.handleBlur}
                 style={style}>
                 <OverlayTrigger
                     delay={500}

js/components/coa_verify_container.js

@@ -10,6 +10,8 @@ import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
 import InputTextAreaToggable from './ascribe_forms/input_textarea_toggable';
 
+import AscribeSpinner from './ascribe_spinner';
+
 import ApiUrls from '../constants/api_urls';
 import { getLangText } from '../utils/lang_utils';
 
@@ -64,12 +66,12 @@ let CoaVerifyForm = React.createClass({
                     buttons={
                         <button
                             type="submit"
-                            className="btn ascribe-btn ascribe-btn-login">
+                            className="btn btn-default btn-wide">
                             {getLangText('Verify your Certificate of Authenticity')}
                         </button>}
                     spinner={
-                        <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                        <span className="btn btn-default btn-wide btn-spinner">
-                            <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                            <AscribeSpinner color="dark-blue" size="md" />
                         </span>
                         }>
                     <Property

js/components/password_reset_container.js

@@ -6,6 +6,7 @@ import Router from 'react-router';
 import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
 import ApiUrls from '../constants/api_urls';
+import AscribeSpinner from './ascribe_spinner';
 
 import GlobalNotificationModel from '../models/global_notification_model';
 import GlobalNotificationActions from '../actions/global_notification_actions';
@@ -80,12 +81,12 @@ let PasswordRequestResetForm = React.createClass({
                 buttons={
                     <button
                         type="submit"
-                        className="btn ascribe-btn ascribe-btn-login">
+                        className="btn btn-default btn-wide">
                         {getLangText('Reset your password')}
                     </button>}
                 spinner={
-                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn btn-default btn-wide btn-spinner">
-                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                        <AscribeSpinner color="dark-blue" size="md" />
                     </span>
                     }>
                 <div className="ascribe-form-header">
@@ -138,12 +139,12 @@ let PasswordResetForm = React.createClass({
                 buttons={
                     <button
                         type="submit"
-                        className="btn ascribe-btn ascribe-btn-login">
+                        className="btn btn-default btn-wide">
                         {getLangText('Reset your password')}
                     </button>}
                 spinner={
-                    <span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
+                    <span className="btn btn-default btn-wide btn-spinner">
-                        <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
+                        <AscribeSpinner color="dark-blue" size="md" />
                     </span>
                     }>
                 <div className="ascribe-form-header">

js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js

@@ -84,7 +84,7 @@ let CylandAdditionalDataForm = React.createClass({
             buttons = (
                 <button
                     type="submit"
-                    className="btn ascribe-btn ascribe-btn-login"
+                    className="btn btn-default btn-wide"
                     disabled={!this.state.isUploadReady || disabled}>
                     {getLangText('Proceed to loan')}
                 </button>

js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js

@@ -66,7 +66,7 @@ let IkonotvArtistDetailsForm = React.createClass({
             buttons = (
                 <button
                     type="submit"
-                    className="btn ascribe-btn ascribe-btn-login"
+                    className="btn btn-default btn-wide"
                     disabled={this.props.disabled}>
                     {getLangText('Proceed to loan')}
                 </button>

js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js

@@ -65,7 +65,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
             buttons = (
                 <button
                     type="submit"
-                    className="btn ascribe-btn ascribe-btn-login"
+                    className="btn btn-default btn-wide"
                     disabled={this.props.disabled}>
                     {getLangText('Proceed to artist details')}
                 </button>

sass/ascribe_custom_style.scss

@@ -16,26 +16,31 @@ $ascribe--nav-bg-color: $ascribe-dark-blue;
 $ascribe--button-default-color: $ascribe--bg-color;
 $ascribe--button-secondary-fg-color: $ascribe--bg-color;
 $ascribe--button-secondary-bg-color: white;
-$ascribe--font-weight: 300;
+
 $ascribe--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png';
-$ascribe--font: 'canada-type-gibson';
+
+$ascribe--font: 'canada-type-gibson', sans-serif !important;
+$ascribe--font-weight: 300 !important;
 
 html,
 body {
-    //font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
+    font-family: $ascribe--font;
-    font-family: 'canada-type-gibson', sans-serif !important;
+    font-weight: $ascribe--font-weight;
-    font-weight: $ascribe--font-weight !important;
     background-color: #fcfcfc !important;
 }
 h1, h3 {
-    font-family: 'canada-type-gibson', sans-serif !important;
+    font-family: $ascribe--font;
-    font-weight: $ascribe--font-weight !important;
+    font-weight: $ascribe--font-weight;
 }
 
 h1 {
     font-size: 30px;
 }
 
+hr {
+    border-top: 1px solid $ascribe-blue-border;
+}
+
 .nav .open > a,
 .nav .open > a:hover,
 .nav .open > a:focus {
@@ -219,17 +224,15 @@ h1 {
 .route--login,
 .route--signup {
 
-    .ascribe-btn-login {
+    .btn-wide {
         display: block;
         margin: 50px auto 0;
         width: auto;
         padding: 10px 30px;
         text-transform: uppercase;
-        font-weight: bold;
-        width: 180px;
     }
 
-    .ascribe-btn-login-spinner {
+    .btn-spinner {
         background-color: $ascribe--button-default-color;
     }
 
@@ -384,7 +387,21 @@ fieldset[disabled] .btn-default.active {
     }
 }
 
-.ascribe-btn-login,
+.btn-wide {
+    font-weight: $ascribe--font-weight;
+}
+
+.btn-spinner, .btn-spinner:hover {
+    background-color: $ascribe--button-default-color;
+    border-color: $ascribe--button-default-color;
+    [class^="spinner-wrapper-"] {
+        color: white;
+        .spinner-circle {
+            border-color: white;
+        }
+    }
+}
+
 .btn-default {
     background-color: $ascribe--button-default-color;
     border-color: $ascribe--button-default-color;
@@ -398,8 +415,8 @@ fieldset[disabled] .btn-default.active {
     &.active:hover,
     &.active:focus,
     &.active.focus {
-        background-color: darken($ascribe--button-default-color, 20%);
+        background-color: lighten($ascribe--button-default-color, 20%);
-        border-color: darken($ascribe--button-default-color, 20%);
+        border-color: lighten($ascribe--button-default-color, 20%);
     }
 }
 
@@ -504,11 +521,6 @@ fieldset[disabled] .btn-secondary.active {
         font-style: normal;
     }
 
-    //input::-webkit-input-placeholder { color:transparent }
-    //input::-moz-placeholder { color:transparent; } /* firefox 19+ */
-    //input:-ms-input-placeholder { color:transparent; } /* ie */
-    //input:-moz-placeholder { color:transparent; }
-
 }
 
 .ascribe-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before,
@@ -516,6 +528,14 @@ fieldset[disabled] .btn-secondary.active {
     color: $ascribe--button-default-color;
 }
 
+.ascribe-form-header {
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.ascribe-form-bordered {
+    border-color: transparent;
+}
 
 // properties!
 .is-focused {
@@ -523,14 +543,78 @@ fieldset[disabled] .btn-secondary.active {
     background-color: rgba($ascribe--button-default-color, .05);
 }
 .ascribe-property-wrapper:hover {
-    border-left-color: rgba($ascribe--button-default-color, .5);
+    //border-left-color: rgba($ascribe--button-default-color, .5);
+    border-left-color: rgba($ascribe-blue, .5);
 }
 
 .ascribe-accordion-list-item .wrapper:hover {
     background-color: rgba($ascribe--button-default-color, .05);
 }
 
+.ascribe-property {
+    > div,
+    > input,
+    > pre,
+    > select,
+    > span:not(.glyphicon),
+    > textarea {
+        font-family: $ascribe--font;
+        font-weight: $ascribe--font-weight;
+    }
+    > div {
+        > div:not(.file-drag-and-drop div) {
+            font-family: $ascribe--font;
+            font-weight: $ascribe--font-weight;
+        }
+    }
+    > span:not(.glyphicon) {
+        color: $ascribe-pink;
+        //font-weight: normal !important;
+    }
 
+    textarea::-webkit-input-placeholder {
+        color: rgba($ascribe-dark-blue, 0.5);
+        font-style: normal;
+    }
+    textarea::-moz-placeholder {
+        color: rgba($ascribe-dark-blue, 0.5);
+        font-style: normal;
+    }
+    /* firefox 19+ */
+    textarea:-ms-input-placeholder {
+        color: rgba($ascribe-dark-blue, 0.5);
+        font-style: normal;
+    }
+    /* ie */
+    textarea:-moz-placeholder {
+        color: rgba($ascribe-dark-blue, 0.5);
+        font-style: normal;
+    }
+
+    input::-webkit-input-placeholder {
+        color: rgba($ascribe-dark-blue, 0.5);
+        font-style: normal;
+    }
+    input::-moz-placeholder {
+        color: rgba($ascribe-dark-blue, 0.5);
+        font-style: normal;
+    }
+    /* firefox 19+ */
+    input:-ms-input-placeholder {
+        color: rgba($ascribe-dark-blue, 0.5);
+        font-style: normal;
+    }
+    /* ie */
+    input:-moz-placeholder {
+        color: rgba($ascribe-dark-blue, 0.5);
+        font-style: normal;
+    }
+}
+
+// panel
+.ascribe-panel-wrapper {
+    border: 1px solid $ascribe-blue-border;
+}
 // intercom stuff
 #intercom-container .intercom-launcher-button {
     background-color: $ascribe--button-default-color !important;

sass/ascribe_login.scss

@@ -1,28 +1,18 @@
 $break-small: 764px;
 
 
-.ascribe-btn-login {
+.btn-wide {
     background-color: rgba(2, 182, 163, 1);
-    border: none;
-    border-radius: 0;
     color: white;
     font-size: 1.2em;
-    font-weight: 500;
     padding: .5em;
     text-align: center;
     width: 100%;
     //margin-left: 1.2em;
 
-    &:hover {
-        opacity: .3;
-        border: 0;
-        color: white;
-    }
-
     &:active,
     &:focus {
         background-color: rgba(2, 182, 163, .6);
-        border: 0;
         color: white;
     }
 
@@ -31,7 +21,7 @@ $break-small: 764px;
     }
 }
 
-.ascribe-btn-login-spinner {
+.btn-spinner {
     background-color: rgba(2, 182, 163, .4);
     padding: .4em;
 

sass/main.scss

@@ -172,51 +172,6 @@ hr {
         border: 1px solid $ascribe-brand-danger;
     }
 }
-.btn-ascribe {
-    border: 1px solid #444;
-    border-radius: 0 !important;
-    font-family: sans-serif !important;
-    line-height: 2em;
-    margin-left: 0 !important;
-    font-family: sans-serif !important;
-    border-radius: 0 !important;
-    color: #222 !important;
-}
-
-.btn-ascribe:active, .btn-ascribe:hover {
-    color: #FFF !important;
-    background-color: #444;
-}
-
-.btn-ascribe-sm {
-    font-size: 12px;
-    line-height: 1.3em;
-}
-
-.btn-ascribe-green,
-.btn-ascribe-green-inv {
-    border: 1px solid #48dacb;
-    border-radius: 0 !important;
-    font-family: sans-serif !important;
-    line-height: 2em;
-    margin-left: 0 !important;
-}
-
-.btn-ascribe-green,
-.btn-ascribe-green-inv:active,
-.btn-ascribe-green-inv:hover {
-    background-color: #fff;
-    border: 1px solid rgba(2, 182, 163, .5);
-    color: rgba(2, 182, 163, 0.5);
-}
-
-.btn-ascribe-green:active,
-.btn-ascribe-green:hover,
-.btn-ascribe-green-inv {
-    background-color: rgba(2, 182, 163, .5);
-    border: 1px solid rgba(2, 182, 163, .5);
-    color: white;
-}
 
 .ascribe-detail-title {
     font-size: 2em;

sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss

@@ -105,7 +105,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
 .client--ikonotv .route--signup {
     background-color: $ikono--landing-bg-color;
 
-    .ascribe-btn-login {
+    .btn-wide {
         display: block;
         margin: 50px auto 0;
         width: auto;
@@ -115,7 +115,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
         width: 180px;
     }
 
-    .ascribe-btn-login-spinner {
+    .btn-spinner {
         background-color: $ikono--button-color;
     }
 
@@ -348,7 +348,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
         }
     }
 
-    .ascribe-btn-login,
+    .btn-wide,
     .btn-default {
         background-color: $ikono--button-color;
         border-color: $ikono--button-color;