minor refactoring to remove duplication with a constant

9 files changed, 30 insertions, 10 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
diff --git a/src/config.ts b/src/config.ts
index 73ea25343..6e89cb9d1 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -343,6 +343,8 @@ export const DEFAULT_SERVICE_ORDER = 99; // something high enough that it gets a
 export const SPLIT_COLUMNS_MIN = 1;
 export const SPLIT_COLUMNS_MAX = 5;
 
+export const DEFAULT_LOADER_COLOR = '#FFFFFF';
+
 export const DEFAULT_APP_SETTINGS = {
   autoLaunchOnStart: false,
   autoLaunchInBackground: false,
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx
index 0fce811e5..19dd9037d 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx
@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import Loader from '../../../components/ui/loader';
 import { workspaceStore } from '../index';
+import { DEFAULT_LOADER_COLOR } from '../../../config';
 
 const messages = defineMessages({
   switchingTo: {
@@ -70,7 +71,7 @@ class WorkspaceSwitchingIndicator extends Component<IProps> {
     return (
       <div className={classnames([classes.wrapper])}>
         <div className={classes.component}>
-          <Loader className={classes.spinner} color="#FFFFFF" />
+          <Loader className={classes.spinner} color={DEFAULT_LOADER_COLOR} />
           <p className={classes.message}>
             {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`}
           </p>
diff --git a/src/themes/default/index.ts b/src/themes/default/index.ts
index cc886f299..ac04a6e3b 100644
--- a/src/themes/default/index.ts
+++ b/src/themes/default/index.ts
@@ -3,6 +3,7 @@ import { cloneDeep } from 'lodash';
 
 import * as legacyStyles from '../legacy';
 import type IStyleTypes from '../IStyleTypes';
+import { DEFAULT_LOADER_COLOR } from '../../config';
 
 export default (brandPrimary: string) => {
   if (!brandPrimary) {
@@ -14,7 +15,7 @@ export default (brandPrimary: string) => {
   const brandDanger = '#d9534f';
   const uiFontSize = 14;
   const colorBackground = legacyStyles.themeGrayLighter;
-  const colorContentBackground = '#FFFFFF';
+  const colorContentBackground = DEFAULT_LOADER_COLOR;
   const colorText = legacyStyles.themeGrayDark;
   const inputColor = legacyStyles.themeGray;
   const inputBackground = legacyStyles.themeGrayLightest;