Implement #120v5.4.0-beta.1

4 files changed, 38 insertions, 10 deletions

diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
index e2d7cea83..f46fd34ea 100644
--- a/src/components/ui/Button.js
+++ b/src/components/ui/Button.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import Loader from 'react-loader';
 import classnames from 'classnames';
 
-export default @observer class Button extends Component {
+export default @observer @inject('stores') class Button extends Component {
   static propTypes = {
     className: PropTypes.string,
     label: PropTypes.string.isRequired,
@@ -14,6 +14,13 @@ export default @observer class Button extends Component {
     buttonType: PropTypes.string,
     loaded: PropTypes.bool,
     htmlForm: PropTypes.string,
+    stores: PropTypes.shape({
+      settings: PropTypes.shape({
+        app: PropTypes.shape({
+          accentColor: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
@@ -69,7 +76,7 @@ export default @observer class Button extends Component {
           loaded={loaded}
           lines={10}
           scale={0.4}
-          color={buttonType !== 'secondary' ? '#FFF' : '#7367F0'}
+          color={buttonType !== 'secondary' ? '#FFF' : this.props.stores.settings.app.accentColor}
           component="span"
         />
         {label}
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index 06dab1eb6..334bb6c4a 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
 import injectSheet, { withTheme } from 'react-jss';
 import classnames from 'classnames';
 
@@ -8,7 +8,7 @@ import Loader from '../Loader';
 
 import styles from './styles';
 
-export default @observer @withTheme @injectSheet(styles) class FullscreenLoader extends Component {
+export default @observer @inject('stores') @withTheme @injectSheet(styles) class FullscreenLoader extends Component {
   static propTypes = {
     className: PropTypes.string,
     title: PropTypes.string.isRequired,
@@ -16,6 +16,13 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader
     theme: PropTypes.object.isRequired,
     spinnerColor: PropTypes.string,
     children: PropTypes.node,
+    stores: PropTypes.shape({
+      settings: PropTypes.shape({
+        app: PropTypes.shape({
+          accentColor: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
@@ -32,10 +39,16 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader
       spinnerColor,
       className,
       theme,
+      stores,
     } = this.props;
 
     return (
-      <div className={classes.wrapper}>
+      <div
+        className={classes.wrapper}
+        style={{
+          background: stores.app.accentColor,
+        }}
+      >
         <div
           className={classnames({
             [`${classes.component}`]: true,
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.js
index d516781a8..64d24e4ce 100644
--- a/src/components/ui/FullscreenLoader/styles.js
+++ b/src/components/ui/FullscreenLoader/styles.js
@@ -4,7 +4,6 @@ export default {
     alignItems: 'center',
     position: 'absolute',
     width: '100%',
-    background: 'linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%)',
   },
   component: {
     width: '100%',
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js
index de8769b6c..627749273 100644
--- a/src/components/ui/Loader.js
+++ b/src/components/ui/Loader.js
@@ -1,22 +1,30 @@
 import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 import Loader from 'react-loader';
 
 import { oneOrManyChildElements } from '../../prop-types';
 
-export default class LoaderComponent extends Component {
+export default @observer @inject('stores') class LoaderComponent extends Component {
   static propTypes = {
     children: oneOrManyChildElements,
     loaded: PropTypes.bool,
     className: PropTypes.string,
     color: PropTypes.string,
+    stores: PropTypes.shape({
+      settings: PropTypes.shape({
+        app: PropTypes.shape({
+          accentColor: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
   };
 
   static defaultProps = {
     children: null,
     loaded: false,
     className: '',
-    color: '#7367F0',
+    color: 'ACCENT',
   };
 
   render() {
@@ -24,9 +32,10 @@ export default class LoaderComponent extends Component {
       children,
       loaded,
       className,
-      color,
     } = this.props;
 
+    const color = this.props.color !== 'ACCENT' ? this.props.color : this.props.stores.settings.app.accentColor;
+
     return (
       <Loader
         loaded={loaded}