4 files changed, 17 insertions, 5 deletions

diff --git a/src/components/ui/InfoBar.tsx b/src/components/ui/InfoBar.tsx
index ae37546df..f3f1adbe7 100644
--- a/src/components/ui/InfoBar.tsx
+++ b/src/components/ui/InfoBar.tsx
@@ -8,6 +8,7 @@ import { noop } from 'lodash';
 import Loader from './loader/index';
 import Appear from './effects/Appear';
 import Icon from './icon';
+import { DEFAULT_LOADER_COLOR } from '../../config';
 
 const messages = defineMessages({
   hide: {
@@ -71,7 +72,11 @@ class InfoBar extends Component<IProps> {
                 className="contentWrapper"
                 style={{ display: 'flex', gap: '8px' }}
               >
-                <Loader size={18} loaded={!ctaLoading} color="#FFFFFF" />
+                <Loader
+                  size={18}
+                  loaded={!ctaLoading}
+                  color={DEFAULT_LOADER_COLOR}
+                />
                 {ctaLabel}
               </div>
             </button>
diff --git a/src/components/ui/Infobox.tsx b/src/components/ui/Infobox.tsx
index 742717ed7..14e1a581c 100644
--- a/src/components/ui/Infobox.tsx
+++ b/src/components/ui/Infobox.tsx
@@ -6,6 +6,7 @@ import { noop } from 'lodash';
 import { observer } from 'mobx-react';
 import Loader from './loader/index';
 import Icon from './icon';
+import { DEFAULT_LOADER_COLOR } from '../../config';
 
 const icons = {
   'checkbox-marked-circle-outline': mdiCheckboxMarkedCircleOutline,
@@ -84,7 +85,11 @@ class Infobox extends Component<IProps, IState> {
               className="contentWrapper"
               style={{ display: 'flex', gap: '8px' }}
             >
-              <Loader size={18} loaded={!ctaLoading} color="#FFFFFF" />
+              <Loader
+                size={18}
+                loaded={!ctaLoading}
+                color={DEFAULT_LOADER_COLOR}
+              />
               {ctaLabel}
             </div>
           </button>
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index a2194e34d..3247072a9 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -8,6 +8,7 @@ import withStyles, { WithStylesProps } from 'react-jss';
 import Loader from '../loader/index';
 import { Theme } from '../../../themes';
 import { IFormField } from '../typings/generic';
+import { DEFAULT_LOADER_COLOR } from '../../../config';
 
 type ButtonType =
   | 'primary'
@@ -194,7 +195,7 @@ class ButtonComponent extends Component<IProps, IState> {
       <>
         {showLoader && (
           <div className={classes.loaderContainer}>
-            <Loader size={18} color="#FFFFFF" />
+            <Loader size={18} color={DEFAULT_LOADER_COLOR} />
           </div>
         )}
         <div className={classes.label}>
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx
index 2cee00d96..c0ae15028 100644
--- a/src/components/ui/loader/index.tsx
+++ b/src/components/ui/loader/index.tsx
@@ -4,6 +4,7 @@ import injectStyle, { WithStylesProps } from 'react-jss';
 import { Oval } from 'react-loader-spinner';
 import { inject } from 'mobx-react';
 import { FerdiumStores } from '../../../@types/stores.types';
+import { DEFAULT_LOADER_COLOR } from '../../../config';
 
 const styles = () => ({
   container: {
@@ -29,11 +30,11 @@ class LoaderComponent extends Component<IProps> {
     const {
       classes,
       className,
-      size = 36,
+      size = 100,
       color = this.props.stores?.settings.app.accentColor,
       loaded = false,
     } = this.props;
-    const loaderColor = color || '#FFFFFF';
+    const loaderColor = color ?? DEFAULT_LOADER_COLOR;
 
     return (
       <div