From 5a6026d0ca1a489a676e11b3f48e22d4d5187534 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Fri, 4 Dec 2015 14:34:59 +0100
Subject: [PATCH] Fix ListItemEditionWidget spinner's colour

---
 .../accordion_list_item_edition_widget.js      |  3 +--
 js/components/ascribe_spinner.js               | 18 +++++++++---------
 sass/ascribe_spinner.scss                      |  9 ++++++++-
 .../wallet/23vivi/23vivi_custom_style.scss     |  3 +++
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js b/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
index 5d3e033f..8033f239 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
+++ b/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;
\ No newline at end of file
+export default AccordionListItemEditionWidget;
diff --git a/js/components/ascribe_spinner.js b/js/components/ascribe_spinner.js
index e1daf5b2..ad97d484 100644
--- a/js/components/ascribe_spinner.js
+++ b/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>
         );
     }
diff --git a/sass/ascribe_spinner.scss b/sass/ascribe_spinner.scss
index 7f02a383..543b1463 100644
--- a/sass/ascribe_spinner.scss
+++ b/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; }
-}
\ No newline at end of file
+}
diff --git a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss b/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
index 37269bd6..32783a7a 100644
--- a/sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
+++ b/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 {