6 files changed, 55 insertions, 33 deletions

diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index dc3c1d6f1..945285f5a 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -2,6 +2,7 @@ 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 Link from '../../ui/Link';
 import { workspaceStore } from '../../../features/workspaces';
@@ -77,7 +78,13 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           >
             {intl.formatMessage(messages.yourWorkspaces)}
             {' '}
-            <span className="badge">{workspaceCount}</span>
+            {workspaceStore.isPremiumUpgradeRequired ? (
+              <span className="badge badge--pro">
+                <Icon icon="mdiStar" />
+              </span>
+            ) : (
+              <span className="badge">{workspaceCount}</span>
+            )}
           </Link>
         ) : null}
         <Link
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index a8f4a2cbf..5e3988781 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1302,91 +1302,91 @@
         "defaultMessage": "!!!Available services",
         "end": {
           "column": 3,
-          "line": 13
+          "line": 14
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.availableServices",
         "start": {
           "column": 21,
-          "line": 10
+          "line": 11
         }
       },
       {
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 18
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.yourServices",
         "start": {
           "column": 16,
-          "line": 14
+          "line": 15
         }
       },
       {
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 22
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.yourWorkspaces",
         "start": {
           "column": 18,
-          "line": 18
+          "line": 19
         }
       },
       {
         "defaultMessage": "!!!Account",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 26
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.account",
         "start": {
           "column": 11,
-          "line": 22
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!Settings",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 30
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.settings",
         "start": {
           "column": 12,
-          "line": 26
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Invite Friends",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 34
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.inviteFriends",
         "start": {
           "column": 17,
-          "line": 30
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Logout",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 38
         },
         "file": "src/components/settings/navigation/SettingsNavigation.js",
         "id": "settings.navigation.logout",
         "start": {
           "column": 10,
-          "line": 34
+          "line": 35
         }
       }
     ],
@@ -3381,9 +3381,9 @@
           "line": 35
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
-        "id": "workspaceDrawer.premiumCtaButton",
+        "id": "workspaceDrawer.premiumCtaButtonLabel",
         "start": {
-          "column": 20,
+          "column": 25,
           "line": 32
         }
       }
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 981946d00..5ad1a5deb 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -313,4 +313,4 @@
   "workspaceDrawer.premiumCtaButtonLabel": "Create your first workspace",
   "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>",
   "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 96a42aa80..de78a71cf 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": 10,
+      "line": 11,
       "column": 21
     },
     "end": {
-      "line": 13,
+      "line": 14,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 14,
+      "line": 15,
       "column": 16
     },
     "end": {
-      "line": 17,
+      "line": 18,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Your workspaces",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 18,
+      "line": 19,
       "column": 18
     },
     "end": {
-      "line": 21,
+      "line": 22,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Account",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 22,
+      "line": 23,
       "column": 11
     },
     "end": {
-      "line": 25,
+      "line": 26,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Settings",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 26,
+      "line": 27,
       "column": 12
     },
     "end": {
-      "line": 29,
+      "line": 30,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Invite Friends",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 30,
+      "line": 31,
       "column": 17
     },
     "end": {
-      "line": 33,
+      "line": 34,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Logout",
     "file": "src/components/settings/navigation/SettingsNavigation.js",
     "start": {
-      "line": 34,
+      "line": 35,
       "column": 10
     },
     "end": {
-      "line": 37,
+      "line": 38,
       "column": 3
     }
   }
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index 52e38ad96..8fe576813 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -1,4 +1,9 @@
-import { computed, observable, reaction, runInAction } from 'mobx';
+import {
+  computed,
+  observable,
+  reaction,
+  runInAction,
+} from 'mobx';
 
 import Store from './lib/Store';
 import CachedRequest from './lib/CachedRequest';
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 9fde9a7bf..d97d4ac2c 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -85,6 +85,11 @@
       .badge {
         background: $dark-theme-gray-lighter;
         color: $dark-theme-gray-smoke;
+
+        &.badge--pro {
+          background: $theme-brand-primary;
+          padding: 4px 6px 3px 7px;
+        }
       }
 
       &:hover {
@@ -93,6 +98,11 @@
         .badge {
           background: $dark-theme-gray-lighter;
           color: $dark-theme-gray-smoke;
+
+          &.badge--pro {
+            background: $theme-brand-primary;
+            padding: 4px 6px 3px 7px;
+          }
         }
       }