Merge branch 'develop' into i18n

34 files changed, 781 insertions, 250 deletions

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 900a83a78..ac2594604 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -93,9 +93,12 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class AccountDashboard extends Component {
+@observer
+class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
+    isPremiumOverrideUser: PropTypes.bool.isRequired,
+    isProUser: PropTypes.bool.isRequired,
     isLoading: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
     retryUserInfoRequest: PropTypes.func.isRequired,
@@ -115,6 +118,8 @@ export default @observer class AccountDashboard extends Component {
   render() {
     const {
       user,
+      isPremiumOverrideUser,
+      isProUser,
       isLoading,
       userInfoRequestFailed,
       retryUserInfoRequest,
@@ -210,7 +215,7 @@ export default @observer class AccountDashboard extends Component {
                           {intl.formatMessage(messages.yourLicense)}
                         </H2>
                         <p>
-                          {planName}
+                          {isPremiumOverrideUser ? 'Franz Premium' : planName}
                           {user.team.isTrial && (
                             <>
                               {' – '}
@@ -234,11 +239,13 @@ export default @observer class AccountDashboard extends Component {
                           </>
                         )}
                         <div className="manage-user-links">
-                          <Button
-                            label={intl.formatMessage(messages.upgradeAccountToPro)}
-                            className="franz-form__button--primary"
-                            onClick={upgradeToPro}
-                          />
+                          {!isProUser && (
+                            <Button
+                              label={intl.formatMessage(messages.upgradeAccountToPro)}
+                              className="franz-form__button--primary"
+                              onClick={upgradeToPro}
+                            />
+                          )}
                           <Button
                             label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
                             className="franz-form__button--inverted"
@@ -290,3 +297,5 @@ export default @observer class AccountDashboard extends Component {
     );
   }
 }
+
+export default AccountDashboard;
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 75e60b7ec..08988024a 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -218,7 +218,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                 <>
                   <H2>
                     {intl.formatMessage(messages.headlineCustomRecipes)}
-                    {isCommunityRecipesIncludedInCurrentPlan && (
+                    {!isCommunityRecipesIncludedInCurrentPlan && (
                       <ProBadge className={classes.proBadge} />
                     )}
                   </H2>
@@ -247,7 +247,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                 </>
               )}
               <PremiumFeatureContainer
-                condition={(recipeFilter === 'dev' && communityRecipes.length > 0) && isCommunityRecipesIncludedInCurrentPlan}
+                condition={(recipeFilter === 'dev' && communityRecipes.length > 0) && !isCommunityRecipesIncludedInCurrentPlan}
               >
                 {recipeFilter === 'dev' && communityRecipes.length > 0 && (
                   <H3>{intl.formatMessage(messages.headlineCommunityRecipes)}</H3>
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 990ee52e7..a9df980d7 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -5,10 +5,12 @@ import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import injectSheet from 'react-jss';
 
+import { Badge } from '@meetfranz/ui';
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
-import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+import globalMessages from '../../../i18n/globalMessages';
+import UpgradeButton from '../../ui/UpgradeButton';
 
 const messages = defineMessages({
   headline: {
@@ -40,6 +42,7 @@ const messages = defineMessages({
 const styles = {
   cta: {
     margin: [40, 'auto'],
+    height: 'auto',
   },
   container: {
     display: 'flex',
@@ -69,6 +72,17 @@ const styles = {
       order: 1,
     },
   },
+  headline: {
+    marginBottom: 0,
+  },
+  proRequired: {
+    margin: [10, 0, 40],
+    height: 'auto',
+  },
+  buttonContainer: {
+    display: 'flex',
+    height: 'auto',
+  },
 };
 
 
@@ -79,6 +93,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
     retryUserInfoRequest: PropTypes.func.isRequired,
     openTeamManagement: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired,
+    isProUser: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -91,6 +106,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
       userInfoRequestFailed,
       retryUserInfoRequest,
       openTeamManagement,
+      isProUser,
       classes,
     } = this.props;
     const { intl } = this.context;
@@ -123,23 +139,35 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
             <>
               {!isLoading && (
                 <>
-                  <PremiumFeatureContainer>
-                    <>
-                      <h1>{intl.formatMessage(messages.contentHeadline)}</h1>
-                      <div className={classes.container}>
-                        <div className={classes.content}>
-                          <p>{intl.formatMessage(messages.intro)}</p>
-                          <p>{intl.formatMessage(messages.copy)}</p>
-                        </div>
-                        <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
+                  <>
+                    <h1 className={classes.headline}>{intl.formatMessage(messages.contentHeadline)}</h1>
+                    {!isProUser && (
+                      <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
+                    )}
+                    <div className={classes.container}>
+                      <div className={classes.content}>
+                        <p>{intl.formatMessage(messages.intro)}</p>
+                        <p>{intl.formatMessage(messages.copy)}</p>
                       </div>
-                    </>
-                  </PremiumFeatureContainer>
-                  <Button
-                    label={intl.formatMessage(messages.manageButton)}
-                    onClick={openTeamManagement}
-                    className={classes.cta}
-                  />
+                      <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
+                    </div>
+                    <div className={classes.buttonContainer}>
+                      {!isProUser ? (
+                        <UpgradeButton
+                          className={classes.cta}
+                          gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                          requiresPro
+                          short
+                        />
+                      ) : (
+                        <Button
+                          label={intl.formatMessage(messages.manageButton)}
+                          onClick={openTeamManagement}
+                          className={classes.cta}
+                        />
+                      )}
+                    </div>
+                  </>
                 </>
               )}
             </>
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js
index 9fe1c93b7..9ed548f16 100644
--- a/src/components/subscription/TrialForm.js
+++ b/src/components/subscription/TrialForm.js
@@ -41,7 +41,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = () => ({
+const styles = theme => ({
   activateTrialButton: {
     margin: [40, 0, 10],
   },
@@ -49,6 +49,7 @@ const styles = () => ({
     margin: [0, 0, 40],
     background: 'none',
     border: 'none',
+    color: theme.colorText,
   },
   keyTerms: {
     marginTop: 20,
diff --git a/src/components/ui/ActivateTrialButton/index.js b/src/components/ui/ActivateTrialButton/index.js
new file mode 100644
index 000000000..c3e5f4a6f
--- /dev/null
+++ b/src/components/ui/ActivateTrialButton/index.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import classnames from 'classnames';
+
+import { Button } from '@meetfranz/forms';
+import { gaEvent } from '../../../lib/analytics';
+
+import UserStore from '../../../stores/UserStore';
+
+const messages = defineMessages({
+  action: {
+    id: 'feature.delayApp.upgrade.action',
+    defaultMessage: '!!!Get a Franz Supporter License',
+  },
+  actionTrial: {
+    id: 'feature.delayApp.trial.action',
+    defaultMessage: '!!!Yes, I want the free 14 day trial of Franz Professional',
+  },
+  shortAction: {
+    id: 'feature.delayApp.upgrade.actionShort',
+    defaultMessage: '!!!Upgrade account',
+  },
+  shortActionTrial: {
+    id: 'feature.delayApp.trial.actionShort',
+    defaultMessage: '!!!Activate the free Franz Professional trial',
+  },
+});
+
+@inject('stores', 'actions') @observer
+class ActivateTrialButton extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    short: PropTypes.bool,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
+  };
+
+  static defaultProps = {
+    className: '',
+    short: false,
+    gaEventInfo: null,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  handleCTAClick() {
+    const { actions, stores, gaEventInfo } = this.props;
+    const { hadSubscription } = stores.user.data;
+    const { defaultTrialPlan } = stores.features.features;
+
+    let label = '';
+    if (!hadSubscription) {
+      actions.user.activateTrial({ planId: defaultTrialPlan });
+
+      label = 'Start Trial';
+    } else {
+      actions.ui.openSettings({ path: 'user' });
+
+      label = 'Upgrade Account';
+    }
+
+    if (gaEventInfo) {
+      const { category, event } = gaEventInfo;
+      gaEvent(category, event, label);
+    }
+  }
+
+  render() {
+    const { stores, className, short } = this.props;
+    const { intl } = this.context;
+
+    const { hadSubscription } = stores.user.data;
+
+    let label;
+    if (hadSubscription) {
+      label = short ? messages.shortAction : messages.action;
+    } else {
+      label = short ? messages.shortActionTrial : messages.actionTrial;
+    }
+
+    return (
+      <Button
+        label={intl.formatMessage(label)}
+        className={classnames({
+          [className]: className,
+        })}
+        buttonType="inverted"
+        onClick={this.handleCTAClick.bind(this)}
+        busy={stores.user.activateTrialRequest.isExecuting}
+      />
+    );
+  }
+}
+
+export default ActivateTrialButton;
+
+ActivateTrialButton.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    ui: PropTypes.shape({
+      openSettings: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
index 53616f2eb..7c482c4d4 100644
--- a/src/components/ui/FeatureItem.js
+++ b/src/components/ui/FeatureItem.js
@@ -6,7 +6,7 @@ import { mdiCheckCircle } from '@mdi/js';
 
 const styles = theme => ({
   featureItem: {
-    borderBottom: [1, 'solid', theme.legacyStyles.themeGrayDark],
+    borderBottom: [1, 'solid', theme.defaultContentBorder],
     padding: [8, 0],
     display: 'flex',
     alignItems: 'center',
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 3c1e0fac3..8d2746e22 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -10,6 +10,7 @@ import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
 import { gaEvent } from '../../../lib/analytics';
+import { FeatureStore } from '../../../features/utils/FeatureStore';
 
 const messages = defineMessages({
   action: {
@@ -22,7 +23,10 @@ const messages = defineMessages({
 class PremiumFeatureContainer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
-    condition: PropTypes.bool,
+    condition: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.func,
+    ]),
     gaEventInfo: PropTypes.shape({
       category: PropTypes.string.isRequired,
       event: PropTypes.string.isRequired,
@@ -31,7 +35,7 @@ class PremiumFeatureContainer extends Component {
   };
 
   static defaultProps = {
-    condition: true,
+    condition: null,
     gaEventInfo: null,
   };
 
@@ -51,7 +55,18 @@ class PremiumFeatureContainer extends Component {
 
     const { intl } = this.context;
 
-    return !stores.user.data.isPremium && !!condition ? (
+    let showWrapper = !!condition;
+
+    if (condition === null) {
+      showWrapper = !stores.user.data.isPremium;
+    } else if (typeof condition === 'function') {
+      showWrapper = condition({
+        isPremium: stores.user.data.isPremium,
+        features: stores.features.features,
+      });
+    }
+
+    return showWrapper ? (
       <div className={classes.container}>
         <div className={classes.titleContainer}>
           <p className={classes.title}>Premium Feature</p>
@@ -81,6 +96,7 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
   children: oneOrManyChildElements.isRequired,
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
+    features: PropTypes.instanceOf(FeatureStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     ui: PropTypes.shape({
diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js
new file mode 100644
index 000000000..73762f0bf
--- /dev/null
+++ b/src/components/ui/UpgradeButton/index.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import { Button } from '@meetfranz/forms';
+import { gaEvent } from '../../../lib/analytics';
+
+import UserStore from '../../../stores/UserStore';
+import ActivateTrialButton from '../ActivateTrialButton';
+
+const messages = defineMessages({
+  upgradeToPro: {
+    id: 'global.upgradeButton.upgradeToPro',
+    defaultMessage: '!!!Upgrade to Franz Professional',
+  },
+});
+
+@inject('stores', 'actions') @observer
+class UpgradeButton extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
+    requiresPro: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    className: '',
+    gaEventInfo: null,
+    requiresPro: false,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  handleCTAClick() {
+    const { actions, gaEventInfo } = this.props;
+
+    actions.ui.openSettings({ path: 'user' });
+    if (gaEventInfo) {
+      const { category, event } = gaEventInfo;
+      gaEvent(category, event, 'Upgrade Account');
+    }
+  }
+
+  render() {
+    const { stores, requiresPro } = this.props;
+    const { intl } = this.context;
+
+    const { isPremium, isPersonal } = stores.user;
+
+    if (isPremium && isPersonal && requiresPro) {
+      return (
+        <Button
+          label={intl.formatMessage(messages.upgradeToPro)}
+          onClick={this.handleCTAClick.bind(this)}
+          className={this.props.className}
+          buttonType="inverted"
+        />
+      );
+    }
+
+    if (!isPremium) {
+      return <ActivateTrialButton {...this.props} />;
+    }
+
+    return null;
+  }
+}
+
+export default UpgradeButton;
+
+UpgradeButton.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    ui: PropTypes.shape({
+      openSettings: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/config.js b/src/config.js
index 405cc5253..78a92d948 100644
--- a/src/config.js
+++ b/src/config.js
@@ -20,7 +20,7 @@ export const LIVE_WS_API = 'wss://api.franzinfra.com';
 
 export const LOCAL_API_WEBSITE = 'http://localhost:3333';
 // export const DEV_API_WEBSITE = 'https://meetfranz.com';t
-export const DEV_API_WEBSITE = 'http://hash-3ac3ccd2472269cf585c58a4f6973d86f3c9e7bd.franzstaging.com/'; // TODO: revert me
+export const DEV_API_WEBSITE = 'http://hash-58883791519ef6288c952316bdce7fb462283893.franzstaging.com/'; // TODO: revert me
 export const LIVE_API_WEBSITE = 'https://meetfranz.com';
 
 export const STATS_API = 'https://stats.franzinfra.com';
@@ -91,8 +91,8 @@ export const ALLOWED_PROTOCOLS = [
 ];
 
 export const PLANS = {
-  PERSONAL: 'PERSONAL_MONTHLY',
-  PRO: 'PRO_MONTHLY',
+  PERSONAL: 'PERSONAL',
+  PRO: 'PRO',
   LEGACY: 'LEGACY',
   FREE: 'FREE',
 };
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index f9eae4957..9c74cf2ab 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -42,6 +42,8 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
       <ErrorBoundary>
         <AccountDashboard
           user={user.data}
+          isPremiumOverrideUser={user.isPremiumOverride}
+          isProUser={user.isPro}
           isLoading={isLoadingUserInfo}
           isLoadingPlans={isLoadingPlans}
           userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError}
diff --git a/src/containers/settings/TeamScreen.js b/src/containers/settings/TeamScreen.js
index b7b1b78cb..f600c9947 100644
--- a/src/containers/settings/TeamScreen.js
+++ b/src/containers/settings/TeamScreen.js
@@ -30,6 +30,7 @@ export default @inject('stores', 'actions') @observer class TeamScreen extends C
           userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError}
           retryUserInfoRequest={() => this.reloadData()}
           openTeamManagement={() => this.handleWebsiteLink('/user/team')}
+          isProUser={user.isPro}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index e9e457084..726b10628 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -19,7 +19,7 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
       features,
     } = stores;
 
-    let hostedPageURL = !user.data.hadSubscription ? features.features.planSelectionURL : features.features.subscribeURL;
+    let hostedPageURL = features.features.planSelectionURL;
     hostedPageURL = user.getAuthURL(hostedPageURL);
 
     actions.app.openExternalUrl({ url: hostedPageURL });
diff --git a/src/environment.js b/src/environment.js
index 707449e09..4be2c7d70 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -37,8 +37,10 @@ let web;
 let todos;
 if (!isDevMode || (isDevMode && useLiveAPI)) {
   api = LIVE_API;
+  // api = DEV_API;
   wsApi = LIVE_WS_API;
   web = LIVE_API_WEBSITE;
+  // web = DEV_API_WEBSITE;
   todos = PRODUCTION_TODOS_FRONTEND_URL;
 } else if (isDevMode && useLocalAPI) {
   api = LOCAL_API;
diff --git a/src/features/shareFranz/Component.js b/src/features/shareFranz/Component.js
index 859c0ebe9..a33315e17 100644
--- a/src/features/shareFranz/Component.js
+++ b/src/features/shareFranz/Component.js
@@ -6,7 +6,9 @@ import { defineMessages, intlShape } from 'react-intl';
 import { Button } from '@meetfranz/forms';
 import { H1, Icon } from '@meetfranz/ui';
 
-import { mdiHeart } from '@mdi/js';
+import {
+  mdiHeart, mdiEmail, mdiFacebookBox, mdiTwitter,
+} from '@mdi/js';
 import Modal from '../../components/ui/Modal';
 import { state } from '.';
 import { gaEvent } from '../../lib/analytics';
@@ -76,7 +78,7 @@ const styles = theme => ({
   },
   cta: {
     background: theme.styleTypes.primary.contrast,
-    color: theme.styleTypes.primary.accent,
+    color: `${theme.styleTypes.primary.accent} !important`,
 
     '& svg': {
       fill: theme.styleTypes.primary.accent,
@@ -127,7 +129,7 @@ export default @injectSheet(styles) @inject('stores') @observer class ShareFranz
           <Button
             label={intl.formatMessage(messages.actionsEmail)}
             className={classes.cta}
-            icon="mdiEmail"
+            icon={mdiEmail}
             href={`mailto:?subject=Meet the cool app Franz&body=${intl.formatMessage(messages.shareTextEmail, { count: serviceCount })}}`}
             target="_blank"
             onClick={() => {
@@ -137,7 +139,7 @@ export default @injectSheet(styles) @inject('stores') @observer class ShareFranz
           <Button
             label={intl.formatMessage(messages.actionsFacebook)}
             className={classes.cta}
-            icon="mdiFacebookBox"
+            icon={mdiFacebookBox}
             href="https://www.facebook.com/sharer/sharer.php?u=https://www.meetfranz.com?utm_source=facebook&utm_medium=referral&utm_campaign=share-button"
             target="_blank"
             onClick={() => {
@@ -147,7 +149,7 @@ export default @injectSheet(styles) @inject('stores') @observer class ShareFranz
           <Button
             label={intl.formatMessage(messages.actionsTwitter)}
             className={classes.cta}
-            icon="mdiTwitter"
+            icon={mdiTwitter}
             href={`http://twitter.com/intent/tweet?status=${intl.formatMessage(messages.shareTextTwitter, { count: serviceCount })}`}
             target="_blank"
             onClick={() => {
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index d8d96ba85..fa530daed 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -7,9 +7,9 @@ import { Icon } from '@meetfranz/ui';
 import { defineMessages, intlShape } from 'react-intl';
 
 import { mdiChevronRight, mdiCheckAll } from '@mdi/js';
-import { Button } from '@meetfranz/forms';
 import * as environment from '../../../environment';
 import Appear from '../../../components/ui/effects/Appear';
+import UpgradeButton from '../../../components/ui/UpgradeButton';
 
 const OPEN_TODOS_BUTTON_SIZE = 45;
 const CLOSE_TODOS_BUTTON_SIZE = 35;
@@ -70,7 +70,7 @@ const styles = theme => ({
     height: OPEN_TODOS_BUTTON_SIZE,
     background: theme.todos.toggleButton.background,
     position: 'absolute',
-    bottom: 80,
+    bottom: 120,
     right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)),
     borderRadius: OPEN_TODOS_BUTTON_SIZE / 2,
     opacity: props => (props.isVisible ? 0 : 1),
@@ -94,7 +94,7 @@ const styles = theme => ({
     height: CLOSE_TODOS_BUTTON_SIZE,
     background: theme.todos.toggleButton.background,
     position: 'absolute',
-    bottom: 80,
+    bottom: 120,
     right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2),
     borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2,
     opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0),
@@ -116,7 +116,7 @@ const styles = theme => ({
     alignItems: 'center',
     width: '80%',
     maxWidth: 300,
-    margin: [-50, 'auto', 0],
+    margin: [0, 'auto'],
     textAlign: 'center',
   },
   premiumIcon: {
@@ -143,7 +143,6 @@ class TodosWebview extends Component {
     width: PropTypes.number.isRequired,
     minWidth: PropTypes.number.isRequired,
     isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired,
-    upgradeAccount: PropTypes.func.isRequired,
   };
 
   state = {
@@ -235,7 +234,6 @@ class TodosWebview extends Component {
       isVisible,
       togglePanel,
       isTodosIncludedInCurrentPlan,
-      upgradeAccount,
     } = this.props;
 
     const {
@@ -288,14 +286,13 @@ class TodosWebview extends Component {
           ) : (
             <Appear>
               <div className={classes.premiumContainer}>
-                <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} />
+                <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} />
                 <p>{intl.formatMessage(messages.premiumInfo)}</p>
                 <p>{intl.formatMessage(messages.rolloutInfo)}</p>
-                <Button
-                  label={intl.formatMessage(messages.upgradeCTA)}
+                <UpgradeButton
                   className={classes.premiumCTA}
-                  onClick={upgradeAccount}
-                  buttonType="inverted"
+                  gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                  short
                 />
               </div>
             </Appear>
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index 7f3688828..65afc985b 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -26,7 +26,6 @@ class TodosScreen extends Component {
           minWidth={TODOS_MIN_WIDTH}
           resize={width => todoActions.resize({ width })}
           isTodosIncludedInCurrentPlan={this.props.stores.features.features.isTodosIncludedInCurrentPlan || false}
-          upgradeAccount={() => this.props.actions.ui.openSettings({ path: 'user' })}
         />
       </ErrorBoundary>
     );
@@ -39,9 +38,4 @@ TodosScreen.wrappedComponent.propTypes = {
   stores: PropTypes.shape({
     features: PropTypes.instanceOf(FeaturesStore).isRequired,
   }).isRequired,
-  actions: PropTypes.shape({
-    ui: PropTypes.shape({
-      openSettings: PropTypes.func.isRequired,
-    }).isRequired,
-  }).isRequired,
 };
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 7da3b7f49..5c6abff4c 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -12,6 +12,7 @@ import { createReactions } from '../../stores/lib/Reaction';
 import { createActionBindings } from '../utils/ActionBinding';
 import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE } from '.';
 import { IPC } from './constants';
+import { state as delayAppState } from '../delayApp';
 
 const debug = require('debug')('Franz:feature:todos:store');
 
@@ -29,7 +30,7 @@ export default class TodoStore extends FeatureStore {
   }
 
   @computed get isTodosPanelVisible() {
-    if (this.stores.services.all.length === 0) return false;
+    if (delayAppState.isDelayAppScreenVisible) return false;
     if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
 
     return this.settings.isTodosPanelVisible;
@@ -60,6 +61,7 @@ export default class TodoStore extends FeatureStore {
 
     this._allReactions = createReactions([
       this._setFeatureEnabledReaction,
+      this._firstLaunchReaction,
     ]);
 
     this._registerReactions(this._allReactions);
@@ -145,4 +147,19 @@ export default class TodoStore extends FeatureStore {
 
     this.isFeatureEnabled = isTodosEnabled;
   };
+
+  _firstLaunchReaction = () => {
+    const { stats } = this.stores.settings.all;
+
+    // Hide todos layer on first app start but show on second
+    if (stats.appStarts <= 1) {
+      this._updateSettings({
+        isTodosPanelVisible: false,
+      });
+    } else if (stats.appStarts <= 2) {
+      this._updateSettings({
+        isTodosPanelVisible: true,
+      });
+    }
+  };
 }
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 09c98ab8c..70e213912 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -1,9 +1,9 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
-import { Infobox } from '@meetfranz/ui';
+import { Infobox, Badge } from '@meetfranz/ui';
 
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
@@ -11,7 +11,9 @@ import CreateWorkspaceForm from './CreateWorkspaceForm';
 import Request from '../../../stores/lib/Request';
 import Appear from '../../../components/ui/effects/Appear';
 import { workspaceStore } from '../index';
-import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer';
+import UIStore from '../../../stores/UIStore';
+import globalMessages from '../../../i18n/globalMessages';
+import UpgradeButton from '../../../components/ui/UpgradeButton';
 
 const messages = defineMessages({
   headline: {
@@ -48,7 +50,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = () => ({
   table: {
     width: '100%',
     '& td': {
@@ -62,17 +64,28 @@ const styles = theme => ({
     height: 'auto',
   },
   premiumAnnouncement: {
-    padding: '20px',
-    backgroundColor: '#3498db',
-    marginLeft: '-20px',
-    marginBottom: '20px',
     height: 'auto',
-    color: 'white',
-    borderRadius: theme.borderRadius,
+  },
+  premiumAnnouncementContainer: {
+    display: 'flex',
+  },
+  announcementHeadline: {
+    marginBottom: 0,
+  },
+  teaserImage: {
+    width: 250,
+    margin: [-8, 0, 0, 20],
+    alignSelf: 'center',
+  },
+  upgradeCTA: {
+    margin: [40, 'auto'],
+  },
+  proRequired: {
+    margin: [10, 0, 40],
   },
 });
 
-@injectSheet(styles) @observer
+@inject('stores') @injectSheet(styles) @observer
 class WorkspacesDashboard extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -100,7 +113,9 @@ class WorkspacesDashboard extends Component {
       onWorkspaceClick,
       workspaces,
     } = this.props;
+
     const { intl } = this.context;
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -138,68 +153,80 @@ class WorkspacesDashboard extends Component {
 
           {workspaceStore.isPremiumUpgradeRequired && (
             <div className={classes.premiumAnnouncement}>
-              <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2>
-              <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+
+              <h1 className={classes.announcementHeadline}>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h1>
+              <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
+              <div className={classes.premiumAnnouncementContainer}>
+                <div className={classes.premiumAnnouncementContent}>
+                  <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+                  <UpgradeButton
+                    className={classes.upgradeCTA}
+                    gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }}
+                    short
+                    requiresPro
+                  />
+                </div>
+                <img src={`https://cdn.franzinfra.com/announcements/assets/workspaces_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" />
+              </div>
             </div>
           )}
 
-          <PremiumFeatureContainer
-            condition={workspaceStore.isPremiumFeature}
-            gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }}
-          >
-            {/* ===== Create workspace form ===== */}
-            <div className={classes.createForm}>
-              <CreateWorkspaceForm
-                isSubmitting={createWorkspaceRequest.isExecuting}
-                onSubmit={onCreateWorkspaceSubmit}
-              />
-            </div>
-            {getUserWorkspacesRequest.isExecuting ? (
-              <Loader />
-            ) : (
-              <Fragment>
-                {/* ===== Workspace could not be loaded error ===== */}
-                {getUserWorkspacesRequest.error ? (
-                  <Infobox
-                    icon="alert"
-                    type="danger"
-                    ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
-                    ctaLoading={getUserWorkspacesRequest.isExecuting}
-                    ctaOnClick={getUserWorkspacesRequest.retry}
-                  >
-                    {intl.formatMessage(messages.workspacesRequestFailed)}
-                  </Infobox>
-                ) : (
-                  <Fragment>
-                    {workspaces.length === 0 ? (
-                      <div className="align-middle settings__empty-state">
-                        {/* ===== Workspaces empty state ===== */}
-                        <p className="settings__empty-text">
-                          <span className="emoji">
-                            <img src="./assets/images/emoji/sad.png" alt="" />
-                          </span>
-                          {intl.formatMessage(messages.noServicesAdded)}
-                        </p>
-                      </div>
-                    ) : (
-                      <table className={classes.table}>
-                        {/* ===== Workspaces list ===== */}
-                        <tbody>
-                          {workspaces.map(workspace => (
-                            <WorkspaceItem
-                              key={workspace.id}
-                              workspace={workspace}
-                              onItemClick={w => onWorkspaceClick(w)}
-                            />
-                          ))}
-                        </tbody>
-                      </table>
-                    )}
-                  </Fragment>
-                )}
-              </Fragment>
-            )}
-          </PremiumFeatureContainer>
+          {!workspaceStore.isPremiumUpgradeRequired && (
+            <>
+              {/* ===== Create workspace form ===== */}
+              <div className={classes.createForm}>
+                <CreateWorkspaceForm
+                  isSubmitting={createWorkspaceRequest.isExecuting}
+                  onSubmit={onCreateWorkspaceSubmit}
+                />
+              </div>
+              {getUserWorkspacesRequest.isExecuting ? (
+                <Loader />
+              ) : (
+                <Fragment>
+                  {/* ===== Workspace could not be loaded error ===== */}
+                  {getUserWorkspacesRequest.error ? (
+                    <Infobox
+                      icon="alert"
+                      type="danger"
+                      ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
+                      ctaLoading={getUserWorkspacesRequest.isExecuting}
+                      ctaOnClick={getUserWorkspacesRequest.retry}
+                    >
+                      {intl.formatMessage(messages.workspacesRequestFailed)}
+                    </Infobox>
+                  ) : (
+                    <Fragment>
+                      {workspaces.length === 0 ? (
+                        <div className="align-middle settings__empty-state">
+                          {/* ===== Workspaces empty state ===== */}
+                          <p className="settings__empty-text">
+                            <span className="emoji">
+                              <img src="./assets/images/emoji/sad.png" alt="" />
+                            </span>
+                            {intl.formatMessage(messages.noServicesAdded)}
+                          </p>
+                        </div>
+                      ) : (
+                        <table className={classes.table}>
+                          {/* ===== Workspaces list ===== */}
+                          <tbody>
+                            {workspaces.map(workspace => (
+                              <WorkspaceItem
+                                key={workspace.id}
+                                workspace={workspace}
+                                onItemClick={w => onWorkspaceClick(w)}
+                              />
+                            ))}
+                          </tbody>
+                        </table>
+                      )}
+                    </Fragment>
+                  )}
+                </Fragment>
+              )}
+            </>
+          )}
         </div>
       </div>
     );
@@ -207,3 +234,9 @@ class WorkspacesDashboard extends Component {
 }
 
 export default WorkspacesDashboard;
+
+WorkspacesDashboard.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    ui: PropTypes.instanceOf(UIStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index 2ab565fa1..affbd230d 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -11,7 +11,7 @@ import {
   updateWorkspaceRequest,
 } from '../api';
 
-@inject('actions') @observer
+@inject('stores', 'actions') @observer
 class WorkspacesScreen extends Component {
   static propTypes = {
     actions: PropTypes.shape({
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index e44569be9..4a1f80b4e 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -253,11 +253,10 @@ export default class WorkspacesStore extends FeatureStore {
   };
 
   _setIsPremiumFeatureReaction = () => {
-    const { features, user } = this.stores;
-    const { isPremium } = user.data;
+    const { features } = this.stores;
     const { isWorkspaceIncludedInCurrentPlan } = features.features;
     this.isPremiumFeature = !isWorkspaceIncludedInCurrentPlan;
-    this.isPremiumUpgradeRequired = !isWorkspaceIncludedInCurrentPlan && !isPremium;
+    this.isPremiumUpgradeRequired = !isWorkspaceIncludedInCurrentPlan;
   };
 
   _setWorkspaceBeingEditedReaction = () => {
diff --git a/src/helpers/plan-helpers.js b/src/helpers/plan-helpers.js
index 19392585e..e0f1fd89a 100644
--- a/src/helpers/plan-helpers.js
+++ b/src/helpers/plan-helpers.js
@@ -33,3 +33,13 @@ export function i18nPlanName(planId, intl) {
 
   return intl.formatMessage(messages[plan]);
 }
+
+export function getPlan(planId) {
+  if (!planId) {
+    throw new Error('planId is required');
+  }
+
+  const plan = PLANS_MAPPING[planId];
+
+  return plan;
+}
diff --git a/src/i18n/globalMessages.js b/src/i18n/globalMessages.js
index 1b5ece223..af8479c59 100644
--- a/src/i18n/globalMessages.js
+++ b/src/i18n/globalMessages.js
@@ -25,4 +25,8 @@ export default defineMessages({
     id: 'global.spellchecking.autodetect.short',
     defaultMessage: '!!!Automatic',
   },
+  proRequired: {
+    id: 'global.franzProRequired',
+    defaultMessage: '!!!Franz Professional Required',
+  },
 });
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index dabe2f11f..02920d5ca 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -2530,78 +2530,78 @@
         "defaultMessage": "!!!Team",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 19
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.headline",
         "start": {
           "column": 12,
-          "line": 14
+          "line": 16
         }
       },
       {
         "defaultMessage": "!!!Franz for Teams",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 23
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.contentHeadline",
         "start": {
           "column": 19,
-          "line": 18
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!You and your team use Franz? You can now manage Premium subscriptions for as many colleagues, friends or family members as you want, all from within one account.",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 27
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.intro",
         "start": {
           "column": 9,
-          "line": 22
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Franz for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 31
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.copy",
         "start": {
           "column": 8,
-          "line": 26
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Manage your Team on meetfranz.com",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 35
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.manageAction",
         "start": {
           "column": 16,
-          "line": 30
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!!Upgrade your Account",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 39
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.upgradeAction",
         "start": {
           "column": 17,
-          "line": 34
+          "line": 36
         }
       }
     ],
@@ -2895,6 +2895,63 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Get a Franz Supporter License",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "feature.delayApp.upgrade.action",
+        "start": {
+          "column": 10,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "feature.delayApp.trial.action",
+        "start": {
+          "column": 15,
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade account",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "feature.delayApp.upgrade.actionShort",
+        "start": {
+          "column": 15,
+          "line": 21
+        }
+      },
+      {
+        "defaultMessage": "!!!Activate the free Franz Professional trial",
+        "end": {
+          "column": 3,
+          "line": 28
+        },
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "feature.delayApp.trial.actionShort",
+        "start": {
+          "column": 20,
+          "line": 25
+        }
+      }
+    ],
+    "path": "src/components/ui/ActivateTrialButton/index.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Add unlimited services",
         "end": {
           "column": 3,
@@ -3033,13 +3090,13 @@
         "defaultMessage": "!!!Upgrade account",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 19
         },
         "file": "src/components/ui/PremiumFeatureContainer/index.js",
         "id": "premiumFeature.button.upgradeAccount",
         "start": {
           "column": 10,
-          "line": 15
+          "line": 16
         }
       }
     ],
@@ -3048,6 +3105,24 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Upgrade to Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/components/ui/UpgradeButton/index.js",
+        "id": "global.upgradeButton.upgradeToPro",
+        "start": {
+          "column": 16,
+          "line": 13
+        }
+      }
+    ],
+    "path": "src/components/ui/UpgradeButton/index.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Loading",
         "end": {
           "column": 3,
@@ -3720,91 +3795,91 @@
         "defaultMessage": "!!!Franz is better together!",
         "end": {
           "column": 3,
-          "line": 19
+          "line": 21
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.headline",
         "start": {
           "column": 12,
-          "line": 16
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Tell your friends and colleagues how awesome Franz is and help us to spread the word.",
         "end": {
           "column": 3,
-          "line": 23
+          "line": 25
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.text",
         "start": {
           "column": 8,
-          "line": 20
+          "line": 22
         }
       },
       {
         "defaultMessage": "!!!Share as email",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 29
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.email",
         "start": {
           "column": 16,
-          "line": 24
+          "line": 26
         }
       },
       {
         "defaultMessage": "!!!Share on Facebook",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 33
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.facebook",
         "start": {
           "column": 19,
-          "line": 28
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!Share on Twitter",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 37
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.twitter",
         "start": {
           "column": 18,
-          "line": 32
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com",
         "end": {
           "column": 3,
-          "line": 39
+          "line": 41
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.shareText.email",
         "start": {
           "column": 18,
-          "line": 36
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 45
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.shareText.twitter",
         "start": {
           "column": 20,
-          "line": 40
+          "line": 42
         }
       }
     ],
@@ -4127,104 +4202,104 @@
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
-          "line": 20
+          "line": 22
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.headline",
         "start": {
           "column": 12,
-          "line": 17
+          "line": 19
         }
       },
       {
         "defaultMessage": "!!!You haven't added any workspaces yet.",
         "end": {
           "column": 3,
-          "line": 24
+          "line": 26
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.noWorkspacesAdded",
         "start": {
           "column": 19,
-          "line": 21
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!Could not load your workspaces",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 30
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspacesRequestFailed",
         "start": {
           "column": 27,
-          "line": 25
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 32
+          "line": 34
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.tryReloadWorkspaces",
         "start": {
           "column": 23,
-          "line": 29
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Your changes have been saved",
         "end": {
           "column": 3,
-          "line": 36
+          "line": 38
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.updatedInfo",
         "start": {
           "column": 15,
-          "line": 33
+          "line": 35
         }
       },
       {
         "defaultMessage": "!!!Workspace has been deleted",
         "end": {
           "column": 3,
-          "line": 40
+          "line": 42
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.deletedInfo",
         "start": {
           "column": 15,
-          "line": 37
+          "line": 39
         }
       },
       {
         "defaultMessage": "!!!Info about workspace feature",
         "end": {
           "column": 3,
-          "line": 44
+          "line": 46
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspaceFeatureInfo",
         "start": {
           "column": 24,
-          "line": 41
+          "line": 43
         }
       },
       {
         "defaultMessage": "!!!Less is More: Introducing Franz Workspaces",
         "end": {
           "column": 3,
-          "line": 48
+          "line": 50
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspaceFeatureHeadline",
         "start": {
           "column": 28,
-          "line": 45
+          "line": 47
         }
       }
     ],
@@ -4537,6 +4612,19 @@
           "column": 39,
           "line": 24
         }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional Required",
+        "end": {
+          "column": 3,
+          "line": 31
+        },
+        "file": "src/i18n/globalMessages.js",
+        "id": "global.franzProRequired",
+        "start": {
+          "column": 15,
+          "line": 28
+        }
       }
     ],
     "path": "src/i18n/globalMessages.json"
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 32e9c743a..e09cca7d6 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -5,8 +5,10 @@
   "feature.delayApp.headline": "Please purchase a Franz Supporter License to skip waiting",
   "feature.delayApp.text": "Franz will continue in {seconds} seconds.",
   "feature.delayApp.trial.action": "Yes, I want the free 14 day trial of Franz Professional",
+  "feature.delayApp.trial.actionShort": "Activate the free Franz Professional trial",
   "feature.delayApp.trial.headline": "Get the free Franz Professional 14 day trial and skip the line",
   "feature.delayApp.upgrade.action": "Get a Franz Supporter License",
+  "feature.delayApp.upgrade.actionShort": "Upgrade account",
   "feature.serviceLimit.limitReached": "You have added {amount} out of {limit} services that are included in your plan. Please upgrade your account to add more services.",
   "feature.shareFranz.action.email": "Send as email",
   "feature.shareFranz.action.facebook": "Share on Facebook",
@@ -19,11 +21,13 @@
   "feature.todos.premium.rollout": "Franz Todos will be available to everyone soon.",
   "feature.todos.premium.upgrade": "Upgrade Account",
   "global.api.unhealthy": "Can't connect to Franz online services",
+  "global.franzProRequired": "Franz Professional Required",
   "global.notConnectedToTheInternet": "You are not connected to the internet.",
   "global.spellchecker.useDefault": "Use System Default ({default})",
   "global.spellchecking.autodetect": "Detect language automatically",
   "global.spellchecking.autodetect.short": "Automatic",
   "global.spellchecking.language": "Spell checking language",
+  "global.upgradeButton.upgradeToPro": "Upgrade to Franz Professional",
   "import.headline": "Import your Franz 4 services",
   "import.notSupportedHeadline": "Services not yet supported in Franz 5",
   "import.skip.label": "I want to add services manually",
diff --git a/src/i18n/messages/src/components/settings/team/TeamDashboard.json b/src/i18n/messages/src/components/settings/team/TeamDashboard.json
index 6bccc25ff..01d033044 100644
--- a/src/i18n/messages/src/components/settings/team/TeamDashboard.json
+++ b/src/i18n/messages/src/components/settings/team/TeamDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Team",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 14,
+      "line": 16,
       "column": 12
     },
     "end": {
-      "line": 17,
+      "line": 19,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Franz for Teams",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 18,
+      "line": 20,
       "column": 19
     },
     "end": {
-      "line": 21,
+      "line": 23,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!You and your team use Franz? You can now manage Premium subscriptions for as many colleagues, friends or family members as you want, all from within one account.",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 22,
+      "line": 24,
       "column": 9
     },
     "end": {
-      "line": 25,
+      "line": 27,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Franz for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 26,
+      "line": 28,
       "column": 8
     },
     "end": {
-      "line": 29,
+      "line": 31,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Manage your Team on meetfranz.com",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 30,
+      "line": 32,
       "column": 16
     },
     "end": {
-      "line": 33,
+      "line": 35,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Upgrade your Account",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 34,
+      "line": 36,
       "column": 17
     },
     "end": {
-      "line": 37,
+      "line": 39,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/ui/ActivateTrialButton/index.json b/src/i18n/messages/src/components/ui/ActivateTrialButton/index.json
new file mode 100644
index 000000000..08c1a9293
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/ActivateTrialButton/index.json
@@ -0,0 +1,54 @@
+[
+  {
+    "id": "feature.delayApp.upgrade.action",
+    "defaultMessage": "!!!Get a Franz Supporter License",
+    "file": "src/components/ui/ActivateTrialButton/index.js",
+    "start": {
+      "line": 13,
+      "column": 10
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.trial.action",
+    "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
+    "file": "src/components/ui/ActivateTrialButton/index.js",
+    "start": {
+      "line": 17,
+      "column": 15
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.upgrade.actionShort",
+    "defaultMessage": "!!!Upgrade account",
+    "file": "src/components/ui/ActivateTrialButton/index.js",
+    "start": {
+      "line": 21,
+      "column": 15
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.trial.actionShort",
+    "defaultMessage": "!!!Activate the free Franz Professional trial",
+    "file": "src/components/ui/ActivateTrialButton/index.js",
+    "start": {
+      "line": 25,
+      "column": 20
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json b/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json
index 320d3ca3e..0cde4cee5 100644
--- a/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json
+++ b/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Upgrade account",
     "file": "src/components/ui/PremiumFeatureContainer/index.js",
     "start": {
-      "line": 15,
+      "line": 16,
       "column": 10
     },
     "end": {
-      "line": 18,
+      "line": 19,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/ui/UpgradeButton/index.json b/src/i18n/messages/src/components/ui/UpgradeButton/index.json
new file mode 100644
index 000000000..28e44cb66
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/UpgradeButton/index.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "global.upgradeButton.upgradeToPro",
+    "defaultMessage": "!!!Upgrade to Franz Professional",
+    "file": "src/components/ui/UpgradeButton/index.js",
+    "start": {
+      "line": 13,
+      "column": 16
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/shareFranz/Component.json b/src/i18n/messages/src/features/shareFranz/Component.json
index 79b425b15..72150f2b0 100644
--- a/src/i18n/messages/src/features/shareFranz/Component.json
+++ b/src/i18n/messages/src/features/shareFranz/Component.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Franz is better together!",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 16,
+      "line": 18,
       "column": 12
     },
     "end": {
-      "line": 19,
+      "line": 21,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Tell your friends and colleagues how awesome Franz is and help us to spread the word.",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 20,
+      "line": 22,
       "column": 8
     },
     "end": {
-      "line": 23,
+      "line": 25,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Share as email",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 24,
+      "line": 26,
       "column": 16
     },
     "end": {
-      "line": 27,
+      "line": 29,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Share on Facebook",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 28,
+      "line": 30,
       "column": 19
     },
     "end": {
-      "line": 31,
+      "line": 33,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Share on Twitter",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 32,
+      "line": 34,
       "column": 18
     },
     "end": {
-      "line": 35,
+      "line": 37,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 36,
+      "line": 38,
       "column": 18
     },
     "end": {
-      "line": 39,
+      "line": 41,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 40,
+      "line": 42,
       "column": 20
     },
     "end": {
-      "line": 43,
+      "line": 45,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
index ef8f1bebc..7eb4fab50 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 17,
+      "line": 19,
       "column": 12
     },
     "end": {
-      "line": 20,
+      "line": 22,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!You haven't added any workspaces yet.",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 21,
+      "line": 23,
       "column": 19
     },
     "end": {
-      "line": 24,
+      "line": 26,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 25,
+      "line": 27,
       "column": 27
     },
     "end": {
-      "line": 28,
+      "line": 30,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 29,
+      "line": 31,
       "column": 23
     },
     "end": {
-      "line": 32,
+      "line": 34,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Your changes have been saved",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 33,
+      "line": 35,
       "column": 15
     },
     "end": {
-      "line": 36,
+      "line": 38,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Workspace has been deleted",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 37,
+      "line": 39,
       "column": 15
     },
     "end": {
-      "line": 40,
+      "line": 42,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Info about workspace feature",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 41,
+      "line": 43,
       "column": 24
     },
     "end": {
-      "line": 44,
+      "line": 46,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Less is More: Introducing Franz Workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 45,
+      "line": 47,
       "column": 28
     },
     "end": {
-      "line": 48,
+      "line": 50,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/i18n/globalMessages.json b/src/i18n/messages/src/i18n/globalMessages.json
index 28001614f..f4fd5b8b0 100644
--- a/src/i18n/messages/src/i18n/globalMessages.json
+++ b/src/i18n/messages/src/i18n/globalMessages.json
@@ -76,5 +76,18 @@
       "line": 27,
       "column": 3
     }
+  },
+  {
+    "id": "global.franzProRequired",
+    "defaultMessage": "!!!Franz Professional Required",
+    "file": "src/i18n/globalMessages.js",
+    "start": {
+      "line": 28,
+      "column": 15
+    },
+    "end": {
+      "line": 31,
+      "column": 3
+    }
   }
 ]
\ No newline at end of file
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index 2c785111f..9680c5bcc 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -46,7 +46,6 @@ export default class UIStore extends Store {
   // Actions
   @action _openSettings({ path = '/settings' }) {
     const settingsPath = path !== '/settings' ? `/settings/${path}` : path;
-    console.log(settingsPath);
     this.stores.router.push(settingsPath);
   }
 
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index f3dfbdbf0..365336cbf 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -10,6 +10,8 @@ import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
 import { gaEvent } from '../lib/analytics';
 import { sleep } from '../helpers/async-helpers';
+import { getPlan } from '../helpers/plan-helpers';
+import { PLANS } from '../config';
 
 const debug = require('debug')('Franz:UserStore');
 
@@ -150,10 +152,34 @@ export default class UserStore extends Store {
     return this.getUserInfoRequest.execute().result || {};
   }
 
+  @computed get team() {
+    return this.data.team || null;
+  }
+
   @computed get isPremium() {
     return !!this.data.isPremium;
   }
 
+  @computed get isPremiumOverride() {
+    return (!this.team.plan && this.isPremium) || (this.team.state === 'expired' && this.isPremium);
+  }
+
+  @computed get isPersonal() {
+    if (!this.team.plan) return false;
+    const plan = getPlan(this.team.plan);
+
+    return plan === PLANS.PERSONAL;
+  }
+
+  @computed get isPro() {
+    if (this.isPremiumOverride) return true;
+
+    if ((!this.team.plan || this.team.state === 'expired')) return false;
+    const plan = getPlan(this.team.plan);
+
+    return plan === PLANS.PRO;
+  }
+
   @computed get legacyServices() {
     return this.getLegacyServicesRequest.execute() || {};
   }
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 0955aaa0c..bb95ab5d2 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,45 +1,39 @@
 @import './config.scss';
 
 %headline {
-  color: $theme-gray-light;
+  color: #FFF;
   font-size: 20px;
   font-weight: 400;
   letter-spacing: -1px;
 
-  a { color: $theme-gray-light; }
+  a { color: #FFF }
 }
 
 %headline__dark {
-  color: $dark-theme-gray-lightest;
+  color: #FFF;
+  font-size: 20px;
+  font-weight: 400;
+  letter-spacing: -1px;
 
-  a { color: $dark-theme-gray-lightest; }
+  a { color: #FFF }
 }
 
 .theme__dark {
   .settings-wrapper { background: rgba($dark-theme-black, .8); }
 
   .settings {
-    background: $dark-theme-gray-darkest;
-    box-shadow: 0 20px 50px rgba($dark-theme-black, .5);
-
     .settings__header {
-      background: $dark-theme-gray-darker;
-
-      h1,
-      .settings__header-item { @extend %headline__dark; }
+      .mdi { color: #FFF }
+    }
 
-      .separator { border-right: 1px solid $dark-theme-gray-dark; }
-      .mdi { color: $dark-theme-gray-lightest; }
+    .settings__main {
+      background: $dark-theme-gray-darkest;
     }
 
     .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; }
 
     .settings__close {
-      background: $dark-theme-gray-darker;
-      border-left: none;
-      color: $dark-theme-gray-lightest;
-
-      &:hover { background: darken($dark-theme-gray-darker, 5%); }
+      color: #FFF;
     }
 
     &__settings-group h3 { color: $dark-theme-gray-lightest; }
@@ -76,6 +70,11 @@
 
     .settings-navigation__link {
       color: $dark-theme-gray-lightest;
+      border-bottom: 1px solid darken($dark-theme-gray-darker, 3%);
+
+      &:last-child {
+        border: 0,
+      }
 
       .badge {
         background: $dark-theme-gray-lighter;
@@ -129,15 +128,14 @@
 }
 
 .settings {
-  background: #FFF;
   border-radius: $theme-border-radius;
-  box-shadow: 0 20px 50px rgba(black, .5);
+  // box-shadow: 0 20px 50px rgba(black, .5);
   display: flex;
   height: 100%;
   max-height: 720px;
   max-width: 900px;
   min-height: 400px;
-  overflow: hidden;
+  // overflow: hidden;
   position: relative;
   width: 100%;
   z-index: 9999;
@@ -147,25 +145,32 @@
     flex: 1;
     flex-direction: column;
     height: auto;
+    border-radius: $theme-border-radius;
+    overflow: hidden;
+    box-shadow: 0 20px 50px rgba($dark-theme-black, .5);
+    background: #FFF;
   }
 
   .settings__header {
     align-items: center;
-    background: $theme-gray-lighter;
+    background: $theme-brand-primary;
     display: flex;
     height: 50px;
     padding: 0 40px;
     width: calc(100% - 60px);
+    color: #FFF;
 
     h1 {
       @extend %headline;
       margin: 0;
     }
 
-    .settings__header-item { @extend %headline; }
+    .settings__header-item {
+      @extend %headline;
+    }
 
     .separator {
-      border-right: 1px solid darken($theme-gray-lighter, 10%);
+      border-right: 1px solid darken($theme-brand-primary, 8%);
       height: 100%;
       margin: 0 15px;
       transform: skew(15deg) rotate(2deg);
@@ -218,17 +223,18 @@
   }
 
   .settings__close {
-    background: $theme-gray-lighter;
-    border-left: 1px solid darken($theme-gray-lighter, 5%);
-    color: $theme-gray-light;
+    background: $theme-brand-primary;
+    border-left: 1px solid darken($theme-brand-primary, 8%);
+    color: #FFF;
     font-size: 20px;
     height: 50px;
     padding: 0 20px;
     position: absolute;
     right: 0;
     transition: background $theme-transition-time;
+    border-top-right-radius: $theme-border-radius;
 
-    &:hover { background: darken($theme-gray-lighter, 5%); }
+    &:hover { background: darken($theme-brand-primary, 5%); }
   }
 
   .search-input { margin-bottom: 30px; }
@@ -414,7 +420,13 @@
   background: $theme-gray-lightest;
   flex-direction: column;
   height: auto;
-  width: 200px;
+  width: 240px;
+  height: calc(100% - 100px);
+  align-self: center;
+  border-top-left-radius: $theme-border-radius;;
+  border-bottom-left-radius: $theme-border-radius;;
+  overflow: hidden;
+  box-shadow: 0 20px 50px rgba($dark-theme-black, .5);
 
   .settings-navigation__link {
     align-items: center;
@@ -426,6 +438,7 @@
     padding: 0 20px;
     text-decoration: none;
     transition: background $theme-transition-time, color $theme-transition-time;
+    border-bottom: 1px solid darken($theme-gray-lightest, 3%);
 
     &:hover {
       background: darken($theme-gray-lightest, 5%);