replaced fonts

replaced spinners WIP

renamed settings-property to property

fonts/ascribe-logo.svg

@@ -7,12 +7,13 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe800;" glyph-name="icons_sortcopy2" d="M429.733 809.882l-139.567 150.118-139.6-150.118 25-23.283 97.5 104.887v-955.486h34.133v955.553l97.533-104.954zM848.433 109.401l-97.5-104.887v955.486h-34.133v-955.553l-97.533 104.954-25-23.283 139.567-150.118 139.6 150.118z" />
+<glyph unicode="&#xe800;" glyph-name="add" d="M1024 482.684h-477.316v477.316h-69.368v-477.316h-477.316v-69.368h477.316v-477.316h69.368v477.316h477.316z" />
-<glyph unicode="&#xe801;" glyph-name="icons_searchcopy2" d="M1021.1-36.711l-305.914 305.583c67.615 73.406 108.95 171.391 108.95 279.060 0 227.579-184.49 412.068-412.068 412.068s-412.068-184.489-412.068-412.068c0-227.578 184.489-412.068 412.068-412.068 107.625 0 205.576 41.3 278.972 108.866l305.927-305.597 24.133 24.156zM412.068 169.997c-208.394 0-377.935 169.541-377.935 377.935s169.541 377.935 377.935 377.935 377.935-169.54 377.935-377.935c0-208.394-169.541-377.935-377.935-377.935z" />
+<glyph unicode="&#xe801;" glyph-name="sort" d="M429.733 809.882l-139.567 150.118-139.6-150.118 25-23.283 97.5 104.887v-955.486h34.133v955.553l97.533-104.954zM848.433 109.401l-97.5-104.887v955.486h-34.133v-955.553l-97.533 104.954-25-23.283 139.567-150.118 139.6 150.118z" />
-<glyph unicode="&#xe802;" glyph-name="icons_filtercopy2" d="M0 960l384.89-534.756 8.722-489.244 184.119 174.521 0.324 314.724 445.947 534.756h-1024zM551.839 447.106c-5.109-6.126-7.91-13.849-7.919-21.826l-0.308-300.068-117.253-111.141-7.341 411.782c-0.124 6.948-2.365 13.692-6.424 19.331l-345.97 480.683h884.467l-399.251-478.761z" />
+<glyph unicode="&#xe802;" glyph-name="search" d="M1021.1-36.711l-305.914 305.583c67.615 73.406 108.95 171.391 108.95 279.060 0 227.579-184.49 412.068-412.068 412.068s-412.068-184.489-412.068-412.068c0-227.578 184.489-412.068 412.068-412.068 107.625 0 205.576 41.3 278.972 108.866l305.927-305.597 24.133 24.156zM412.068 169.997c-208.394 0-377.935 169.541-377.935 377.935s169.541 377.935 377.935 377.935 377.935-169.54 377.935-377.935c0-208.394-169.541-377.935-377.935-377.935z" />
-<glyph unicode="&#xe803;" glyph-name="icons_addwhitecopy2" d="M510.103 923.822c263.415 0 477.719-214.304 477.719-477.719s-214.303-477.718-477.719-477.718c-263.415 0-477.718 214.304-477.718 477.718s214.303 477.719 477.718 477.719zM510.103 957.955c-282.688 0-511.851-229.164-511.851-511.852s229.163-511.851 511.851-511.851 511.852 229.164 511.852 511.851-229.164 511.852-511.852 511.852v0zM796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
+<glyph unicode="&#xe803;" glyph-name="filter" d="M0 960l384.89-534.756 8.722-489.244 184.119 174.521 0.324 314.724 445.947 534.756h-1024zM551.839 447.106c-5.109-6.126-7.91-13.849-7.919-21.826l-0.308-300.068-117.253-111.141-7.341 411.782c-0.124 6.948-2.365 13.692-6.424 19.331l-345.97 480.683h884.467l-399.251-478.761z" />
-<glyph unicode="&#xe804;" d="M512.148 959.852c-282.688 0-511.851-229.164-511.851-511.852s229.164-511.851 511.851-511.851 511.852 229.163 511.852 511.851-229.164 511.852-511.852 511.852z" />
+<glyph unicode="&#xe804;" glyph-name="add-white" d="M510.103 923.822c263.415 0 477.719-214.304 477.719-477.719s-214.303-477.718-477.719-477.718c-263.415 0-477.718 214.304-477.718 477.718s214.303 477.719 477.718 477.719zM510.103 957.955c-282.688 0-511.851-229.164-511.851-511.852s229.163-511.851 511.851-511.851 511.852 229.164 511.852 511.851-229.164 511.852-511.852 511.852v0zM796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
-<glyph unicode="&#xe805;" d="M796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
+<glyph unicode="&#xe805;" d="M512.148 959.852c-282.688 0-511.851-229.164-511.851-511.852s229.164-511.851 511.851-511.851 511.852 229.163 511.852 511.851-229.164 511.852-511.852 511.852z" />
-<glyph unicode="&#xe806;" glyph-name="ascribe-icon" d="M550.306 782.458h-75.373l-249.184-613.64h90.453l62.951 159.627h262.477l62.974-159.627h95.755l-250.053 613.64zM403.098 400.255l107.305 274.897 107.28-274.897h-214.586zM1024 448c0 286.204-225.796 512-511.999 512s-512.001-225.796-512.001-512c0-286.204 225.797-512 512.001-512s511.999 225.797 511.999 512v0zM962.165 448c0-245.94-204.249-450.164-450.164-450.164-245.941 0-450.161 204.224-450.161 450.164s204.221 450.164 450.161 450.164c245.915 0 450.164-204.224 450.164-450.164v0z" />
+<glyph unicode="&#xe806;" d="M796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
-<glyph unicode="&#xe807;" glyph-name="ascribe-logo" horiz-adv-x="4195" d="M499.718 326.19c0 109.528-24.641 157.448-61.607 198.517-38.336 41.077-95.832 71.191-191.673 71.191-95.832 0-171.135-36.957-212.212-64.34l27.382-52.031c13.695 10.954 88.998 54.764 187.571 54.764 99.943 0 177.978-57.505 177.978-173.876v-34.225l-173.876-6.843c-171.135-6.852-253.281-82.146-253.281-191.673s88.989-191.674 212.212-191.674c123.214 0 191.674 75.294 214.944 102.676v-88.989h72.562v376.503zM427.156 113.978c-30.114-47.92-98.573-116.371-201.258-116.371-102.676 0-154.707 61.607-154.707 130.066 0 68.45 42.448 125.955 175.246 132.798l180.719 10.955v-157.448zM1063.784 123.562c0 120.482-119.12 161.551-198.525 188.933-78.035 27.382-146.494 56.134-146.494 121.853s50.661 101.314 121.853 101.314c71.191 0 115.001-24.641 158.819-72.561l43.809 43.809c-49.291 56.134-106.795 88.989-199.887 88.989-93.1 0-193.044-54.764-193.044-169.765s119.112-156.078 173.876-175.246c54.764-19.168 168.394-47.92 168.394-130.066s-69.821-120.482-149.226-120.482c-79.413 0-142.391 39.707-183.46 99.952l-50.661-41.077c39.707-65.718 113.639-123.215 231.38-123.215s223.166 68.451 223.166 187.562v0zM1679.873 93.44c0 0-68.451-93.1-212.212-93.1-143.753 0-242.326 113.639-242.326 271.087s112.268 260.132 239.594 260.132c125.955 0 180.719-61.616 208.101-93.1l45.18 47.912c-13.687 17.798-82.146 109.528-250.548 109.528-167.024 0-317.628-132.798-317.628-328.583 0-194.406 139.65-331.315 310.785-331.315s236.853 82.146 260.133 109.528l-41.077 47.912zM2142.607 586.323c0 0-27.382 9.576-68.45 9.576-68.459 0-138.28-43.81-161.551-130.058v119.112h-71.2v-635.266h71.2v342.278c0 109.528 34.225 162.921 45.18 177.978 10.946 15.066 47.912 57.505 109.528 57.505 34.225 0 53.394-5.473 68.451-10.955l6.843 69.83zM2353.432 810.851c0 32.855-26.012 58.875-58.867 58.875-32.863 0-58.875-26.020-58.875-58.875s26.011-58.875 58.875-58.875c32.855 0 58.867 26.020 58.867 58.875v0zM2330.161 584.953h-71.191v-635.266h71.191v635.266zM3144.767 267.315c0 188.941-123.223 328.583-312.155 328.583-91.73 0-177.987-36.957-239.594-132.798v431.267h-71.191v-944.68h71.191v120.482c53.394-93.1 141.012-134.169 236.853-134.169 191.673 0 314.896 143.753 314.896 331.315v0zM3069.464 267.315c0-146.494-86.257-266.976-239.594-266.976-154.707 0-239.594 120.482-239.594 266.976 0 147.864 84.887 266.976 239.594 266.976 153.337 0 239.594-119.112 239.594-266.976v0zM3836.158 298.808c0 171.135-120.482 297.090-287.514 297.090-168.402 0-308.044-132.798-308.044-328.583 0-194.406 119.112-331.315 303.933-331.315 184.83 0 264.244 95.833 264.244 95.833l-34.234 50.661c0 0-79.405-82.154-223.158-82.154-143.761 0-228.64 99.952-235.491 250.548h516.154c0 0 4.111 27.382 4.111 47.92v0zM3318.633 312.495c4.111 88.998 68.459 221.796 225.899 221.796 157.449 0 219.065-139.65 219.065-221.796h-444.963zM4027.755 897.194h-26.663l-88.15-217.077h31.998l22.269 56.468h92.852l22.277-56.468h33.874l-88.457 217.077zM3975.68 761.989l37.96 97.245 37.951-97.245h-75.91zM4195.326 778.878c0 101.246-79.876 181.122-181.121 181.122s-181.122-79.876-181.122-181.122c0-101.245 79.876-181.122 181.122-181.122s181.121 79.876 181.121 181.122v0zM4173.452 778.878c0-87.002-72.254-159.247-159.247-159.247-87.002 0-159.246 72.245-159.246 159.247s72.244 159.247 159.246 159.247c86.993 0 159.247-72.245 159.247-159.247v0z" />
+<glyph unicode="&#xe807;" glyph-name="icon" d="M550.306 782.458h-75.373l-249.184-613.64h90.453l62.951 159.627h262.477l62.974-159.627h95.755l-250.053 613.64zM403.098 400.255l107.305 274.897 107.28-274.897h-214.586zM1024 448c0 286.204-225.796 512-511.999 512s-512.001-225.796-512.001-512c0-286.204 225.797-512 512.001-512s511.999 225.797 511.999 512v0zM962.165 448c0-245.94-204.249-450.164-450.164-450.164-245.941 0-450.161 204.224-450.161 450.164s204.221 450.164 450.161 450.164c245.915 0 450.164-204.224 450.164-450.164v0z" />
+<glyph unicode="&#xe808;" glyph-name="logo" horiz-adv-x="4195" d="M499.718 326.19c0 109.528-24.641 157.448-61.607 198.517-38.336 41.077-95.832 71.191-191.673 71.191-95.832 0-171.135-36.957-212.212-64.34l27.382-52.031c13.695 10.954 88.998 54.764 187.571 54.764 99.943 0 177.978-57.505 177.978-173.876v-34.225l-173.876-6.843c-171.135-6.852-253.281-82.146-253.281-191.673s88.989-191.674 212.212-191.674c123.214 0 191.674 75.294 214.944 102.676v-88.989h72.562v376.503zM427.156 113.978c-30.114-47.92-98.573-116.371-201.258-116.371-102.676 0-154.707 61.607-154.707 130.066 0 68.45 42.448 125.955 175.246 132.798l180.719 10.955v-157.448zM1063.784 123.562c0 120.482-119.12 161.551-198.525 188.933-78.035 27.382-146.494 56.134-146.494 121.853s50.661 101.314 121.853 101.314c71.191 0 115.001-24.641 158.819-72.561l43.809 43.809c-49.291 56.134-106.795 88.989-199.887 88.989-93.1 0-193.044-54.764-193.044-169.765s119.112-156.078 173.876-175.246c54.764-19.168 168.394-47.92 168.394-130.066s-69.821-120.482-149.226-120.482c-79.413 0-142.391 39.707-183.46 99.952l-50.661-41.077c39.707-65.718 113.639-123.215 231.38-123.215s223.166 68.451 223.166 187.562v0zM1679.873 93.44c0 0-68.451-93.1-212.212-93.1-143.753 0-242.326 113.639-242.326 271.087s112.268 260.132 239.594 260.132c125.955 0 180.719-61.616 208.101-93.1l45.18 47.912c-13.687 17.798-82.146 109.528-250.548 109.528-167.024 0-317.628-132.798-317.628-328.583 0-194.406 139.65-331.315 310.785-331.315s236.853 82.146 260.133 109.528l-41.077 47.912zM2142.607 586.323c0 0-27.382 9.576-68.45 9.576-68.459 0-138.28-43.81-161.551-130.058v119.112h-71.2v-635.266h71.2v342.278c0 109.528 34.225 162.921 45.18 177.978 10.946 15.066 47.912 57.505 109.528 57.505 34.225 0 53.394-5.473 68.451-10.955l6.843 69.83zM2353.432 810.851c0 32.855-26.012 58.875-58.867 58.875-32.863 0-58.875-26.020-58.875-58.875s26.011-58.875 58.875-58.875c32.855 0 58.867 26.020 58.867 58.875v0zM2330.161 584.953h-71.191v-635.266h71.191v635.266zM3144.767 267.315c0 188.941-123.223 328.583-312.155 328.583-91.73 0-177.987-36.957-239.594-132.798v431.267h-71.191v-944.68h71.191v120.482c53.394-93.1 141.012-134.169 236.853-134.169 191.673 0 314.896 143.753 314.896 331.315v0zM3069.464 267.315c0-146.494-86.257-266.976-239.594-266.976-154.707 0-239.594 120.482-239.594 266.976 0 147.864 84.887 266.976 239.594 266.976 153.337 0 239.594-119.112 239.594-266.976v0zM3836.158 298.808c0 171.135-120.482 297.090-287.514 297.090-168.402 0-308.044-132.798-308.044-328.583 0-194.406 119.112-331.315 303.933-331.315 184.83 0 264.244 95.833 264.244 95.833l-34.234 50.661c0 0-79.405-82.154-223.158-82.154-143.761 0-228.64 99.952-235.491 250.548h516.154c0 0 4.111 27.382 4.111 47.92v0zM3318.633 312.495c4.111 88.998 68.459 221.796 225.899 221.796 157.449 0 219.065-139.65 219.065-221.796h-444.963zM4027.755 897.194h-26.663l-88.15-217.077h31.998l22.269 56.468h92.852l22.277-56.468h33.874l-88.457 217.077zM3975.68 761.989l37.96 97.245 37.951-97.245h-75.91zM4195.326 778.878c0 101.246-79.876 181.122-181.121 181.122s-181.122-79.876-181.122-181.122c0-101.245 79.876-181.122 181.122-181.122s181.121 79.876 181.121 181.122v0zM4173.452 778.878c0-87.002-72.254-159.247-159.247-159.247-87.002 0-159.246 72.245-159.246 159.247s72.244 159.247 159.246 159.247c86.993 0 159.247-72.245 159.247-159.247v0z" />
 </font></defs></svg>

