diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/settings/account/AccountDashboard.tsx | 4 | ||||
-rw-r--r-- | src/components/settings/recipes/RecipesDashboard.tsx | 4 | ||||
-rw-r--r-- | src/components/settings/services/ServicesDashboard.tsx | 2 | ||||
-rw-r--r-- | src/components/settings/team/TeamDashboard.tsx | 4 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/index.tsx | 8 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/styles.ts | 1 | ||||
-rw-r--r-- | src/components/ui/InfoBar.tsx | 18 | ||||
-rw-r--r-- | src/components/ui/Infobox.tsx | 18 | ||||
-rw-r--r-- | src/components/ui/Loader.tsx | 46 | ||||
-rw-r--r-- | src/components/ui/button/index.tsx | 27 | ||||
-rw-r--r-- | src/components/ui/loader/index.tsx | 41 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx | 18 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspacesDashboard.tsx | 2 | ||||
-rw-r--r-- | src/themes/default/index.ts | 3 |
14 files changed, 67 insertions, 129 deletions
diff --git a/src/components/settings/account/AccountDashboard.tsx b/src/components/settings/account/AccountDashboard.tsx index de323c06e..ffa684458 100644 --- a/src/components/settings/account/AccountDashboard.tsx +++ b/src/components/settings/account/AccountDashboard.tsx | |||
@@ -4,7 +4,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | |||
4 | import { Tooltip as ReactTooltip } from 'react-tooltip'; | 4 | import { Tooltip as ReactTooltip } from 'react-tooltip'; |
5 | import { H1, H2 } from '../../ui/headline'; | 5 | import { H1, H2 } from '../../ui/headline'; |
6 | 6 | ||
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 { LOCAL_SERVER, LIVE_FRANZ_API } from '../../../config'; |
@@ -123,7 +123,7 @@ class AccountDashboard extends Component<IProp> { | |||
123 | )} | 123 | )} |
124 | {!isUsingWithoutAccount && ( | 124 | {!isUsingWithoutAccount && ( |
125 | <> | 125 | <> |
126 | {isLoading && <Loader />} | 126 | {isLoading && <Loader color="#FFFFFF" />} |
127 | 127 | ||
128 | {!isLoading && userInfoRequestFailed && ( | 128 | {!isLoading && userInfoRequestFailed && ( |
129 | <Infobox | 129 | <Infobox |
diff --git a/src/components/settings/recipes/RecipesDashboard.tsx b/src/components/settings/recipes/RecipesDashboard.tsx index 7b7ba19b1..c7aeaa9b3 100644 --- a/src/components/settings/recipes/RecipesDashboard.tsx +++ b/src/components/settings/recipes/RecipesDashboard.tsx | |||
@@ -10,7 +10,7 @@ import { H1, H2, H3 } from '../../ui/headline'; | |||
10 | import SearchInput from '../../ui/SearchInput'; | 10 | import SearchInput from '../../ui/SearchInput'; |
11 | import Infobox from '../../ui/infobox/index'; | 11 | import Infobox from '../../ui/infobox/index'; |
12 | import RecipeItem from './RecipeItem'; | 12 | import RecipeItem from './RecipeItem'; |
13 | import Loader from '../../ui/Loader'; | 13 | import Loader from '../../ui/loader'; |
14 | import Appear from '../../ui/effects/Appear'; | 14 | import Appear from '../../ui/effects/Appear'; |
15 | import { FERDIUM_SERVICE_REQUEST } from '../../../config'; | 15 | import { FERDIUM_SERVICE_REQUEST } from '../../../config'; |
16 | import RecipePreview from '../../../models/RecipePreview'; | 16 | import RecipePreview from '../../../models/RecipePreview'; |
@@ -219,7 +219,7 @@ class RecipesDashboard extends Component<IProps, IState> { | |||
219 | <Icon icon={mdiOpenInNew} /> | 219 | <Icon icon={mdiOpenInNew} /> |
220 | </a> | 220 | </a> |
221 | </div> | 221 | </div> |
222 | {/* )} */} | 222 | |
223 | {isLoading ? ( | 223 | {isLoading ? ( |
224 | <Loader /> | 224 | <Loader /> |
225 | ) : ( | 225 | ) : ( |
diff --git a/src/components/settings/services/ServicesDashboard.tsx b/src/components/settings/services/ServicesDashboard.tsx index d64779a36..b8c3ce3f0 100644 --- a/src/components/settings/services/ServicesDashboard.tsx +++ b/src/components/settings/services/ServicesDashboard.tsx | |||
@@ -5,7 +5,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | |||
5 | import { To } from 'history'; | 5 | import { To } from 'history'; |
6 | import SearchInput from '../../ui/SearchInput'; | 6 | import SearchInput from '../../ui/SearchInput'; |
7 | import Infobox from '../../ui/Infobox'; | 7 | import Infobox from '../../ui/Infobox'; |
8 | import Loader from '../../ui/Loader'; | 8 | import Loader from '../../ui/loader'; |
9 | import FAB from '../../ui/FAB'; | 9 | import FAB from '../../ui/FAB'; |
10 | import ServiceItem from './ServiceItem'; | 10 | import ServiceItem from './ServiceItem'; |
11 | import Appear from '../../ui/effects/Appear'; | 11 | import Appear from '../../ui/effects/Appear'; |
diff --git a/src/components/settings/team/TeamDashboard.tsx b/src/components/settings/team/TeamDashboard.tsx index 77bccb8c3..406656160 100644 --- a/src/components/settings/team/TeamDashboard.tsx +++ b/src/components/settings/team/TeamDashboard.tsx | |||
@@ -6,7 +6,7 @@ import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | |||
6 | import { Tooltip as ReactTooltip } from 'react-tooltip'; | 6 | import { Tooltip as ReactTooltip } from 'react-tooltip'; |
7 | import withStyles, { WithStylesProps } from 'react-jss'; | 7 | import withStyles, { WithStylesProps } from 'react-jss'; |
8 | import classnames from 'classnames'; | 8 | import classnames from 'classnames'; |
9 | import Loader from '../../ui/Loader'; | 9 | 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'; |
@@ -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 />} | 131 | {isLoading && <Loader color="#FFFFFF" />} |
132 | 132 | ||
133 | {!isLoading && userInfoRequestFailed && ( | 133 | {!isLoading && userInfoRequestFailed && ( |
134 | <Infobox | 134 | <Infobox |
diff --git a/src/components/ui/FullscreenLoader/index.tsx b/src/components/ui/FullscreenLoader/index.tsx index 002ee7932..09c1d5fbb 100644 --- a/src/components/ui/FullscreenLoader/index.tsx +++ b/src/components/ui/FullscreenLoader/index.tsx | |||
@@ -2,7 +2,7 @@ import { Component, ReactElement, ReactNode } from 'react'; | |||
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import withStyles, { WithStylesProps } from 'react-jss'; | 3 | import withStyles, { WithStylesProps } from 'react-jss'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | import Loader from '../Loader'; | 5 | import Loader from '../loader/index'; |
6 | import styles from './styles'; | 6 | import styles from './styles'; |
7 | import { H1 } from '../headline'; | 7 | import { H1 } from '../headline'; |
8 | import { Theme } from '../../../themes'; | 8 | import { Theme } from '../../../themes'; |
@@ -21,7 +21,7 @@ class FullscreenLoader extends Component<IProps> { | |||
21 | render(): ReactElement { | 21 | render(): ReactElement { |
22 | const { | 22 | const { |
23 | classes, | 23 | classes, |
24 | theme = '', | 24 | theme, |
25 | className = '', | 25 | className = '', |
26 | spinnerColor = '', | 26 | spinnerColor = '', |
27 | children = null, | 27 | children = null, |
@@ -39,9 +39,7 @@ class FullscreenLoader extends Component<IProps> { | |||
39 | > | 39 | > |
40 | <H1 className={classes.title}>{title}</H1> | 40 | <H1 className={classes.title}>{title}</H1> |
41 | <Loader | 41 | <Loader |
42 | color={ | 42 | color={spinnerColor || theme?.colorFullscreenLoaderSpinner} |
43 | spinnerColor || (theme && theme.colorFullscreenLoaderSpinner) | ||
44 | } | ||
45 | loaded={loaded} | 43 | loaded={loaded} |
46 | /> | 44 | /> |
47 | {children && <div className={classes.content}>{children}</div>} | 45 | {children && <div className={classes.content}>{children}</div>} |
diff --git a/src/components/ui/FullscreenLoader/styles.ts b/src/components/ui/FullscreenLoader/styles.ts index 64d24e4ce..9a1b24400 100644 --- a/src/components/ui/FullscreenLoader/styles.ts +++ b/src/components/ui/FullscreenLoader/styles.ts | |||
@@ -12,6 +12,7 @@ export default { | |||
12 | alignItems: 'center', | 12 | alignItems: 'center', |
13 | textAlign: 'center', | 13 | textAlign: 'center', |
14 | height: 'auto', | 14 | height: 'auto', |
15 | gap: 8, | ||
15 | }, | 16 | }, |
16 | title: { | 17 | title: { |
17 | fontSize: 35, | 18 | fontSize: 35, |
diff --git a/src/components/ui/InfoBar.tsx b/src/components/ui/InfoBar.tsx index b7bfe0fa6..ae37546df 100644 --- a/src/components/ui/InfoBar.tsx +++ b/src/components/ui/InfoBar.tsx | |||
@@ -1,11 +1,11 @@ | |||
1 | import { Component, MouseEventHandler, ReactNode } from 'react'; | 1 | import { Component, MouseEventHandler, ReactNode } from 'react'; |
2 | import { observer } from 'mobx-react'; | 2 | import { observer } from 'mobx-react'; |
3 | import classnames from 'classnames'; | 3 | import classnames from 'classnames'; |
4 | import Loader from 'react-loader'; | ||
5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | 4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
6 | 5 | ||
7 | import { mdiClose } from '@mdi/js'; | 6 | import { mdiClose } from '@mdi/js'; |
8 | import { noop } from 'lodash'; | 7 | import { noop } from 'lodash'; |
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 | 11 | ||
@@ -67,15 +67,13 @@ class InfoBar extends Component<IProps> { | |||
67 | {children} | 67 | {children} |
68 | {ctaLabel && ( | 68 | {ctaLabel && ( |
69 | <button type="button" className="info-bar__cta" onClick={onClick}> | 69 | <button type="button" className="info-bar__cta" onClick={onClick}> |
70 | <Loader | 70 | <div |
71 | loaded={!ctaLoading} | 71 | className="contentWrapper" |
72 | lines={10} | 72 | style={{ display: 'flex', gap: '8px' }} |
73 | scale={0.3} | 73 | > |
74 | color="#FFF" | 74 | <Loader size={18} loaded={!ctaLoading} color="#FFFFFF" /> |
75 | // @ts-expect-error Property 'component' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps> | 75 | {ctaLabel} |
76 | component="span" | 76 | </div> |
77 | /> | ||
78 | {ctaLabel} | ||
79 | </button> | 77 | </button> |
80 | )} | 78 | )} |
81 | {!sticky && ( | 79 | {!sticky && ( |
diff --git a/src/components/ui/Infobox.tsx b/src/components/ui/Infobox.tsx index a794a5e9b..742717ed7 100644 --- a/src/components/ui/Infobox.tsx +++ b/src/components/ui/Infobox.tsx | |||
@@ -1,10 +1,10 @@ | |||
1 | import { Component, MouseEventHandler, ReactElement, ReactNode } from 'react'; | 1 | import { Component, MouseEventHandler, ReactElement, ReactNode } from 'react'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import Loader from 'react-loader'; | ||
4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
5 | import { mdiAlert, mdiCheckboxMarkedCircleOutline, mdiClose } from '@mdi/js'; | 4 | import { mdiAlert, mdiCheckboxMarkedCircleOutline, mdiClose } from '@mdi/js'; |
6 | import { noop } from 'lodash'; | 5 | import { noop } from 'lodash'; |
7 | import { observer } from 'mobx-react'; | 6 | import { observer } from 'mobx-react'; |
7 | import Loader from './loader/index'; | ||
8 | import Icon from './icon'; | 8 | import Icon from './icon'; |
9 | 9 | ||
10 | const icons = { | 10 | const icons = { |
@@ -80,15 +80,13 @@ class Infobox extends Component<IProps, IState> { | |||
80 | <div className="infobox__content">{children}</div> | 80 | <div className="infobox__content">{children}</div> |
81 | {ctaLabel && ( | 81 | {ctaLabel && ( |
82 | <button className="infobox__cta" onClick={ctaOnClick} type="button"> | 82 | <button className="infobox__cta" onClick={ctaOnClick} type="button"> |
83 | <Loader | 83 | <div |
84 | loaded={!ctaLoading} | 84 | className="contentWrapper" |
85 | lines={10} | 85 | style={{ display: 'flex', gap: '8px' }} |
86 | scale={0.3} | 86 | > |
87 | color="#FFF" | 87 | <Loader size={18} loaded={!ctaLoading} color="#FFFFFF" /> |
88 | // @ts-expect-error Property 'component' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps> | 88 | {ctaLabel} |
89 | component="span" | 89 | </div> |
90 | /> | ||
91 | {ctaLabel} | ||
92 | </button> | 90 | </button> |
93 | )} | 91 | )} |
94 | {dismissible && ( | 92 | {dismissible && ( |
diff --git a/src/components/ui/Loader.tsx b/src/components/ui/Loader.tsx deleted file mode 100644 index d4457ae5f..000000000 --- a/src/components/ui/Loader.tsx +++ /dev/null | |||
@@ -1,46 +0,0 @@ | |||
1 | import { Component, ReactElement, ReactNode } from 'react'; | ||
2 | import { observer, inject } from 'mobx-react'; | ||
3 | import Loader from 'react-loader'; | ||
4 | |||
5 | import { FerdiumStores } from '../../@types/stores.types'; | ||
6 | |||
7 | interface IProps { | ||
8 | className?: string; | ||
9 | color?: string; | ||
10 | loaded?: boolean; | ||
11 | stores?: FerdiumStores; | ||
12 | children?: ReactNode; | ||
13 | } | ||
14 | |||
15 | // TODO: Can this file be merged into the './loader/index.tsx' file? | ||
16 | @inject('stores') | ||
17 | @observer | ||
18 | class LoaderComponent extends Component<IProps> { | ||
19 | render(): ReactElement { | ||
20 | const { | ||
21 | loaded = false, | ||
22 | color = 'ACCENT', | ||
23 | className, | ||
24 | children, | ||
25 | } = this.props; | ||
26 | |||
27 | const loaderColor = | ||
28 | color === 'ACCENT' ? this.props.stores!.settings.app.accentColor : color; | ||
29 | |||
30 | return ( | ||
31 | // @ts-expect-error Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps>' | ||
32 | <Loader | ||
33 | loaded={loaded} | ||
34 | width={4} | ||
35 | scale={0.6} | ||
36 | color={loaderColor} | ||
37 | component="span" | ||
38 | className={className} | ||
39 | > | ||
40 | {children} | ||
41 | </Loader> | ||
42 | ); | ||
43 | } | ||
44 | } | ||
45 | |||
46 | export default LoaderComponent; | ||
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx index c37a88afa..f8bcf76b2 100644 --- a/src/components/ui/button/index.tsx +++ b/src/components/ui/button/index.tsx | |||
@@ -5,7 +5,7 @@ import { Property } from 'csstype'; | |||
5 | import { noop } from 'lodash'; | 5 | import { noop } from 'lodash'; |
6 | import { Component, MouseEventHandler } from 'react'; | 6 | import { Component, MouseEventHandler } from 'react'; |
7 | import withStyles, { WithStylesProps } from 'react-jss'; | 7 | import withStyles, { WithStylesProps } from 'react-jss'; |
8 | import Loader from 'react-loader'; | 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 | 11 | ||
@@ -111,16 +111,8 @@ const styles = (theme: Theme) => ({ | |||
111 | disabled: { | 111 | disabled: { |
112 | opacity: theme.inputDisabledOpacity, | 112 | opacity: theme.inputDisabledOpacity, |
113 | }, | 113 | }, |
114 | loader: { | ||
115 | position: 'relative' as Property.Position, | ||
116 | width: 20, | ||
117 | height: 18, | ||
118 | zIndex: 9999, | ||
119 | }, | ||
120 | loaderContainer: { | 114 | loaderContainer: { |
121 | width: (props: IProps): string => (props.busy ? '40px' : '0'), | ||
122 | height: 20, | 115 | height: 20, |
123 | overflow: 'hidden', | ||
124 | transition: loaderContainerTransition, | 116 | transition: loaderContainerTransition, |
125 | marginLeft: (props: IProps): number => (props.busy ? 20 : 10), | 117 | marginLeft: (props: IProps): number => (props.busy ? 20 : 10), |
126 | marginRight: (props: IProps): number => (props.busy ? -20 : -10), | 118 | marginRight: (props: IProps): number => (props.busy ? -20 : -10), |
@@ -200,18 +192,11 @@ class ButtonComponent extends Component<IProps, IState> { | |||
200 | 192 | ||
201 | const content = ( | 193 | const content = ( |
202 | <> | 194 | <> |
203 | <div className={classes.loaderContainer}> | 195 | {showLoader && ( |
204 | {showLoader && ( | 196 | <div className={classes.loaderContainer}> |
205 | <Loader | 197 | <Loader size={18} color="#FFFFFF" /> |
206 | loaded={false} | 198 | </div> |
207 | width={4} | 199 | )} |
208 | scale={0.45} | ||
209 | // color={theme.buttonLoaderColor[buttonType!]} | ||
210 | // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps> | ||
211 | parentClassName={classes.loader} | ||
212 | /> | ||
213 | )} | ||
214 | </div> | ||
215 | <div className={classes.label}> | 200 | <div className={classes.label}> |
216 | {icon && <Icon path={icon} size={0.8} className={classes.icon} />} | 201 | {icon && <Icon path={icon} size={0.8} className={classes.icon} />} |
217 | {label} | 202 | {label} |
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx index 957899bdc..2cee00d96 100644 --- a/src/components/ui/loader/index.tsx +++ b/src/components/ui/loader/index.tsx | |||
@@ -1,26 +1,39 @@ | |||
1 | import classnames from 'classnames'; | 1 | import classnames from 'classnames'; |
2 | import { Component } from 'react'; | 2 | import { Component } from 'react'; |
3 | import injectStyle, { WithStylesProps } from 'react-jss'; | 3 | import injectStyle, { WithStylesProps } from 'react-jss'; |
4 | import ReactLoader from 'react-loader'; | 4 | import { Oval } from 'react-loader-spinner'; |
5 | import { Theme } from '../../../themes'; | 5 | import { inject } from 'mobx-react'; |
6 | import { FerdiumStores } from '../../../@types/stores.types'; | ||
6 | 7 | ||
7 | const styles = (theme: Theme) => ({ | 8 | const styles = () => ({ |
8 | container: { | 9 | container: { |
9 | position: 'relative', | 10 | position: 'relative', |
10 | height: 60, | 11 | display: 'flex', |
12 | justifyContent: 'center', | ||
13 | alignItems: 'center', | ||
14 | height: 'inherit', | ||
11 | }, | 15 | }, |
12 | loader: {}, | ||
13 | color: theme.colorText, | ||
14 | }); | 16 | }); |
15 | 17 | ||
16 | interface IProps extends WithStylesProps<typeof styles> { | 18 | interface IProps extends WithStylesProps<typeof styles> { |
17 | className?: string; | 19 | className?: string; |
18 | color?: string; | 20 | color?: string; |
21 | size?: number; | ||
22 | loaded?: boolean; | ||
23 | stores?: FerdiumStores; | ||
19 | } | 24 | } |
20 | 25 | ||
26 | @inject('stores') | ||
21 | class LoaderComponent extends Component<IProps> { | 27 | class LoaderComponent extends Component<IProps> { |
22 | render() { | 28 | render() { |
23 | const { classes, className, color } = this.props; | 29 | const { |
30 | classes, | ||
31 | className, | ||
32 | size = 36, | ||
33 | color = this.props.stores?.settings.app.accentColor, | ||
34 | loaded = false, | ||
35 | } = this.props; | ||
36 | const loaderColor = color || '#FFFFFF'; | ||
24 | 37 | ||
25 | return ( | 38 | return ( |
26 | <div | 39 | <div |
@@ -30,13 +43,13 @@ class LoaderComponent extends Component<IProps> { | |||
30 | })} | 43 | })} |
31 | data-type="franz-loader" | 44 | data-type="franz-loader" |
32 | > | 45 | > |
33 | <ReactLoader | 46 | <Oval |
34 | loaded={false} | 47 | strokeWidth={5} |
35 | width={4} | 48 | color={loaderColor} |
36 | scale={0.75} | 49 | secondaryColor={loaderColor} |
37 | color={color || classes.color} | 50 | height={size} |
38 | // @ts-expect-error Property 'parentClassName' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactLoader> & Readonly<LoaderProps></LoaderProps> | 51 | width={size} |
39 | parentClassName={classes.loader} | 52 | visible={!loaded} |
40 | /> | 53 | /> |
41 | </div> | 54 | </div> |
42 | ); | 55 | ); |
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx index e1cc0f785..0fce811e5 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx | |||
@@ -3,9 +3,8 @@ import { observer } from 'mobx-react'; | |||
3 | import withStyles, { WithStylesProps } from 'react-jss'; | 3 | import withStyles, { WithStylesProps } from 'react-jss'; |
4 | import classnames from 'classnames'; | 4 | 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/index'; | 6 | import Loader from '../../../components/ui/loader'; |
7 | import { workspaceStore } from '../index'; | 7 | import { workspaceStore } from '../index'; |
8 | import { Theme } from '../../../themes'; | ||
9 | 8 | ||
10 | const messages = defineMessages({ | 9 | const messages = defineMessages({ |
11 | switchingTo: { | 10 | switchingTo: { |
@@ -41,8 +40,6 @@ const styles = theme => ({ | |||
41 | zIndex: 200, | 40 | zIndex: 200, |
42 | }, | 41 | }, |
43 | spinner: { | 42 | spinner: { |
44 | width: 40, | ||
45 | height: 40, | ||
46 | marginRight: 10, | 43 | marginRight: 10, |
47 | }, | 44 | }, |
48 | message: { | 45 | message: { |
@@ -52,14 +49,14 @@ const styles = theme => ({ | |||
52 | }, | 49 | }, |
53 | }); | 50 | }); |
54 | 51 | ||
55 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { | 52 | interface IProps |
56 | theme?: Theme; | 53 | extends WithStylesProps<typeof styles>, |
57 | } | 54 | WrappedComponentProps {} |
58 | 55 | ||
59 | @observer | 56 | @observer |
60 | class WorkspaceSwitchingIndicator extends Component<IProps> { | 57 | class WorkspaceSwitchingIndicator extends Component<IProps> { |
61 | render(): ReactElement | null { | 58 | render(): ReactElement | null { |
62 | const { classes, intl, theme } = this.props; | 59 | const { classes, intl } = this.props; |
63 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; | 60 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; |
64 | 61 | ||
65 | if (!isSwitchingWorkspace) { | 62 | if (!isSwitchingWorkspace) { |
@@ -73,10 +70,7 @@ class WorkspaceSwitchingIndicator extends Component<IProps> { | |||
73 | return ( | 70 | return ( |
74 | <div className={classnames([classes.wrapper])}> | 71 | <div className={classnames([classes.wrapper])}> |
75 | <div className={classes.component}> | 72 | <div className={classes.component}> |
76 | <Loader | 73 | <Loader className={classes.spinner} color="#FFFFFF" /> |
77 | className={classes.spinner} | ||
78 | color={theme?.workspaces.switchingIndicator.spinnerColor} | ||
79 | /> | ||
80 | <p className={classes.message}> | 74 | <p className={classes.message}> |
81 | {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`} | 75 | {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`} |
82 | </p> | 76 | </p> |
diff --git a/src/features/workspaces/components/WorkspacesDashboard.tsx b/src/features/workspaces/components/WorkspacesDashboard.tsx index ba06730a0..0a417bffd 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.tsx +++ b/src/features/workspaces/components/WorkspacesDashboard.tsx | |||
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react'; | |||
3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | 3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; |
4 | import withStyles, { WithStylesProps } from 'react-jss'; | 4 | import withStyles, { WithStylesProps } from 'react-jss'; |
5 | import Infobox from '../../../components/ui/infobox/index'; | 5 | import Infobox from '../../../components/ui/infobox/index'; |
6 | import Loader from '../../../components/ui/Loader'; | 6 | import Loader from '../../../components/ui/loader'; |
7 | import WorkspaceItem from './WorkspaceItem'; | 7 | import WorkspaceItem from './WorkspaceItem'; |
8 | import CreateWorkspaceForm from './CreateWorkspaceForm'; | 8 | import CreateWorkspaceForm from './CreateWorkspaceForm'; |
9 | import Request from '../../../stores/lib/Request'; | 9 | import Request from '../../../stores/lib/Request'; |
diff --git a/src/themes/default/index.ts b/src/themes/default/index.ts index 31c6cbd63..cc886f299 100644 --- a/src/themes/default/index.ts +++ b/src/themes/default/index.ts | |||
@@ -226,9 +226,6 @@ export default (brandPrimary: string) => { | |||
226 | }, | 226 | }, |
227 | }, | 227 | }, |
228 | }, | 228 | }, |
229 | switchingIndicator: { | ||
230 | spinnerColor: 'white', | ||
231 | }, | ||
232 | }, | 229 | }, |
233 | 230 | ||
234 | // Todos | 231 | // Todos |