diff options
-rw-r--r-- | src/components/settings/account/AccountDashboard.tsx | 8 | ||||
-rw-r--r-- | src/components/settings/team/TeamDashboard.tsx | 4 | ||||
-rw-r--r-- | src/components/ui/InfoBar.tsx | 7 | ||||
-rw-r--r-- | src/components/ui/Infobox.tsx | 7 | ||||
-rw-r--r-- | src/components/ui/button/index.tsx | 3 | ||||
-rw-r--r-- | src/components/ui/loader/index.tsx | 3 | ||||
-rw-r--r-- | src/config.ts | 2 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx | 3 | ||||
-rw-r--r-- | src/themes/default/index.ts | 3 |
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'; | |||
7 | import Loader from '../../ui/loader'; | 7 | import Loader from '../../ui/loader'; |
8 | import Button from '../../ui/button'; | 8 | import Button from '../../ui/button'; |
9 | import Infobox from '../../ui/infobox/index'; | 9 | import Infobox from '../../ui/infobox/index'; |
10 | import { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config'; | 10 | import { |
11 | DEFAULT_LOADER_COLOR, | ||
12 | LOCAL_SERVER, | ||
13 | LIVE_FRANZ_API, | ||
14 | } from '../../../config'; | ||
11 | import User from '../../../models/User'; | 15 | import User from '../../../models/User'; |
12 | 16 | ||
13 | const messages = defineMessages({ | 17 | const messages = defineMessages({ |
@@ -123,7 +127,7 @@ class AccountDashboard extends Component<IProp> { | |||
123 | )} | 127 | )} |
124 | {!isUsingWithoutAccount && ( | 128 | {!isUsingWithoutAccount && ( |
125 | <> | 129 | <> |
126 | {isLoading && <Loader color="#FFFFFF" />} | 130 | {isLoading && <Loader color={DEFAULT_LOADER_COLOR} />} |
127 | 131 | ||
128 | {!isLoading && userInfoRequestFailed && ( | 132 | {!isLoading && userInfoRequestFailed && ( |
129 | <Infobox | 133 | <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'; | |||
10 | import Button from '../../ui/button'; | 10 | import Button from '../../ui/button'; |
11 | import Infobox from '../../ui/Infobox'; | 11 | import Infobox from '../../ui/Infobox'; |
12 | import { H1 } from '../../ui/headline'; | 12 | import { H1 } from '../../ui/headline'; |
13 | import { LIVE_FRANZ_API } from '../../../config'; | 13 | import { DEFAULT_LOADER_COLOR, LIVE_FRANZ_API } from '../../../config'; |
14 | 14 | ||
15 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
16 | headline: { | 16 | headline: { |
@@ -128,7 +128,7 @@ class TeamDashboard extends Component<IProps> { | |||
128 | </span> | 128 | </span> |
129 | </div> | 129 | </div> |
130 | <div className="settings__body"> | 130 | <div className="settings__body"> |
131 | {isLoading && <Loader color="#FFFFFF" />} | 131 | {isLoading && <Loader color={DEFAULT_LOADER_COLOR} />} |
132 | 132 | ||
133 | {!isLoading && userInfoRequestFailed && ( | 133 | {!isLoading && userInfoRequestFailed && ( |
134 | <Infobox | 134 | <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'; | |||
8 | import Loader from './loader/index'; | 8 | import Loader from './loader/index'; |
9 | import Appear from './effects/Appear'; | 9 | import Appear from './effects/Appear'; |
10 | import Icon from './icon'; | 10 | import Icon from './icon'; |
11 | import { DEFAULT_LOADER_COLOR } from '../../config'; | ||
11 | 12 | ||
12 | const messages = defineMessages({ | 13 | const messages = defineMessages({ |
13 | hide: { | 14 | hide: { |
@@ -71,7 +72,11 @@ class InfoBar extends Component<IProps> { | |||
71 | className="contentWrapper" | 72 | className="contentWrapper" |
72 | style={{ display: 'flex', gap: '8px' }} | 73 | style={{ display: 'flex', gap: '8px' }} |
73 | > | 74 | > |
74 | <Loader size={18} loaded={!ctaLoading} color="#FFFFFF" /> | 75 | <Loader |
76 | size={18} | ||
77 | loaded={!ctaLoading} | ||
78 | color={DEFAULT_LOADER_COLOR} | ||
79 | /> | ||
75 | {ctaLabel} | 80 | {ctaLabel} |
76 | </div> | 81 | </div> |
77 | </button> | 82 | </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'; | |||
6 | import { observer } from 'mobx-react'; | 6 | import { observer } from 'mobx-react'; |
7 | import Loader from './loader/index'; | 7 | import Loader from './loader/index'; |
8 | import Icon from './icon'; | 8 | import Icon from './icon'; |
9 | import { DEFAULT_LOADER_COLOR } from '../../config'; | ||
9 | 10 | ||
10 | const icons = { | 11 | const icons = { |
11 | 'checkbox-marked-circle-outline': mdiCheckboxMarkedCircleOutline, | 12 | 'checkbox-marked-circle-outline': mdiCheckboxMarkedCircleOutline, |
@@ -84,7 +85,11 @@ class Infobox extends Component<IProps, IState> { | |||
84 | className="contentWrapper" | 85 | className="contentWrapper" |
85 | style={{ display: 'flex', gap: '8px' }} | 86 | style={{ display: 'flex', gap: '8px' }} |
86 | > | 87 | > |
87 | <Loader size={18} loaded={!ctaLoading} color="#FFFFFF" /> | 88 | <Loader |
89 | size={18} | ||
90 | loaded={!ctaLoading} | ||
91 | color={DEFAULT_LOADER_COLOR} | ||
92 | /> | ||
88 | {ctaLabel} | 93 | {ctaLabel} |
89 | </div> | 94 | </div> |
90 | </button> | 95 | </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'; | |||
8 | import Loader from '../loader/index'; | 8 | import Loader from '../loader/index'; |
9 | import { Theme } from '../../../themes'; | 9 | import { Theme } from '../../../themes'; |
10 | import { IFormField } from '../typings/generic'; | 10 | import { IFormField } from '../typings/generic'; |
11 | import { DEFAULT_LOADER_COLOR } from '../../../config'; | ||
11 | 12 | ||
12 | type ButtonType = | 13 | type ButtonType = |
13 | | 'primary' | 14 | | 'primary' |
@@ -194,7 +195,7 @@ class ButtonComponent extends Component<IProps, IState> { | |||
194 | <> | 195 | <> |
195 | {showLoader && ( | 196 | {showLoader && ( |
196 | <div className={classes.loaderContainer}> | 197 | <div className={classes.loaderContainer}> |
197 | <Loader size={18} color="#FFFFFF" /> | 198 | <Loader size={18} color={DEFAULT_LOADER_COLOR} /> |
198 | </div> | 199 | </div> |
199 | )} | 200 | )} |
200 | <div className={classes.label}> | 201 | <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'; | |||
4 | import { Oval } from 'react-loader-spinner'; | 4 | import { Oval } from 'react-loader-spinner'; |
5 | import { inject } from 'mobx-react'; | 5 | import { inject } from 'mobx-react'; |
6 | import { FerdiumStores } from '../../../@types/stores.types'; | 6 | import { FerdiumStores } from '../../../@types/stores.types'; |
7 | import { DEFAULT_LOADER_COLOR } from '../../../config'; | ||
7 | 8 | ||
8 | const styles = () => ({ | 9 | const styles = () => ({ |
9 | container: { | 10 | container: { |
@@ -33,7 +34,7 @@ class LoaderComponent extends Component<IProps> { | |||
33 | color = this.props.stores?.settings.app.accentColor, | 34 | color = this.props.stores?.settings.app.accentColor, |
34 | loaded = false, | 35 | loaded = false, |
35 | } = this.props; | 36 | } = this.props; |
36 | const loaderColor = color ?? '#FFFFFF'; | 37 | const loaderColor = color ?? DEFAULT_LOADER_COLOR; |
37 | 38 | ||
38 | return ( | 39 | return ( |
39 | <div | 40 | <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 | |||
343 | export const SPLIT_COLUMNS_MIN = 1; | 343 | export const SPLIT_COLUMNS_MIN = 1; |
344 | export const SPLIT_COLUMNS_MAX = 5; | 344 | export const SPLIT_COLUMNS_MAX = 5; |
345 | 345 | ||
346 | export const DEFAULT_LOADER_COLOR = '#FFFFFF'; | ||
347 | |||
346 | export const DEFAULT_APP_SETTINGS = { | 348 | export const DEFAULT_APP_SETTINGS = { |
347 | autoLaunchOnStart: false, | 349 | autoLaunchOnStart: false, |
348 | autoLaunchInBackground: false, | 350 | 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'; | |||
5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | 5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
6 | import Loader from '../../../components/ui/loader'; | 6 | import Loader from '../../../components/ui/loader'; |
7 | import { workspaceStore } from '../index'; | 7 | import { workspaceStore } from '../index'; |
8 | import { DEFAULT_LOADER_COLOR } from '../../../config'; | ||
8 | 9 | ||
9 | const messages = defineMessages({ | 10 | const messages = defineMessages({ |
10 | switchingTo: { | 11 | switchingTo: { |
@@ -70,7 +71,7 @@ class WorkspaceSwitchingIndicator extends Component<IProps> { | |||
70 | return ( | 71 | return ( |
71 | <div className={classnames([classes.wrapper])}> | 72 | <div className={classnames([classes.wrapper])}> |
72 | <div className={classes.component}> | 73 | <div className={classes.component}> |
73 | <Loader className={classes.spinner} color="#FFFFFF" /> | 74 | <Loader className={classes.spinner} color={DEFAULT_LOADER_COLOR} /> |
74 | <p className={classes.message}> | 75 | <p className={classes.message}> |
75 | {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`} | 76 | {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`} |
76 | </p> | 77 | </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'; | |||
3 | 3 | ||
4 | import * as legacyStyles from '../legacy'; | 4 | import * as legacyStyles from '../legacy'; |
5 | import type IStyleTypes from '../IStyleTypes'; | 5 | import type IStyleTypes from '../IStyleTypes'; |
6 | import { DEFAULT_LOADER_COLOR } from '../../config'; | ||
6 | 7 | ||
7 | export default (brandPrimary: string) => { | 8 | export default (brandPrimary: string) => { |
8 | if (!brandPrimary) { | 9 | if (!brandPrimary) { |
@@ -14,7 +15,7 @@ export default (brandPrimary: string) => { | |||
14 | const brandDanger = '#d9534f'; | 15 | const brandDanger = '#d9534f'; |
15 | const uiFontSize = 14; | 16 | const uiFontSize = 14; |
16 | const colorBackground = legacyStyles.themeGrayLighter; | 17 | const colorBackground = legacyStyles.themeGrayLighter; |
17 | const colorContentBackground = '#FFFFFF'; | 18 | const colorContentBackground = DEFAULT_LOADER_COLOR; |
18 | const colorText = legacyStyles.themeGrayDark; | 19 | const colorText = legacyStyles.themeGrayDark; |
19 | const inputColor = legacyStyles.themeGray; | 20 | const inputColor = legacyStyles.themeGray; |
20 | const inputBackground = legacyStyles.themeGrayLightest; | 21 | const inputBackground = legacyStyles.themeGrayLightest; |