Fix styling issues & add premium badge

3 files changed, 9 insertions, 9 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index ea335815c..4a73b51d9 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
+import { ProBadge } from '@meetfranz/ui';
 
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
@@ -143,14 +144,6 @@ export default @observer class AccountDashboard extends Component {
                         src="./assets/images/logo.svg"
                         alt=""
                       />
-                      {user.isPremium && (
-                        <span
-                          className="account__avatar-premium emoji"
-                          data-tip="Premium Supporter Account"
-                        >
-                          <img src="./assets/images/emoji/star.png" alt="" />
-                        </span>
-                      )}
                     </div>
                     <div className="account__info">
                       <h2>
@@ -158,6 +151,7 @@ export default @observer class AccountDashboard extends Component {
                         {user.isPremium && (
                           <>
                             {' '}
+                            <ProBadge />
                             <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
                           </>
                         )}
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index cab6f23d7..df4b3b3b2 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -7,6 +7,7 @@ import { ProBadge } from '@meetfranz/ui';
 import Link from '../../ui/Link';
 import { workspaceStore } from '../../../features/workspaces';
 import UIStore from '../../../stores/UIStore';
+import UserStore from '../../../stores/UserStore';
 
 const messages = defineMessages({
   availableServices: {
@@ -47,6 +48,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
   static propTypes = {
     stores: PropTypes.shape({
       ui: PropTypes.instanceOf(UIStore).isRequired,
+      user: PropTypes.instanceOf(UserStore).isRequired,
     }).isRequired,
     serviceCount: PropTypes.number.isRequired,
     workspaceCount: PropTypes.number.isRequired,
@@ -59,6 +61,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
   render() {
     const { serviceCount, workspaceCount, stores } = this.props;
     const { isDarkThemeActive } = stores.ui;
+    const { router, user } = stores;
     const { intl } = this.context;
 
     return (
@@ -107,6 +110,9 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           activeClassName="is-active"
         >
           {intl.formatMessage(messages.team)}
+          {!user.data.isPremium && (
+            <ProBadge inverted={!isDarkThemeActive && router.location.pathname === '/settings/team'} />
+          )}
         </Link>
         <Link
           to="/settings/app"
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index e222bb14c..3eb464d49 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -29,7 +29,7 @@ const messages = defineMessages({
   },
   manageButton: {
     id: 'settings.team.manageAction',
-    defaultMessage: '!!!Manage your Team',
+    defaultMessage: '!!!Manage your Team on meetfranz.com',
   },
   upgradeButton: {
     id: 'settings.team.upgradeAction',