Fix ListItemEditionWidget spinner's colour

js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js

@@ -78,7 +78,6 @@ let AccordionListItemEditionWidget = React.createClass({
                 return (
                     <AscribeSpinner
                         size='sm'
-                        color='white'
                         classNames='pull-right margin-left-2px'/>
                 );
             } else {
@@ -137,4 +136,4 @@ let AccordionListItemEditionWidget = React.createClass({
     }
 });
 
-export default AccordionListItemEditionWidget;
+export default AccordionListItemEditionWidget;

js/components/ascribe_spinner.js

@@ -7,26 +7,26 @@ let AscribeSpinner = React.createClass({
     propTypes: {
         classNames: React.PropTypes.string,
         size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
-        color: React.PropTypes.oneOf(['blue', 'dark-blue', 'light-blue', 'pink', 'black', 'loop'])
+        color: React.PropTypes.oneOf(['black', 'blue', 'dark-blue', 'light-blue', 'pink', 'white', 'loop'])
     },
 
     getDefaultProps() {
         return {
             inline: false,
-            size: 'md',
-            color: 'loop'
+            size: 'md'
         };
     },
 
     render() {
+        const { classNames: classes, color, size } = this.props;
+
         return (
             <div
-                className={
-                    classNames('spinner-wrapper-' + this.props.size,
-                    'spinner-wrapper-' + this.props.color,
-                    this.props.classNames)}>
-                    <div className={classNames('spinner-circle')}></div>
-                    <div className={classNames('spinner-inner')}>A</div>
+                className={classNames('spinner-wrapper-' + size,
+                                      color ? 'spinner-wrapper-' + color : null,
+                                      classes)}>
+                <div className='spinner-circle' />
+                <div className='spinner-inner'>A</div>
             </div>
         );
     }

sass/ascribe_spinner.scss

@@ -52,6 +52,13 @@ $ascribe--spinner-size-sm: 15px;
     }
 }
 
+.spinner-wrapper-white {
+    color: $ascribe-white;
+    .spinner-circle {
+        border-color: $ascribe-white;
+    }
+}
+
 .spinner-wrapper-lg {
     width: $ascribe--spinner-size-lg;
     height: $ascribe--spinner-size-lg;
@@ -146,4 +153,4 @@ $ascribe--spinner-size-sm: 15px;
     40% { color: $ascribe-blue; }
     60% { color: $ascribe-light-blue; }
     80% { color: $ascribe-pink; }
-}
+}

sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss

@@ -331,6 +331,9 @@ $vivi23--highlight-color: #de2600;
     .spinner-inner {
         display: none;
     }
+    .btn-secondary .spinner-circle {
+        border-color: $vivi23--bg-color;
+    }
 
     // video player
     .ascribe-media-player .vjs-default-skin {