diff options
author | 2019-04-10 16:12:38 +0200 | |
---|---|---|
committer | 2019-04-10 16:12:38 +0200 | |
commit | 073212bf046b9218f9e3129988b1b63fba5d685d (patch) | |
tree | b6c4c2db33f3a111a82e7801073bb5b697f9a56c | |
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
-rw-r--r-- | packages/ui/src/badge/ProBadge.tsx | 65 | ||||
-rw-r--r-- | packages/ui/src/index.ts | 1 | ||||
-rw-r--r-- | src/components/settings/navigation/SettingsNavigation.js | 13 | ||||
-rw-r--r-- | src/features/workspaces/store.js | 12 | ||||
-rw-r--r-- | src/i18n/locales/defaultMessages.json | 28 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 2 | ||||
-rw-r--r-- | src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json | 28 | ||||
-rw-r--r-- | src/stores/UIStore.js | 9 | ||||
-rw-r--r-- | src/styles/settings.scss | 26 | ||||
-rw-r--r-- | uidev/src/stories/badge.stories.tsx | 12 |
10 files changed, 125 insertions, 71 deletions
diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx new file mode 100644 index 000000000..eb00e156d --- /dev/null +++ b/packages/ui/src/badge/ProBadge.tsx | |||
@@ -0,0 +1,65 @@ | |||
1 | import { Theme } from '@meetfranz/theme'; | ||
2 | import classnames from 'classnames'; | ||
3 | import React, { Component } from 'react'; | ||
4 | import injectStyle from 'react-jss'; | ||
5 | |||
6 | import { Icon, Badge } from '../'; | ||
7 | import { IWithStyle } from '../typings/generic'; | ||
8 | |||
9 | interface IProps extends IWithStyle { | ||
10 | badgeClasses?: string; | ||
11 | iconClasses?: string; | ||
12 | inverted?: boolean; | ||
13 | } | ||
14 | |||
15 | const styles = (theme: Theme) => ({ | ||
16 | badge: { | ||
17 | height: 'auto', | ||
18 | padding: [4, 6, 2, 7], | ||
19 | borderRadius: theme.borderRadiusSmall, | ||
20 | }, | ||
21 | invertedBadge: { | ||
22 | background: theme.styleTypes.primary.contrast, | ||
23 | color: theme.styleTypes.primary.accent, | ||
24 | }, | ||
25 | icon: { | ||
26 | fill: theme.styleTypes.primary.contrast, | ||
27 | }, | ||
28 | invertedIcon: { | ||
29 | fill: theme.styleTypes.primary.accent, | ||
30 | }, | ||
31 | }); | ||
32 | |||
33 | class ProBadgeComponent extends Component<IProps> { | ||
34 | render() { | ||
35 | const { | ||
36 | classes, | ||
37 | badgeClasses, | ||
38 | iconClasses, | ||
39 | inverted, | ||
40 | } = this.props; | ||
41 | |||
42 | return ( | ||
43 | <Badge | ||
44 | type="primary" | ||
45 | className={classnames([ | ||
46 | classes.badge, | ||
47 | inverted && classes.invertedBadge, | ||
48 | badgeClasses, | ||
49 | ])} | ||
50 | data-type="franz-badge" | ||
51 | > | ||
52 | <Icon | ||
53 | icon="mdiStar" | ||
54 | className={classnames([ | ||
55 | classes.icon, | ||
56 | inverted && classes.invertedIcon, | ||
57 | iconClasses, | ||
58 | ])} | ||
59 | /> | ||
60 | </Badge> | ||
61 | ); | ||
62 | } | ||
63 | } | ||
64 | |||
65 | export const ProBadge = injectStyle(styles)(ProBadgeComponent); | ||
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 1eeec5144..666495ce9 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts | |||
@@ -3,3 +3,4 @@ export { Infobox } from './infobox'; | |||
3 | export * from './headline'; | 3 | export * from './headline'; |
4 | export { Loader } from './loader'; | 4 | export { Loader } from './loader'; |
5 | export { Badge } from './badge'; | 5 | export { Badge } from './badge'; |
6 | export { ProBadge } from './badge/ProBadge'; | ||
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 | )} |
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js index 2e1764f99..ba48022c2 100644 --- a/src/features/workspaces/store.js +++ b/src/features/workspaces/store.js | |||
@@ -36,6 +36,8 @@ export default class WorkspacesStore extends FeatureStore { | |||
36 | 36 | ||
37 | @observable isWorkspaceDrawerOpen = false; | 37 | @observable isWorkspaceDrawerOpen = false; |
38 | 38 | ||
39 | @observable isSettingsRouteActive = null; | ||
40 | |||
39 | @computed get workspaces() { | 41 | @computed get workspaces() { |
40 | if (!this.isFeatureActive) return []; | 42 | if (!this.isFeatureActive) return []; |
41 | return getUserWorkspacesRequest.result || []; | 43 | return getUserWorkspacesRequest.result || []; |
@@ -104,8 +106,6 @@ export default class WorkspacesStore extends FeatureStore { | |||
104 | 106 | ||
105 | _wasDrawerOpenBeforeSettingsRoute = null; | 107 | _wasDrawerOpenBeforeSettingsRoute = null; |
106 | 108 | ||
107 | _isSettingsRouteActive = null; | ||
108 | |||
109 | _getWorkspaceById = id => this.workspaces.find(w => w.id === id); | 109 | _getWorkspaceById = id => this.workspaces.find(w => w.id === id); |
110 | 110 | ||
111 | _updateSettings = (changes) => { | 111 | _updateSettings = (changes) => { |
@@ -239,17 +239,17 @@ export default class WorkspacesStore extends FeatureStore { | |||
239 | _openDrawerWithSettingsReaction = () => { | 239 | _openDrawerWithSettingsReaction = () => { |
240 | const { router } = this.stores; | 240 | const { router } = this.stores; |
241 | const isWorkspaceSettingsRoute = router.location.pathname.includes(WORKSPACES_ROUTES.ROOT); | 241 | const isWorkspaceSettingsRoute = router.location.pathname.includes(WORKSPACES_ROUTES.ROOT); |
242 | const isSwitchingToSettingsRoute = !this._isSettingsRouteActive && isWorkspaceSettingsRoute; | 242 | const isSwitchingToSettingsRoute = !this.isSettingsRouteActive && isWorkspaceSettingsRoute; |
243 | const isLeavingSettingsRoute = !isWorkspaceSettingsRoute && this._isSettingsRouteActive; | 243 | const isLeavingSettingsRoute = !isWorkspaceSettingsRoute && this.isSettingsRouteActive; |
244 | 244 | ||
245 | if (isSwitchingToSettingsRoute) { | 245 | if (isSwitchingToSettingsRoute) { |
246 | this._isSettingsRouteActive = true; | 246 | this.isSettingsRouteActive = true; |
247 | this._wasDrawerOpenBeforeSettingsRoute = this.isWorkspaceDrawerOpen; | 247 | this._wasDrawerOpenBeforeSettingsRoute = this.isWorkspaceDrawerOpen; |
248 | if (!this._wasDrawerOpenBeforeSettingsRoute) { | 248 | if (!this._wasDrawerOpenBeforeSettingsRoute) { |
249 | workspaceActions.toggleWorkspaceDrawer(); | 249 | workspaceActions.toggleWorkspaceDrawer(); |
250 | } | 250 | } |
251 | } else if (isLeavingSettingsRoute) { | 251 | } else if (isLeavingSettingsRoute) { |
252 | this._isSettingsRouteActive = false; | 252 | this.isSettingsRouteActive = false; |
253 | if (!this._wasDrawerOpenBeforeSettingsRoute && this.isWorkspaceDrawerOpen) { | 253 | if (!this._wasDrawerOpenBeforeSettingsRoute && this.isWorkspaceDrawerOpen) { |
254 | workspaceActions.toggleWorkspaceDrawer(); | 254 | workspaceActions.toggleWorkspaceDrawer(); |
255 | } | 255 | } |
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index f882e6030..791c4dd53 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json | |||
@@ -1302,91 +1302,91 @@ | |||
1302 | "defaultMessage": "!!!Available services", | 1302 | "defaultMessage": "!!!Available services", |
1303 | "end": { | 1303 | "end": { |
1304 | "column": 3, | 1304 | "column": 3, |
1305 | "line": 14 | 1305 | "line": 15 |
1306 | }, | 1306 | }, |
1307 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1307 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1308 | "id": "settings.navigation.availableServices", | 1308 | "id": "settings.navigation.availableServices", |
1309 | "start": { | 1309 | "start": { |
1310 | "column": 21, | 1310 | "column": 21, |
1311 | "line": 11 | 1311 | "line": 12 |
1312 | } | 1312 | } |
1313 | }, | 1313 | }, |
1314 | { | 1314 | { |
1315 | "defaultMessage": "!!!Your services", | 1315 | "defaultMessage": "!!!Your services", |
1316 | "end": { | 1316 | "end": { |
1317 | "column": 3, | 1317 | "column": 3, |
1318 | "line": 18 | 1318 | "line": 19 |
1319 | }, | 1319 | }, |
1320 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1320 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1321 | "id": "settings.navigation.yourServices", | 1321 | "id": "settings.navigation.yourServices", |
1322 | "start": { | 1322 | "start": { |
1323 | "column": 16, | 1323 | "column": 16, |
1324 | "line": 15 | 1324 | "line": 16 |
1325 | } | 1325 | } |
1326 | }, | 1326 | }, |
1327 | { | 1327 | { |
1328 | "defaultMessage": "!!!Your workspaces", | 1328 | "defaultMessage": "!!!Your workspaces", |
1329 | "end": { | 1329 | "end": { |
1330 | "column": 3, | 1330 | "column": 3, |
1331 | "line": 22 | 1331 | "line": 23 |
1332 | }, | 1332 | }, |
1333 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1333 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1334 | "id": "settings.navigation.yourWorkspaces", | 1334 | "id": "settings.navigation.yourWorkspaces", |
1335 | "start": { | 1335 | "start": { |
1336 | "column": 18, | 1336 | "column": 18, |
1337 | "line": 19 | 1337 | "line": 20 |
1338 | } | 1338 | } |
1339 | }, | 1339 | }, |
1340 | { | 1340 | { |
1341 | "defaultMessage": "!!!Account", | 1341 | "defaultMessage": "!!!Account", |
1342 | "end": { | 1342 | "end": { |
1343 | "column": 3, | 1343 | "column": 3, |
1344 | "line": 26 | 1344 | "line": 27 |
1345 | }, | 1345 | }, |
1346 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1346 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1347 | "id": "settings.navigation.account", | 1347 | "id": "settings.navigation.account", |
1348 | "start": { | 1348 | "start": { |
1349 | "column": 11, | 1349 | "column": 11, |
1350 | "line": 23 | 1350 | "line": 24 |
1351 | } | 1351 | } |
1352 | }, | 1352 | }, |
1353 | { | 1353 | { |
1354 | "defaultMessage": "!!!Settings", | 1354 | "defaultMessage": "!!!Settings", |
1355 | "end": { | 1355 | "end": { |
1356 | "column": 3, | 1356 | "column": 3, |
1357 | "line": 30 | 1357 | "line": 31 |
1358 | }, | 1358 | }, |
1359 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1359 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1360 | "id": "settings.navigation.settings", | 1360 | "id": "settings.navigation.settings", |
1361 | "start": { | 1361 | "start": { |
1362 | "column": 12, | 1362 | "column": 12, |
1363 | "line": 27 | 1363 | "line": 28 |
1364 | } | 1364 | } |
1365 | }, | 1365 | }, |
1366 | { | 1366 | { |
1367 | "defaultMessage": "!!!Invite Friends", | 1367 | "defaultMessage": "!!!Invite Friends", |
1368 | "end": { | 1368 | "end": { |
1369 | "column": 3, | 1369 | "column": 3, |
1370 | "line": 34 | 1370 | "line": 35 |
1371 | }, | 1371 | }, |
1372 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1372 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1373 | "id": "settings.navigation.inviteFriends", | 1373 | "id": "settings.navigation.inviteFriends", |
1374 | "start": { | 1374 | "start": { |
1375 | "column": 17, | 1375 | "column": 17, |
1376 | "line": 31 | 1376 | "line": 32 |
1377 | } | 1377 | } |
1378 | }, | 1378 | }, |
1379 | { | 1379 | { |
1380 | "defaultMessage": "!!!Logout", | 1380 | "defaultMessage": "!!!Logout", |
1381 | "end": { | 1381 | "end": { |
1382 | "column": 3, | 1382 | "column": 3, |
1383 | "line": 38 | 1383 | "line": 39 |
1384 | }, | 1384 | }, |
1385 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1385 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1386 | "id": "settings.navigation.logout", | 1386 | "id": "settings.navigation.logout", |
1387 | "start": { | 1387 | "start": { |
1388 | "column": 10, | 1388 | "column": 10, |
1389 | "line": 35 | 1389 | "line": 36 |
1390 | } | 1390 | } |
1391 | } | 1391 | } |
1392 | ], | 1392 | ], |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index db1d51f3b..6591af2e2 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -315,4 +315,4 @@ | |||
315 | "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>", | 315 | "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>", |
316 | "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings", | 316 | "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings", |
317 | "workspaces.switchingIndicator.switchingTo": "Switching to" | 317 | "workspaces.switchingIndicator.switchingTo": "Switching to" |
318 | } | 318 | } \ No newline at end of file |
diff --git a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json index de78a71cf..77b0ed8a4 100644 --- a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json +++ b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json | |||
@@ -4,11 +4,11 @@ | |||
4 | "defaultMessage": "!!!Available services", | 4 | "defaultMessage": "!!!Available services", |
5 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 5 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
6 | "start": { | 6 | "start": { |
7 | "line": 11, | 7 | "line": 12, |
8 | "column": 21 | 8 | "column": 21 |
9 | }, | 9 | }, |
10 | "end": { | 10 | "end": { |
11 | "line": 14, | 11 | "line": 15, |
12 | "column": 3 | 12 | "column": 3 |
13 | } | 13 | } |
14 | }, | 14 | }, |
@@ -17,11 +17,11 @@ | |||
17 | "defaultMessage": "!!!Your services", | 17 | "defaultMessage": "!!!Your services", |
18 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 18 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
19 | "start": { | 19 | "start": { |
20 | "line": 15, | 20 | "line": 16, |
21 | "column": 16 | 21 | "column": 16 |
22 | }, | 22 | }, |
23 | "end": { | 23 | "end": { |
24 | "line": 18, | 24 | "line": 19, |
25 | "column": 3 | 25 | "column": 3 |
26 | } | 26 | } |
27 | }, | 27 | }, |
@@ -30,11 +30,11 @@ | |||
30 | "defaultMessage": "!!!Your workspaces", | 30 | "defaultMessage": "!!!Your workspaces", |
31 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 31 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
32 | "start": { | 32 | "start": { |
33 | "line": 19, | 33 | "line": 20, |
34 | "column": 18 | 34 | "column": 18 |
35 | }, | 35 | }, |
36 | "end": { | 36 | "end": { |
37 | "line": 22, | 37 | "line": 23, |
38 | "column": 3 | 38 | "column": 3 |
39 | } | 39 | } |
40 | }, | 40 | }, |
@@ -43,11 +43,11 @@ | |||
43 | "defaultMessage": "!!!Account", | 43 | "defaultMessage": "!!!Account", |
44 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 44 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
45 | "start": { | 45 | "start": { |
46 | "line": 23, | 46 | "line": 24, |
47 | "column": 11 | 47 | "column": 11 |
48 | }, | 48 | }, |
49 | "end": { | 49 | "end": { |
50 | "line": 26, | 50 | "line": 27, |
51 | "column": 3 | 51 | "column": 3 |
52 | } | 52 | } |
53 | }, | 53 | }, |
@@ -56,11 +56,11 @@ | |||
56 | "defaultMessage": "!!!Settings", | 56 | "defaultMessage": "!!!Settings", |
57 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 57 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
58 | "start": { | 58 | "start": { |
59 | "line": 27, | 59 | "line": 28, |
60 | "column": 12 | 60 | "column": 12 |
61 | }, | 61 | }, |
62 | "end": { | 62 | "end": { |
63 | "line": 30, | 63 | "line": 31, |
64 | "column": 3 | 64 | "column": 3 |
65 | } | 65 | } |
66 | }, | 66 | }, |
@@ -69,11 +69,11 @@ | |||
69 | "defaultMessage": "!!!Invite Friends", | 69 | "defaultMessage": "!!!Invite Friends", |
70 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 70 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
71 | "start": { | 71 | "start": { |
72 | "line": 31, | 72 | "line": 32, |
73 | "column": 17 | 73 | "column": 17 |
74 | }, | 74 | }, |
75 | "end": { | 75 | "end": { |
76 | "line": 34, | 76 | "line": 35, |
77 | "column": 3 | 77 | "column": 3 |
78 | } | 78 | } |
79 | }, | 79 | }, |
@@ -82,11 +82,11 @@ | |||
82 | "defaultMessage": "!!!Logout", | 82 | "defaultMessage": "!!!Logout", |
83 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 83 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
84 | "start": { | 84 | "start": { |
85 | "line": 35, | 85 | "line": 36, |
86 | "column": 10 | 86 | "column": 10 |
87 | }, | 87 | }, |
88 | "end": { | 88 | "end": { |
89 | "line": 38, | 89 | "line": 39, |
90 | "column": 3 | 90 | "column": 3 |
91 | } | 91 | } |
92 | } | 92 | } |
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js index bb7965a4a..a95a8e1e0 100644 --- a/src/stores/UIStore.js +++ b/src/stores/UIStore.js | |||
@@ -21,11 +21,12 @@ export default class UIStore extends Store { | |||
21 | return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.isAppMuted; | 21 | return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.isAppMuted; |
22 | } | 22 | } |
23 | 23 | ||
24 | @computed get theme() { | 24 | @computed get isDarkThemeActive() { |
25 | if (this.stores.settings.all.app.darkMode) { | 25 | return this.stores.settings.all.app.darkMode; |
26 | return theme('dark'); | 26 | } |
27 | } | ||
28 | 27 | ||
28 | @computed get theme() { | ||
29 | if (this.isDarkThemeActive) return theme('dark'); | ||
29 | return theme('default'); | 30 | return theme('default'); |
30 | } | 31 | } |
31 | 32 | ||
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 6340f2951..dd6f56d2b 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -85,11 +85,6 @@ | |||
85 | .badge { | 85 | .badge { |
86 | background: $dark-theme-gray-lighter; | 86 | background: $dark-theme-gray-lighter; |
87 | color: $dark-theme-gray-smoke; | 87 | color: $dark-theme-gray-smoke; |
88 | |||
89 | &.badge--pro { | ||
90 | background: $theme-brand-primary; | ||
91 | padding: 4px 6px 3px 7px; | ||
92 | } | ||
93 | } | 88 | } |
94 | 89 | ||
95 | &:hover { | 90 | &:hover { |
@@ -98,11 +93,6 @@ | |||
98 | .badge { | 93 | .badge { |
99 | background: $dark-theme-gray-lighter; | 94 | background: $dark-theme-gray-lighter; |
100 | color: $dark-theme-gray-smoke; | 95 | color: $dark-theme-gray-smoke; |
101 | |||
102 | &.badge--pro { | ||
103 | background: $theme-brand-primary; | ||
104 | padding: 4px 6px 3px 7px; | ||
105 | } | ||
106 | } | 96 | } |
107 | } | 97 | } |
108 | 98 | ||
@@ -433,15 +423,6 @@ | |||
433 | text-decoration: none; | 423 | text-decoration: none; |
434 | transition: background $theme-transition-time, color $theme-transition-time; | 424 | transition: background $theme-transition-time, color $theme-transition-time; |
435 | 425 | ||
436 | .badge--pro { | ||
437 | background: $theme-brand-primary !important; | ||
438 | padding: 4px 6px 3px 7px; | ||
439 | |||
440 | .badge-icon-pro { | ||
441 | fill: white; | ||
442 | } | ||
443 | } | ||
444 | |||
445 | &:hover { | 426 | &:hover { |
446 | background: darken($theme-gray-lightest, 5%); | 427 | background: darken($theme-gray-lightest, 5%); |
447 | 428 | ||
@@ -454,13 +435,6 @@ | |||
454 | background: $theme-brand-primary; | 435 | background: $theme-brand-primary; |
455 | color: #FFF; | 436 | color: #FFF; |
456 | 437 | ||
457 | .badge--pro { | ||
458 | background: white !important; | ||
459 | .badge-icon-pro { | ||
460 | fill: $theme-brand-primary; | ||
461 | } | ||
462 | } | ||
463 | |||
464 | .badge { | 438 | .badge { |
465 | background: #FFF; | 439 | background: #FFF; |
466 | color: $theme-brand-primary; | 440 | color: $theme-brand-primary; |
diff --git a/uidev/src/stories/badge.stories.tsx b/uidev/src/stories/badge.stories.tsx index 6de2034bf..d7b4d55b5 100644 --- a/uidev/src/stories/badge.stories.tsx +++ b/uidev/src/stories/badge.stories.tsx | |||
@@ -1,6 +1,6 @@ | |||
1 | import React from 'react'; | 1 | import React from 'react'; |
2 | 2 | ||
3 | import { Badge } from '@meetfranz/ui'; | 3 | import { Badge, ProBadge } from '@meetfranz/ui'; |
4 | import { storiesOf } from '../stores/stories'; | 4 | import { storiesOf } from '../stores/stories'; |
5 | 5 | ||
6 | storiesOf('Badge') | 6 | storiesOf('Badge') |
@@ -18,4 +18,14 @@ storiesOf('Badge') | |||
18 | <Badge type="danger">danger</Badge> | 18 | <Badge type="danger">danger</Badge> |
19 | <Badge type="inverted">inverted</Badge> | 19 | <Badge type="inverted">inverted</Badge> |
20 | </> | 20 | </> |
21 | )) | ||
22 | .add('Pro Badge', () => ( | ||
23 | <> | ||
24 | <ProBadge /> | ||
25 | </> | ||
26 | )) | ||
27 | .add('Pro Badge inverted', () => ( | ||
28 | <> | ||
29 | <ProBadge inverted /> | ||
30 | </> | ||
21 | )); | 31 | )); |