added generic pro badge component for settings nav

7 files changed, 48 insertions, 70 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';
 import PropTypes from 'prop-types';
 import { defineMessages, intlShape } from 'react-intl';
 import { inject, observer } from 'mobx-react';
-import { Icon } from '@meetfranz/ui';
+import { ProBadge } from '@meetfranz/ui';
 
 import Link from '../../ui/Link';
 import { workspaceStore } from '../../../features/workspaces';
+import UIStore from '../../../stores/UIStore';
 
 const messages = defineMessages({
   availableServices: {
@@ -40,6 +41,9 @@ const messages = defineMessages({
 
 export default @inject('stores') @observer class SettingsNavigation extends Component {
   static propTypes = {
+    stores: PropTypes.shape({
+      ui: PropTypes.instanceOf(UIStore).isRequired,
+    }).isRequired,
     serviceCount: PropTypes.number.isRequired,
     workspaceCount: PropTypes.number.isRequired,
   };
@@ -49,7 +53,8 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
   };
 
   render() {
-    const { serviceCount, workspaceCount } = this.props;
+    const { serviceCount, workspaceCount, stores } = this.props;
+    const { isDarkThemeActive } = stores.ui;
     const { intl } = this.context;
 
     return (
@@ -79,9 +84,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
             {intl.formatMessage(messages.yourWorkspaces)}
             {' '}
             {workspaceStore.isPremiumUpgradeRequired ? (
-              <span className="badge badge--pro">
-                <Icon icon="mdiStar" className="badge-icon-pro" />
-              </span>
+              <ProBadge inverted={!isDarkThemeActive && workspaceStore.isSettingsRouteActive} />
             ) : (
               <span className="badge">{workspaceCount}</span>
             )}
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 {
 
   @observable isWorkspaceDrawerOpen = false;
 
+  @observable isSettingsRouteActive = null;
+
   @computed get workspaces() {
     if (!this.isFeatureActive) return [];
     return getUserWorkspacesRequest.result || [];
@@ -104,8 +106,6 @@ export default class WorkspacesStore extends FeatureStore {
 
   _wasDrawerOpenBeforeSettingsRoute = null;
 
-  _isSettingsRouteActive = null;
-
   _getWorkspaceById = id => this.workspaces.find(w => w.id === id);
 
   _updateSettings = (changes) => {
@@ -239,17 +239,17 @@ export default class WorkspacesStore extends FeatureStore {
   _openDrawerWithSettingsReaction = () => {
     const { router } = this.stores;
     const isWorkspaceSettingsRoute = router.location.pathname.includes(WORKSPACES_ROUTES.ROOT);
-    const isSwitchingToSettingsRoute = !this._isSettingsRouteActive && isWorkspaceSettingsRoute;
-    const isLeavingSettingsRoute = !isWorkspaceSettingsRoute && this._isSettingsRouteActive;
+    const isSwitchingToSettingsRoute = !this.isSettingsRouteActive && isWorkspaceSettingsRoute;
+    const isLeavingSettingsRoute = !isWorkspaceSettingsRoute && this.isSettingsRouteActive;
 
     if (isSwitchingToSettingsRoute) {
-      this._isSettingsRouteActive = true;
+      this.isSettingsRouteActive = true;
       this._wasDrawerOpenBeforeSettingsRoute = this.isWorkspaceDrawerOpen;
       if (!this._wasDrawerOpenBeforeSettingsRoute) {
         workspaceActions.toggleWorkspaceDrawer();
       }
     } else if (isLeavingSettingsRoute) {
-      this._isSettingsRouteActive = false;
+      this.isSettingsRouteActive = false;
       if (!this._wasDrawerOpenBeforeSettingsRoute && this.isWorkspaceDrawerOpen) {
         workspaceActions.toggleWorkspaceDrawer();
       }
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 @@
         "defaultMessage": "!!!Available services",
         "end": {
           "column": 3,
-          "line": 14
+          "line": 15
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.availableServices",
         "start": {
           "column": 21,
-          "line": 11
+          "line": 12
         }
       },
       {
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 19
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.yourServices",
         "start": {
           "column": 16,
-          "line": 15
+          "line": 16
         }
       },
       {
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 23
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.yourWorkspaces",
         "start": {
           "column": 18,
-          "line": 19
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!Account",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 27
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.account",
         "start": {
           "column": 11,
-          "line": 23
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Settings",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 31
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.settings",
         "start": {
           "column": 12,
-          "line": 27
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Invite Friends",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 35
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.inviteFriends",
         "start": {
           "column": 17,
-          "line": 31
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!!Logout",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 39
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.logout",
         "start": {
           "column": 10,
-          "line": 35
+          "line": 36
         }
       }
     ],
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 @@
   "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>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
+}
\ 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 @@
     "defaultMessage": "!!!Available services",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 11,
+      "line": 12,
       "column": 21
     },
     "end": {
-      "line": 14,
+      "line": 15,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 15,
+      "line": 16,
       "column": 16
     },
     "end": {
-      "line": 18,
+      "line": 19,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Your workspaces",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 19,
+      "line": 20,
       "column": 18
     },
     "end": {
-      "line": 22,
+      "line": 23,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Account",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 23,
+      "line": 24,
       "column": 11
     },
     "end": {
-      "line": 26,
+      "line": 27,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Settings",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 27,
+      "line": 28,
       "column": 12
     },
     "end": {
-      "line": 30,
+      "line": 31,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Invite Friends",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 31,
+      "line": 32,
       "column": 17
     },
     "end": {
-      "line": 34,
+      "line": 35,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Logout",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 35,
+      "line": 36,
       "column": 10
     },
     "end": {
-      "line": 38,
+      "line": 39,
       "column": 3
     }
   }
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 {
     return (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) || !settings.isAppMuted;
   }
 
-  @computed get theme() {
-    if (this.stores.settings.all.app.darkMode) {
-      return theme('dark');
-    }
+  @computed get isDarkThemeActive() {
+    return this.stores.settings.all.app.darkMode;
+  }
 
+  @computed get theme() {
+    if (this.isDarkThemeActive) return theme('dark');
     return theme('default');
   }
 
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 @@
       .badge {
         background: $dark-theme-gray-lighter;
         color: $dark-theme-gray-smoke;
-
-        &.badge--pro {
-          background: $theme-brand-primary;
-          padding: 4px 6px 3px 7px;
-        }
       }
 
       &:hover {
@@ -98,11 +93,6 @@
         .badge {
           background: $dark-theme-gray-lighter;
           color: $dark-theme-gray-smoke;
-
-          &.badge--pro {
-            background: $theme-brand-primary;
-            padding: 4px 6px 3px 7px;
-          }
         }
       }
 
@@ -433,15 +423,6 @@
     text-decoration: none;
     transition: background $theme-transition-time, color $theme-transition-time;
 
-    .badge--pro {
-      background: $theme-brand-primary !important;
-      padding: 4px 6px 3px 7px;
-
-      .badge-icon-pro {
-        fill: white;
-      }
-    }
-
     &:hover {
       background: darken($theme-gray-lightest, 5%);
 
@@ -454,13 +435,6 @@
       background: $theme-brand-primary;
       color: #FFF;
 
-      .badge--pro {
-        background: white !important;
-        .badge-icon-pro {
-          fill: $theme-brand-primary;
-        }
-      }
-
       .badge {
         background: #FFF;
         color: $theme-brand-primary;