diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-10 16:12:38 +0200 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-10 16:12:38 +0200 |
commit | 073212bf046b9218f9e3129988b1b63fba5d685d (patch) | |
tree | b6c4c2db33f3a111a82e7801073bb5b697f9a56c /src/components | |
parent | improve contrast of workspace switching indicator (diff) | |
download | ferdium-app-073212bf046b9218f9e3129988b1b63fba5d685d.tar.gz ferdium-app-073212bf046b9218f9e3129988b1b63fba5d685d.tar.zst ferdium-app-073212bf046b9218f9e3129988b1b63fba5d685d.zip |
added generic pro badge component for settings nav
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/settings/navigation/SettingsNavigation.js | 13 |
1 files changed, 8 insertions, 5 deletions
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js index 1c51d50d6..993b0a44a 100644 --- a/src/components/settings/navigation/SettingsNavigation.js +++ b/src/components/settings/navigation/SettingsNavigation.js | |||
@@ -2,10 +2,11 @@ import React, { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { defineMessages, intlShape } from 'react-intl'; | 3 | import { defineMessages, intlShape } from 'react-intl'; |
4 | import { inject, observer } from 'mobx-react'; | 4 | import { inject, observer } from 'mobx-react'; |
5 | import { Icon } from '@meetfranz/ui'; | 5 | import { ProBadge } from '@meetfranz/ui'; |
6 | 6 | ||
7 | import Link from '../../ui/Link'; | 7 | import Link from '../../ui/Link'; |
8 | import { workspaceStore } from '../../../features/workspaces'; | 8 | import { workspaceStore } from '../../../features/workspaces'; |
9 | import UIStore from '../../../stores/UIStore'; | ||
9 | 10 | ||
10 | const messages = defineMessages({ | 11 | const messages = defineMessages({ |
11 | availableServices: { | 12 | availableServices: { |
@@ -40,6 +41,9 @@ const messages = defineMessages({ | |||
40 | 41 | ||
41 | export default @inject('stores') @observer class SettingsNavigation extends Component { | 42 | export default @inject('stores') @observer class SettingsNavigation extends Component { |
42 | static propTypes = { | 43 | static propTypes = { |
44 | stores: PropTypes.shape({ | ||
45 | ui: PropTypes.instanceOf(UIStore).isRequired, | ||
46 | }).isRequired, | ||
43 | serviceCount: PropTypes.number.isRequired, | 47 | serviceCount: PropTypes.number.isRequired, |
44 | workspaceCount: PropTypes.number.isRequired, | 48 | workspaceCount: PropTypes.number.isRequired, |
45 | }; | 49 | }; |
@@ -49,7 +53,8 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp | |||
49 | }; | 53 | }; |
50 | 54 | ||
51 | render() { | 55 | render() { |
52 | const { serviceCount, workspaceCount } = this.props; | 56 | const { serviceCount, workspaceCount, stores } = this.props; |
57 | const { isDarkThemeActive } = stores.ui; | ||
53 | const { intl } = this.context; | 58 | const { intl } = this.context; |
54 | 59 | ||
55 | return ( | 60 | return ( |
@@ -79,9 +84,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp | |||
79 | {intl.formatMessage(messages.yourWorkspaces)} | 84 | {intl.formatMessage(messages.yourWorkspaces)} |
80 | {' '} | 85 | {' '} |
81 | {workspaceStore.isPremiumUpgradeRequired ? ( | 86 | {workspaceStore.isPremiumUpgradeRequired ? ( |
82 | <span className="badge badge--pro"> | 87 | <ProBadge inverted={!isDarkThemeActive && workspaceStore.isSettingsRouteActive} /> |
83 | <Icon icon="mdiStar" className="badge-icon-pro" /> | ||
84 | </span> | ||
85 | ) : ( | 88 | ) : ( |
86 | <span className="badge">{workspaceCount}</span> | 89 | <span className="badge">{workspaceCount}</span> |
87 | )} | 90 | )} |