diff options
author | 2019-04-10 12:31:34 +0200 | |
---|---|---|
committer | 2019-04-10 12:31:34 +0200 | |
commit | 47ae4fc0b426353e202c683e237710a9714d3ac6 (patch) | |
tree | 0c54d952213c69cc350a8b9347ba7658879c17c9 | |
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
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 3 | ||||
-rw-r--r-- | packages/ui/src/loader/index.tsx | 4 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.js | 18 |
3 files changed, 17 insertions, 8 deletions
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index 48111d22b..d0493b82f 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -196,6 +196,9 @@ export const workspaces = { | |||
196 | }, | 196 | }, |
197 | }, | 197 | }, |
198 | }, | 198 | }, |
199 | switchingIndicator: { | ||
200 | spinnerColor: 'white', | ||
201 | }, | ||
199 | }; | 202 | }; |
200 | 203 | ||
201 | // export const workspaceSettings = { | 204 | // export const workspaceSettings = { |
diff --git a/packages/ui/src/loader/index.tsx b/packages/ui/src/loader/index.tsx index 46545c786..4a3c8274f 100644 --- a/packages/ui/src/loader/index.tsx +++ b/packages/ui/src/loader/index.tsx | |||
@@ -8,6 +8,7 @@ import { IWithStyle } from '../typings/generic'; | |||
8 | 8 | ||
9 | interface IProps extends IWithStyle { | 9 | interface IProps extends IWithStyle { |
10 | className?: string; | 10 | className?: string; |
11 | color?: string; | ||
11 | } | 12 | } |
12 | 13 | ||
13 | const styles = (theme: Theme) => ({ | 14 | const styles = (theme: Theme) => ({ |
@@ -22,6 +23,7 @@ class LoaderComponent extends Component<IProps> { | |||
22 | const { | 23 | const { |
23 | classes, | 24 | classes, |
24 | className, | 25 | className, |
26 | color, | ||
25 | theme, | 27 | theme, |
26 | } = this.props; | 28 | } = this.props; |
27 | 29 | ||
@@ -37,7 +39,7 @@ class LoaderComponent extends Component<IProps> { | |||
37 | loaded={false} | 39 | loaded={false} |
38 | width={4} | 40 | width={4} |
39 | scale={0.75} | 41 | scale={0.75} |
40 | color={theme.colorText} | 42 | color={color || theme.colorText} |
41 | parentClassName={classes.loader} | 43 | parentClassName={classes.loader} |
42 | /> | 44 | /> |
43 | </div> | 45 | </div> |
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> |