minor refactoring to remove duplication with a constant

6 files changed, 24 insertions, 8 deletions

diff --git a/src/components/settings/account/AccountDashboard.tsx b/src/components/settings/account/AccountDashboard.tsx
index ffa684458..eab019084 100644
--- a/src/components/settings/account/AccountDashboard.tsx
+++ b/src/components/settings/account/AccountDashboard.tsx
@@ -7,7 +7,11 @@ import { H1, H2 } from '../../ui/headline';
 import Loader from '../../ui/loader';
 import Button from '../../ui/button';
 import Infobox from '../../ui/infobox/index';
-import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config';
+import {
+  DEFAULT_LOADER_COLOR,
+  LOCAL_SERVER,
+  LIVE_FRANZ_API,
+} from '../../../config';
 import User from '../../../models/User';
 
 const messages = defineMessages({
@@ -123,7 +127,7 @@ class AccountDashboard extends Component<IProp> {
           )}
           {!isUsingWithoutAccount && (
             <>
-              {isLoading && <Loader color="#FFFFFF" />}
+              {isLoading && <Loader color={DEFAULT_LOADER_COLOR} />}
 
               {!isLoading && userInfoRequestFailed && (
                 <Infobox
diff --git a/src/components/settings/team/TeamDashboard.tsx b/src/components/settings/team/TeamDashboard.tsx
index 406656160..96613373e 100644
--- a/src/components/settings/team/TeamDashboard.tsx
+++ b/src/components/settings/team/TeamDashboard.tsx
@@ -10,7 +10,7 @@ import Loader from '../../ui/loader';
 import Button from '../../ui/button';
 import Infobox from '../../ui/Infobox';
 import { H1 } from '../../ui/headline';
-import { LIVE_FRANZ_API } from '../../../config';
+import { DEFAULT_LOADER_COLOR, LIVE_FRANZ_API } from '../../../config';
 
 const messages = defineMessages({
   headline: {
@@ -128,7 +128,7 @@ class TeamDashboard extends Component<IProps> {
           </span>
         </div>
         <div className="settings__body">
-          {isLoading && <Loader color="#FFFFFF" />}
+          {isLoading && <Loader color={DEFAULT_LOADER_COLOR} />}
 
           {!isLoading && userInfoRequestFailed && (
             <Infobox
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 2c6e2bff4..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: {
@@ -33,7 +34,7 @@ class LoaderComponent extends Component<IProps> {
       color = this.props.stores?.settings.app.accentColor,
       loaded = false,
     } = this.props;
-    const loaderColor = color ?? '#FFFFFF';
+    const loaderColor = color ?? DEFAULT_LOADER_COLOR;
 
     return (
       <div