Fix styling issues & add premium badge

6 files changed, 56 insertions, 59 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',
diff --git a/src/i18n/messages/src/components/settings/account/AccountDashboard.json b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
index 22eaf0381..4969db910 100644
--- a/src/i18n/messages/src/components/settings/account/AccountDashboard.json
+++ b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 13,
+      "line": 14,
       "column": 12
     },
     "end": {
-      "line": 16,
+      "line": 17,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Your Subscription",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 17,
+      "line": 18,
       "column": 24
     },
     "end": {
-      "line": 20,
+      "line": 21,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Upgrade your Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 21,
+      "line": 22,
       "column": 19
     },
     "end": {
-      "line": 24,
+      "line": 25,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!Danger Zone",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 25,
+      "line": 26,
       "column": 22
     },
     "end": {
-      "line": 28,
+      "line": 29,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Manage your subscription",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 29,
+      "line": 30,
       "column": 33
     },
     "end": {
-      "line": 32,
+      "line": 33,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Basic Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 33,
+      "line": 34,
       "column": 20
     },
     "end": {
-      "line": 36,
+      "line": 37,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Premium Supporter Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 37,
+      "line": 38,
       "column": 22
     },
     "end": {
-      "line": 40,
+      "line": 41,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Edit Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 41,
+      "line": 42,
       "column": 21
     },
     "end": {
-      "line": 44,
+      "line": 45,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!Invoices",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 45,
+      "line": 46,
       "column": 18
     },
     "end": {
-      "line": 48,
+      "line": 49,
       "column": 3
     }
   },
@@ -121,11 +121,11 @@
     "defaultMessage": "!!!Download",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 49,
+      "line": 50,
       "column": 19
     },
     "end": {
-      "line": 52,
+      "line": 53,
       "column": 3
     }
   },
@@ -134,11 +134,11 @@
     "defaultMessage": "!!!Could not load user information",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 53,
+      "line": 54,
       "column": 25
     },
     "end": {
-      "line": 56,
+      "line": 57,
       "column": 3
     }
   },
@@ -147,11 +147,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 57,
+      "line": 58,
       "column": 28
     },
     "end": {
-      "line": 60,
+      "line": 61,
       "column": 3
     }
   },
@@ -160,11 +160,11 @@
     "defaultMessage": "!!!Delete account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 61,
+      "line": 62,
       "column": 17
     },
     "end": {
-      "line": 64,
+      "line": 65,
       "column": 3
     }
   },
@@ -173,11 +173,11 @@
     "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 65,
+      "line": 66,
       "column": 14
     },
     "end": {
-      "line": 68,
+      "line": 69,
       "column": 3
     }
   },
@@ -186,11 +186,11 @@
     "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 69,
+      "line": 70,
       "column": 19
     },
     "end": {
-      "line": 72,
+      "line": 73,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/team/TeamDashboard.json b/src/i18n/messages/src/components/settings/team/TeamDashboard.json
index 91b6754ea..6bccc25ff 100644
--- a/src/i18n/messages/src/components/settings/team/TeamDashboard.json
+++ b/src/i18n/messages/src/components/settings/team/TeamDashboard.json
@@ -53,7 +53,7 @@
   },
   {
     "id": "settings.team.manageAction",
-    "defaultMessage": "!!!Manage your Team",
+    "defaultMessage": "!!!Manage your Team on meetfranz.com",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
       "line": 30,
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index efa0ab942..b01412942 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -61,16 +61,6 @@
 
     .account {
       .account__box { background: $dark-theme-gray-darker; }
-
-      .badge--premium {
-        margin-left: 10px;
-      }
-
-      .manage-user-links {
-        margin-top: 20px;
-        display: flex;
-        justify-content: space-between;
-      }
     }
 
     .premium-info {
@@ -334,15 +324,6 @@
     .account__avatar {
       margin-right: 20px;
       position: relative;
-
-      .emoji img { width: 30px; }
-    }
-
-    .account__avatar-premium {
-      font-size: 26px;
-      position: absolute;
-      right: 2px;
-      top: 2px;
     }
 
     .account__info {
@@ -359,6 +340,22 @@
       .badge { margin-left: 10px; }
     }
 
+    .badge--premium {
+      margin-left: 1px;
+      position: relative;
+      top: -3px;
+      padding-top: 4px;
+      color: #FFF;
+      border-radius: 3px;
+    }
+
+
+    .manage-user-links {
+      margin-top: 20px;
+      display: flex;
+      justify-content: space-between;
+    }
+
     .account__subscription-button { margin-left: auto; }
     .franz-form__button { white-space: nowrap; }
     div { height: auto; }