js/components/ascribe_detail/edition.js

@@ -30,6 +30,7 @@ import Note from './note';
 
 import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -277,7 +278,7 @@ let CoaDetails = React.createClass({
         }
         return (
             <div className="text-center">
-                <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+                <AscribeSpinner color='dark-blue' size='lg'/>
             </div>
         );
     }

js/components/ascribe_detail/edition_container.js

@@ -7,8 +7,7 @@ import EditionStore from '../../stores/edition_store';
 
 import Edition from './edition';
 
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
-
 
 
 /**
@@ -70,7 +69,7 @@ let EditionContainer = React.createClass({
         } else {
             return (
                 <div className="fullpage-spinner">
-                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+                    <AscribeSpinner color='dark-blue' size='lg'/>
                 </div>
             );
         }

js/components/ascribe_detail/piece_container.js

@@ -35,7 +35,8 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 import Note from './note';
 
 import ApiUrls from '../../constants/api_urls';
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
+
 import { mergeOptions } from '../../utils/general_utils';
 import { getLangText } from '../../utils/lang_utils';
 
@@ -269,7 +270,7 @@ let PieceContainer = React.createClass({
         } else {
             return (
                 <div className="fullpage-spinner">
-                    <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />
+                    <AscribeSpinner color='dark-blue' size='lg'/>
                 </div>
             );
         }

js/components/ascribe_forms/form_consign.js

@@ -8,7 +8,7 @@ import Form from './form';
 import Property from './property';
 import InputTextAreaToggable from './input_textarea_toggable';
 
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 import { getLangText } from '../../utils/lang_utils.js';
 
 
@@ -43,7 +43,9 @@ let ConsignForm = React.createClass({
                     </div>}
                 spinner={
                     <div className="modal-footer">
-                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        <p className="pull-right">
+                            <AscribeSpinner color='dark-blue' size='md'/>
+                        </p>
                     </div>}>
                 <Property
                     name='consignee'

js/components/ascribe_forms/form_copyright_association.js

@@ -47,7 +47,7 @@ let CopyrightAssociationForm = React.createClass({
                     handleSuccess={this.handleSubmitSuccess}>
                     <Property
                         name="copyright_association"
-                        className="ascribe-settings-property-collapsible-toggle"
+                        className="ascribe-property-collapsible-toggle"
                         label={getLangText('Copyright Association')}
                         style={{paddingBottom: 0}}>
                         <select defaultValue={selectedState} name="contract">

js/components/ascribe_forms/form_delete_edition.js

@@ -5,7 +5,7 @@ import React from 'react';
 import Form from './form';
 
 import ApiUrls from '../../constants/api_urls';
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -55,7 +55,9 @@ let EditionDeleteForm = React.createClass({
                 }
                 spinner={
                     <div className="modal-footer">
-                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        <p className="pull-right">
+                            <AscribeSpinner color='dark-blue' size='md'/>
+                        </p>
                     </div>
                 }>
                 <p>{getLangText('Are you sure you would like to permanently delete this edition')}&#63;</p>

js/components/ascribe_forms/form_delete_piece.js

@@ -5,7 +5,7 @@ import React from 'react';
 import Form from '../ascribe_forms/form';
 
 import ApiUrls from '../../constants/api_urls';
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -46,7 +46,9 @@ let PieceDeleteForm = React.createClass({
                 }
                 spinner={
                     <div className="modal-footer">
-                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        <p className="pull-right">
+                            <AscribeSpinner color='dark-blue' size='md'/>
+                        </p>
                     </div>
                 }>
                 <p>{getLangText('Are you sure you would like to permanently delete this piece')}&#63;</p>

js/components/ascribe_forms/form_loan.js

@@ -15,7 +15,7 @@ import InputCheckbox from './input_checkbox';
 import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
 import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
 
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { mergeOptions } from '../../utils/general_utils';
 import { getLangText } from '../../utils/lang_utils';
@@ -141,7 +141,7 @@ let LoanForm = React.createClass({
                 return (
                     <Property
                         name="terms"
-                        className="ascribe-settings-property-collapsible-toggle"
+                        className="ascribe-sproperty-collapsible-toggle"
                         style={{paddingBottom: 0}}>
                         <InputCheckbox
                             key="terms_explicitly"
@@ -222,7 +222,9 @@ let LoanForm = React.createClass({
                 buttons={this.getButtons()}
                 spinner={
                     <div className="modal-footer">
-                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        <p className="pull-right">
+                            <AscribeSpinner color='dark-blue' size='md'/>
+                        </p>
                     </div>}>
                 <div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}>
                     <h3>{this.props.loanHeading}</h3>

js/components/ascribe_forms/form_remove_editions_from_collection.js

@@ -5,7 +5,7 @@ import React from 'react';
 import Form from './form';
 
 import ApiUrls from '../../constants/api_urls';
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -53,7 +53,9 @@ let EditionRemoveFromCollectionForm = React.createClass({
                 }
                 spinner={
                     <div className="modal-footer">
-                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        <p className="pull-right">
+                            <AscribeSpinner color='dark-blue' size='md'/>
+                        </p>
                     </div>
                 }>
                 <p>{getLangText('Are you sure you would like to remove these editions from your collection')}&#63;</p>

js/components/ascribe_forms/form_remove_piece_from_collection.js

@@ -5,7 +5,7 @@ import React from 'react';
 import Form from './form';
 
 import ApiUrls from '../../constants/api_urls';
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -46,7 +46,9 @@ let PieceRemoveFromCollectionForm = React.createClass({
                 }
                 spinner={
                     <div className="modal-footer">
-                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        <p className="pull-right">
+                            <AscribeSpinner color='dark-blue' size='md'/>
+                        </p>
                     </div>
                 }>
                 <p>{getLangText('Are you sure you would like to remove this piece from your collection')}&#63;</p>

js/components/ascribe_forms/form_share_email.js

@@ -8,7 +8,7 @@ import InputTextAreaToggable from './input_textarea_toggable';
 
 import Button from 'react-bootstrap/lib/Button';
 
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils.js';
 
@@ -47,7 +47,9 @@ let ShareForm = React.createClass({
                     </div>}
                 spinner={
                     <div className="modal-footer">
-                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        <p className="pull-right">
+                            <AscribeSpinner color='dark-blue' size='md'/>
+                        </p>
                     </div>}>
                 <Property
                     name='share_emails'

js/components/ascribe_forms/form_signup.js

@@ -153,7 +153,7 @@ let SignupForm = React.createClass({
                 {this.props.children}
                 <Property
                     name="terms"
-                    className="ascribe-settings-property-collapsible-toggle"
+                    className="ascribe-property-collapsible-toggle"
                     style={{paddingBottom: 0}}>
                     <InputCheckbox>
                         <span>

js/components/ascribe_forms/form_submit_to_prize.js

@@ -9,7 +9,7 @@ import InputCheckbox from './input_checkbox';
 
 import Alert from 'react-bootstrap/lib/Alert';
 
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 import ApiUrls from '../../constants/api_urls';
 
 import { getLangText } from '../../utils/lang_utils.js';
@@ -40,7 +40,9 @@ let PieceSubmitToPrizeForm = React.createClass({
                     </div>}
                 spinner={
                     <div className="modal-footer">
-                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        <p className="pull-right">
+                            <AscribeSpinner color='dark-blue' size='md'/>
+                        </p>
                     </div>}>
                 <Property
                     name='artist_statement'
@@ -64,7 +66,7 @@ let PieceSubmitToPrizeForm = React.createClass({
                 </Property>
                 <Property
                     name="terms"
-                    className="ascribe-settings-property-collapsible-toggle"
+                    className="ascribe-property-collapsible-toggle"
                     style={{paddingBottom: 0}}>
                     <InputCheckbox>
                         <span>

js/components/ascribe_forms/form_transfer.js

@@ -9,8 +9,8 @@ import Form from './form';
 import Property from './property';
 import InputTextAreaToggable from './input_textarea_toggable';
 
+import AscribeSpinner from '../ascribe_spinner';
 
-import AppConstants from '../../constants/application_constants';
 import { getLangText } from '../../utils/lang_utils.js';
 
 
@@ -48,7 +48,9 @@ let TransferForm = React.createClass({
                     </div>}
                 spinner={
                     <div className="modal-footer">
-                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        <p className="pull-right">
+                            <AscribeSpinner color='dark-blue' size='md'/>
+                        </p>
                     </div>}>
                 <Property
                     name='transferee'

js/components/ascribe_forms/form_unconsign.js

@@ -8,7 +8,7 @@ import Form from './form';
 import Property from './property';
 import InputTextAreaToggable from './input_textarea_toggable';
 
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 import { getLangText } from '../../utils/lang_utils.js';
 
 
@@ -45,7 +45,9 @@ let UnConsignForm = React.createClass({
                     </div>}
                 spinner={
                     <div className="modal-footer">
-                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        <p className="pull-right">
+                            <AscribeSpinner color='dark-blue' size='md'/>
+                        </p>
                     </div>}>
                 <Property
                     name='unconsign_message'

js/components/ascribe_forms/form_unconsign_request.js

@@ -8,8 +8,7 @@ import Form from './form';
 import Property from './property';
 import InputTextAreaToggable from './input_textarea_toggable';
 
-
+import AscribeSpinner from '../ascribe_spinner';
-import AppConstants from '../../constants/application_constants';
 import { getLangText } from '../../utils/lang_utils.js';
 
 
@@ -45,7 +44,11 @@ let UnConsignRequestForm = React.createClass({
                     </div>}
                 spinner={
                     <div className="modal-footer">
-                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                        <div className="modal-footer">
+                            <p className="pull-right">
+                                <AscribeSpinner color='dark-blue' size='md'/>
+                            </p>
+                        </div>
                     </div>}>
                 <Property
                     name='unconsign_request_message'

js/components/ascribe_forms/property.js

@@ -240,7 +240,7 @@ let Property = React.createClass({
 
         return (
             <div
-                className={'ascribe-settings-wrapper ' + this.getClassName()}
+                className={'ascribe-property-wrapper ' + this.getClassName()}
                 onClick={this.handleFocus}
                 onFocus={this.handleFocus}
                 style={style}>
@@ -248,7 +248,7 @@ let Property = React.createClass({
                     delay={500}
                     placement="top"
                     overlay={tooltip}>
-                    <div className={'ascribe-settings-property ' + this.props.className}>
+                    <div className={'ascribe-property ' + this.props.className}>
                         {this.state.errors}
                         <span>{this.props.label}</span>
                         {this.renderChildren(style)}

js/components/ascribe_forms/property_collapsible.js

@@ -62,14 +62,14 @@ let PropertyCollapsile = React.createClass({
 
         return (
             <div
-                className={'ascribe-settings-wrapper'}
+                className={'ascribe-property-wrapper'}
                 style={style}>
                 <OverlayTrigger
                     delay={500}
                     placement="top"
                     overlay={tooltip}>
                     <div
-                        className="ascribe-settings-property-collapsible-toggle"
+                        className="ascribe-property-collapsible-toggle"
                         onClick={this.handleFocus}
                         onFocus={this.handleFocus}>
                         <input
@@ -84,7 +84,7 @@ let PropertyCollapsile = React.createClass({
                     collapsible
                     expanded={this.state.show}
                     className="bs-custom-panel">
-                    <div className="ascribe-settings-property">
+                    <div className="ascribe-property">
                         {this.renderChildren()}
                     </div>
                 </Panel>

js/components/ascribe_settings/account_settings.js

@@ -15,7 +15,7 @@ import AclProxy from '../acl_proxy';
 import CopyrightAssociationForm from '../ascribe_forms/form_copyright_association';
 
 import ApiUrls from '../../constants/api_urls';
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -37,7 +37,7 @@ let AccountSettings = React.createClass({
     },
     
     render() {
-        let content = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
+        let content = <AscribeSpinner color='dark-blue' size='lg'/>;
         let profile = null;
 
         if (this.props.currentUser.username) {
@@ -78,7 +78,7 @@ let AccountSettings = React.createClass({
                         getFormData={this.getFormDataProfile}>
                         <Property
                             name="hash_locally"
-                            className="ascribe-settings-property-collapsible-toggle"
+                            className="ascribe-property-collapsible-toggle"
                             style={{paddingBottom: 0}}>
                             <InputCheckbox
                                 defaultChecked={this.props.currentUser.profile.hash_locally}>

js/components/ascribe_settings/api_settings.js

@@ -15,7 +15,7 @@ import ActionPanel from '../ascribe_panel/action_panel';
 import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
 
 import ApiUrls from '../../constants/api_urls';
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -57,7 +57,7 @@ let APISettings = React.createClass({
     },
 
     getApplications(){
-        let content = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
+        let content = <AscribeSpinner color='dark-blue' size='lg'/>;
 
         if (this.state.applications.length > -1) {
             content = this.state.applications.map(function(app, i) {

js/components/ascribe_settings/bitcoin_wallet_settings.js

@@ -10,7 +10,7 @@ import Property from '../ascribe_forms/property';
 
 import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
 
-import AppConstants from '../../constants/application_constants';
+import AscribeSpinner from '../ascribe_spinner';
 
 import { getLangText } from '../../utils/lang_utils';
 
@@ -38,7 +38,7 @@ let BitcoinWalletSettings = React.createClass({
     },
 
     render() {
-        let content = <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />;
+        let content = <AscribeSpinner color='dark-blue' size='lg'/>;
 
         if (this.state.walletSettings.btc_public_key) {
             content = (

js/components/piece_list.js

@@ -168,10 +168,9 @@ let PieceList = React.createClass({
                     applyOrderBy={this.applyOrderBy}>
                     {this.props.customSubmitButton ?
                         this.props.customSubmitButton :
-                        <span className="icon-ascribe icon-ascribe-add">
+                        <button className="btn btn-default btn-ascribe-add">
-                            <span className="path1"/>
+                            <span className="icon-ascribe icon-ascribe-add" />
-                            <span className="path2"/>
+                        </button>
-                        </span>
                     }
                 </PieceListToolbar>
                 <PieceListBulkModal className="ascribe-piece-list-bulk-modal" />

js/components/whitelabel/prize/components/prize_register_piece.js

@@ -60,7 +60,7 @@ let PrizeRegisterPiece = React.createClass({
                 </Property>
                 <Property
                     name="terms"
-                    className="ascribe-settings-property-collapsible-toggle"
+                    className="ascribe-property-collapsible-toggle"
                     style={{paddingBottom: 0}}>
                     <InputCheckbox>
                         <span>

sass/ascribe-fonts/ascribe-fonts.scss

@@ -24,11 +24,11 @@
 }
 @font-face {
 	font-family: 'ascribe-logo';
-	src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?ijga43');
+	src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?q6qoae');
-	src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?ijga43#iefix') format('embedded-opentype'),
+	src:url('#{$BASE_URL}static/fonts/ascribe-logo.eot?q6qoae#iefix') format('embedded-opentype'),
-		url('#{$BASE_URL}static/fonts/ascribe-logo.ttf?ijga43') format('truetype'),
+		url('#{$BASE_URL}static/fonts/ascribe-logo.ttf?q6qoae') format('truetype'),
-		url('#{$BASE_URL}static/fonts/ascribe-logo.woff?ijga43') format('woff'),
+		url('#{$BASE_URL}static/fonts/ascribe-logo.woff?q6qoae') format('woff'),
-		url('#{$BASE_URL}static/fonts/ascribe-logo.svg?ijga43#ascribe-logo') format('svg');
+		url('#{$BASE_URL}static/fonts/ascribe-logo.svg?q6qoae#ascribe-logo') format('svg');
 	font-weight: normal;
 	font-style: normal;
 }
@@ -47,32 +47,35 @@
 	-moz-osx-font-smoothing: grayscale;
 }
 
-.icon-ascribe-sort:before {
+.icon-ascribe-add:before {
 	content: "\e800";
 }
-.icon-ascribe-search:before {
+.icon-ascribe-sort:before {
 	content: "\e801";
 }
-.icon-ascribe-filter:before {
+.icon-ascribe-search:before {
 	content: "\e802";
 }
-.icon-ascribe-add-white:before {
+.icon-ascribe-filter:before {
 	content: "\e803";
 }
-.icon-ascribe-add .path1:before {
+.icon-ascribe-add-white:before {
 	content: "\e804";
+}
+.icon-ascribe-add-blue .path1:before {
+	content: "\e805";
 	color: rgb(0, 60, 106);
 }
-.icon-ascribe-add .path2:before {
+.icon-ascribe-add-blue .path2:before {
-	content: "\e805";
+	content: "\e806";
 	margin-left: -1em;
 	color: rgb(255, 255, 255);
 }
 .icon-ascribe-icon:before {
-	content: "\e806";
+	content: "\e807";
 }
 .icon-ascribe-logo:before {
-	content: "\e807";
+	content: "\e808";
 }
 
 

sass/ascribe_custom_style.scss

@@ -142,7 +142,7 @@ h1 {
 
 .ascribe-icon {
     font-size: 1.2em;
-    font-weight: 800;
+    font-weight: 300;
 }
 
 .ascribe-accordion-list-item {
@@ -184,7 +184,16 @@ h1 {
     }
 }
 
-
+.ascribe-accordion-list-item-table {
+    tbody {
+        tr {
+            &:hover {
+                background-color: rgba($ascribe--button-default-color, .05);
+                border-left-color: rgba($ascribe--button-default-color, .5);
+            }
+        }
+    }
+}
 .ascribe-footer {
     position: fixed;
     left: 0;
@@ -259,15 +268,15 @@ h1 {
         }
     }
 
-    .ascribe-settings-property {
+    .ascribe-property {
         border: none;
     }
 
-    .ascribe-settings-property > span {
+    .ascribe-property > span {
         color: white;
     }
 
-    .ascribe-settings-property > input {
+    .ascribe-property > input {
         padding: 10px;
         background-color: #fff;
         margin-top: .1em;
@@ -310,6 +319,31 @@ h1 {
     }
 }
 
+.btn-ascribe-add {
+    width: 30px;
+    height: 30px;
+    background-color: transparent !important;
+    border: 1px solid $ascribe-dark-blue;
+    border-radius: 50%;
+
+    &:hover {
+        border-color: white!important;
+        background-color: $ascribe-dark-blue!important;
+    }
+
+    > span {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        width: 30px;
+        height: 30px;
+        color: $ascribe-dark-blue;
+        padding: 0.4em;
+        &:hover {
+            color: white;
+        }
+    }
+}
 
 // disabled buttons
 .btn-default.disabled,
@@ -477,7 +511,7 @@ fieldset[disabled] .btn-secondary.active {
 
 }
 
-.ascribe-settings-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before,
+.ascribe-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before,
 .ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before {
     color: $ascribe--button-default-color;
 }

sass/ascribe_property.scss

@@ -0,0 +1,219 @@
+.ascribe-property-wrapper {
+    background-color: white;
+    border-left: 3px solid rgba(0, 0, 0, 0);
+    padding-bottom: 1em;
+    text-align: center;
+    width: 100%;
+
+    &div:last-of-type {
+        border-bottom: 1px solid rgba(0, 0, 0, .05);
+    }
+
+    &:hover {
+      border-left: 3px solid rgba(2, 182, 163, .4);
+    }
+}
+
+.is-hidden {
+    display: none;
+}
+
+.is-focused {
+    background-color: rgba(2, 182, 163, .05);
+    border-left: 3px solid rgba(2, 182, 163, 1) !important;
+}
+
+.is-error {
+    background-color: rgba(169, 68, 66, .05);
+    border-left: 3px solid rgba(169, 68, 66, 1);
+
+    > div {
+        > span {
+            color: rgba(169, 68, 66, 1);
+            font-size: .9em;
+            margin-right: 1em;
+        }
+
+        > input,
+        > textarea {
+            color: #666;
+        }
+    }
+
+    &:hover {
+      border-left: 3px solid rgba(169, 68, 66, 1);
+    }
+}
+
+.is-fixed {
+    cursor: default;
+
+    > div {
+        cursor: default;
+
+        > span {
+            cursor: default;
+        }
+
+        > input,
+        > div,
+        > pre,
+        > textarea {
+            color: #666;
+            cursor: default;
+        }
+    }
+}
+
+.ascribe-property {
+    border-top: 1px solid rgba(0, 0, 0, .05);
+    cursor: pointer;
+    display: inline-block;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+    padding-top: 1em;
+    text-align: left;
+    width: 100%;
+
+    > div,
+    > input,
+    > pre,
+    > select,
+    > span:not(.glyphicon),
+    > textarea {
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    }
+
+    > span {
+        color: rgba(0, 0, 0, .5);
+        font-size: .9em;
+        font-weight: normal;
+    }
+
+    > div {
+        > div:not(.file-drag-and-drop div) {
+            color: rgba(0, 0, 0, .5);
+            cursor: default;
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-size: 1.1em;
+            font-weight: normal;
+            padding-left: 0;
+        }
+    }
+
+    > .progressbar-container, .progressbar-progress {
+        margin-top: 0 !important;
+    }
+
+    > input,
+    > pre,
+    > textarea,
+    > select,
+    .datepicker__input {
+        background-color: rgba(0, 0, 0, 0);
+        border: 0;
+        box-shadow: none;
+        color: rgba(0, 0, 0, .8);
+        font-size: 1.1em;
+        font-weight: 400;
+        margin-top: .5em;
+        padding-left: 0;
+        width: 100%;
+
+        &:focus {
+            border: 0;
+            box-shadow: none;
+            outline: 0;
+        }
+
+        &::selection {
+            background-color: rgba(0, 0, 0, 1);
+            color: white;
+        }
+
+    }
+
+    .datepicker__input {
+        padding: 0;
+    }
+
+    > textarea{
+        color: #666;
+        margin-top: 1em;
+        padding: 0;
+    }
+}
+
+.ascribe-property-footer {
+    font-size: .8em;
+    margin-top: 10px;
+    width: 100%;
+}
+
+.ascribe-property-collapsible-toggle {
+    border-top: 1px solid rgba(0, 0, 0, .05);
+    display: inline-block;
+    padding: .5em 1.5em;
+    text-align: left;
+    width: 100%;
+}
+
+.ascribe-checkbox-wrapper{
+    .checkbox > span {
+        color: black;
+    }
+}
+
+.ascribe-property-collapsible-toggle, .ascribe-checkbox-wrapper {
+    cursor: pointer;
+
+    // Taken from: http://www.htmllion.com/css3-checkbox.html
+    .checkbox {
+        display: inline-block;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-size: .9em;
+        font-weight: normal;
+        vertical-align: middle;
+
+        > span {
+            left: 5px;
+            position: relative;
+            top: 1px;
+
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            -webkit-user-select: none;
+        }
+    }
+
+    [type=checkbox] {
+        display: none;
+    }
+
+    .checkbox:before {
+        background-color: white;
+        border: 1px solid rgba(0, 0, 0, .5);
+        border-radius: 1px;
+        color: #f3f3f3;
+        content: "";
+        display: inline-block;
+        height: 17px;
+        text-align: center;
+        vertical-align: middle;
+        width: 17px;
+    }
+
+    [type=checkbox]:checked + .checkbox:before {
+        color: rgba(2, 182, 163, 1);
+        content: "\2713";
+        font-size: 20px;
+        line-height: .8;
+    }
+}
+
+.ascribe-checkbox-badge {
+    > span > span {
+        margin-top: 0;
+    }
+}

sass/ascribe_settings.scss

@@ -3,72 +3,6 @@
     max-width: 600px;
 }
 
-.ascribe-settings-wrapper {
-    background-color: white;
-    border-left: 3px solid rgba(0, 0, 0, 0);
-    padding-bottom: 1em;
-    text-align: center;
-    width: 100%;
-
-    &div:last-of-type {
-        border-bottom: 1px solid rgba(0, 0, 0, .05);
-    }
-
-    &:hover {
-      border-left: 3px solid rgba(2, 182, 163, .4);
-    }
-}
-
-.is-hidden {
-    display: none;
-}
-
-.is-focused {
-    background-color: rgba(2, 182, 163, .05);
-    border-left: 3px solid rgba(2, 182, 163, 1) !important;
-}
-
-.is-error {
-    background-color: rgba(169, 68, 66, .05);
-    border-left: 3px solid rgba(169, 68, 66, 1);
-
-    > div {
-        > span {
-            color: rgba(169, 68, 66, 1);
-            font-size: .9em;
-            margin-right: 1em;
-        }
-
-        > input,
-        > textarea {
-            color: #666;
-        }
-    }
-
-    &:hover {
-      border-left: 3px solid rgba(169, 68, 66, 1);
-    }
-}
-
-.is-fixed {
-    cursor: default;
-
-    > div {
-        cursor: default;
-
-        > span {
-            cursor: default;
-        }
-
-        > input,
-        > div,
-        > pre,
-        > textarea {
-            color: #666;
-            cursor: default;
-        }
-    }
-}
 
 .ascribe-settings-property {
     border-top: 1px solid rgba(0, 0, 0, .05);

sass/whitelabel/wallet/ikonotv/ikonotv_landing.scss

@@ -154,15 +154,15 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
         }
     }
 
-    .ascribe-settings-property {
+    .ascribe-property {
         border: none;
     }
 
-    .ascribe-settings-property > span {
+    .ascribe-property > span {
         color: white;
     }
 
-    .ascribe-settings-property > input {
+    .ascribe-property > input {
         padding: 10px;
         background-color: #fff;
         margin-top: .1em;
@@ -390,7 +390,7 @@ $ikono--logo: 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ik
         border-color: $ikono--button-color;
     }
 
-    .ascribe-settings-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before,
+    .ascribe-property-collapsible-toggle [type=checkbox]:checked + .checkbox:before,
     .ascribe-checkbox-wrapper [type=checkbox]:checked + .checkbox:before {
         color: $ikono--button-color;
     }