diff options
author | 2019-04-10 12:31:34 +0200 | |
---|---|---|
committer | 2019-04-10 12:31:34 +0200 | |
commit | 47ae4fc0b426353e202c683e237710a9714d3ac6 (patch) | |
tree | 0c54d952213c69cc350a8b9347ba7658879c17c9 /src/features | |
parent | refactors workspace theme vars into object structure (diff) | |
download | ferdium-app-47ae4fc0b426353e202c683e237710a9714d3ac6.tar.gz ferdium-app-47ae4fc0b426353e202c683e237710a9714d3ac6.tar.zst ferdium-app-47ae4fc0b426353e202c683e237710a9714d3ac6.zip |
improve contrast of workspace switching indicator
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.js | 18 |
1 files changed, 11 insertions, 7 deletions
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js index ded6b8f2a..c4a800a7b 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js | |||
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
6 | import { Loader } from '@meetfranz/ui'; | ||
6 | import { defineMessages, intlShape } from 'react-intl'; | 7 | import { defineMessages, intlShape } from 'react-intl'; |
7 | 8 | ||
8 | import LoaderComponent from '../../../components/ui/Loader'; | ||
9 | import { workspaceStore } from '../index'; | 9 | import { workspaceStore } from '../index'; |
10 | 10 | ||
11 | const messages = defineMessages({ | 11 | const messages = defineMessages({ |
@@ -39,12 +39,14 @@ const styles = theme => ({ | |||
39 | zIndex: 200, | 39 | zIndex: 200, |
40 | }, | 40 | }, |
41 | spinner: { | 41 | spinner: { |
42 | width: '40px', | 42 | width: 40, |
43 | marginRight: '5px', | 43 | height: 40, |
44 | marginRight: 10, | ||
44 | }, | 45 | }, |
45 | message: { | 46 | message: { |
46 | fontSize: 16, | 47 | fontSize: 16, |
47 | whiteSpace: 'nowrap', | 48 | whiteSpace: 'nowrap', |
49 | color: theme.colorAppLoaderSpinner, | ||
48 | }, | 50 | }, |
49 | }); | 51 | }); |
50 | 52 | ||
@@ -52,6 +54,7 @@ const styles = theme => ({ | |||
52 | class WorkspaceSwitchingIndicator extends Component { | 54 | class WorkspaceSwitchingIndicator extends Component { |
53 | static propTypes = { | 55 | static propTypes = { |
54 | classes: PropTypes.object.isRequired, | 56 | classes: PropTypes.object.isRequired, |
57 | theme: PropTypes.object.isRequired, | ||
55 | }; | 58 | }; |
56 | 59 | ||
57 | static contextTypes = { | 60 | static contextTypes = { |
@@ -59,7 +62,7 @@ class WorkspaceSwitchingIndicator extends Component { | |||
59 | }; | 62 | }; |
60 | 63 | ||
61 | render() { | 64 | render() { |
62 | const { classes } = this.props; | 65 | const { classes, theme } = this.props; |
63 | const { intl } = this.context; | 66 | const { intl } = this.context; |
64 | const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspaceStore; | 67 | const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspaceStore; |
65 | if (!isSwitchingWorkspace) return null; | 68 | if (!isSwitchingWorkspace) return null; |
@@ -72,9 +75,10 @@ class WorkspaceSwitchingIndicator extends Component { | |||
72 | ])} | 75 | ])} |
73 | > | 76 | > |
74 | <div className={classes.component}> | 77 | <div className={classes.component}> |
75 | <div className={classes.spinner}> | 78 | <Loader |
76 | <LoaderComponent /> | 79 | className={classes.spinner} |
77 | </div> | 80 | color={theme.workspaces.switchingIndicator.spinnerColor} |
81 | /> | ||
78 | <p className={classes.message}> | 82 | <p className={classes.message}> |
79 | {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`} | 83 | {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`} |
80 | </p> | 84 | </p> |