5 files changed, 27 insertions, 10 deletions

diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js
index ea04c8448..ec061377b 100644
--- a/src/features/planSelection/components/PlanItem.js
+++ b/src/features/planSelection/components/PlanItem.js
@@ -38,7 +38,7 @@ const styles = theme => ({
 
     '& h2': {
       textAlign: 'center',
-      marginBottom: 20,
+      marginBottom: 10,
       fontSize: 30,
       color: theme.styleTypes.primary.contrast,
     },
@@ -48,6 +48,7 @@ const styles = theme => ({
   },
   priceWrapper: {
     height: 50,
+    marginBottom: 0,
   },
   price: {
     fontSize: 50,
@@ -69,7 +70,7 @@ const styles = theme => ({
     width: 40,
     border: 0,
     borderTop: [1, 'solid', theme.styleTypes.primary.contrast],
-    margin: [30, 'auto'],
+    margin: [15, 'auto', 20],
   },
   header: {
     padding: 20,
@@ -78,7 +79,7 @@ const styles = theme => ({
     position: 'relative',
   },
   content: {
-    padding: 20,
+    padding: [10, 20, 20],
     background: '#EFEFEF',
   },
   simpleCTA: {
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js
index 9407f6dd3..355187516 100644
--- a/src/features/planSelection/components/PlanSelection.js
+++ b/src/features/planSelection/components/PlanSelection.js
@@ -72,6 +72,7 @@ const styles = theme => ({
     justifyContent: 'center',
     alignItems: 'center',
     zIndex: 999999,
+    overflowY: 'scroll',
   },
   container: {
     width: '80%',
@@ -111,6 +112,7 @@ const styles = theme => ({
 
     '& svg': {
       width: '80px !important',
+      height: '80px !important',
       filter: 'drop-shadow( 0px 2px 3px rgba(0, 0, 0, 0.3))',
       fill: theme.styleTypes.danger.contrast,
     },
diff --git a/src/features/trialStatusBar/containers/TrialStatusBarScreen.js b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
index 15201496b..e15a1204f 100644
--- a/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
+++ b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
@@ -2,15 +2,21 @@ import React, { Component } from 'react';
 import { observer, inject } from 'mobx-react';
 import PropTypes from 'prop-types';
 import ms from 'ms';
+import { intlShape } from 'react-intl';
 
 import FeaturesStore from '../../../stores/FeaturesStore';
 import UserStore from '../../../stores/UserStore';
 import TrialStatusBar from '../components/TrialStatusBar';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import { trialStatusBarStore } from '..';
+import { i18nPlanName } from '../../../helpers/plan-helpers';
 
 @inject('stores', 'actions') @observer
 class TrialStatusBarScreen extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   state = {
     showOverlay: true,
     percent: 0,
@@ -53,6 +59,8 @@ class TrialStatusBarScreen extends Component {
 
 
   render() {
+    const { intl } = this.context;
+
     const {
       showOverlay,
       percent,
@@ -67,11 +75,13 @@ class TrialStatusBarScreen extends Component {
     const { user } = this.props.stores;
     const { upgradeAccount } = this.props.actions.payment;
 
+    const planName = i18nPlanName(user.team.plan, intl);
+
     return (
       <ErrorBoundary>
         <TrialStatusBar
-          planName="Professional"
-          percent={percent < 5 ? 5 : percent}
+          planName={planName}
+          percent={parseFloat(percent < 5 ? 5 : percent)}
           trialEnd={restTime}
           upgradeAccount={() => upgradeAccount({
             planId: user.team.plan,
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index ee6f8416c..07100f5a1 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -7,7 +7,7 @@ import { H1, Icon, ProBadge } from '@meetfranz/ui';
 import { Button } from '@meetfranz/forms/lib';
 import ReactTooltip from 'react-tooltip';
 
-import { mdiPlusBox, mdiSettings } from '@mdi/js';
+import { mdiPlusBox, mdiSettings, mdiStar } from '@mdi/js';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
 import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../index';
@@ -52,6 +52,8 @@ const styles = theme => ({
   drawer: {
     background: theme.workspaces.drawer.background,
     width: `${theme.workspaces.drawer.width}px`,
+    display: 'flex',
+    flexDirection: 'column',
   },
   headline: {
     fontSize: '24px',
@@ -75,6 +77,7 @@ const styles = theme => ({
   },
   workspaces: {
     height: 'auto',
+    overflowY: 'scroll',
   },
   premiumAnnouncement: {
     padding: '20px',
@@ -89,7 +92,7 @@ const styles = theme => ({
   addNewWorkspaceLabel: {
     height: 'auto',
     color: theme.workspaces.drawer.buttons.color,
-    marginTop: 40,
+    margin: [40, 0],
     textAlign: 'center',
     '& > svg': {
       fill: theme.workspaces.drawer.buttons.color,
@@ -174,7 +177,7 @@ class WorkspaceDrawer extends Component {
                 className={classes.premiumCtaButton}
                 buttonType="primary"
                 label={intl.formatMessage(messages.reactivatePremiumAccount)}
-                icon="mdiStar"
+                icon={mdiStar}
                 onClick={() => {
                   onUpgradeAccountClick();
                   gaEvent('User', 'upgrade', 'workspaceDrawer');
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 70e213912..4fb302be2 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -5,6 +5,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
 import { Infobox, Badge } from '@meetfranz/ui';
 
+import { mdiCheckboxMarkedCircleOutline } from '@mdi/js';
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
 import CreateWorkspaceForm from './CreateWorkspaceForm';
@@ -128,7 +129,7 @@ class WorkspacesDashboard extends Component {
             <Appear className={classes.appear}>
               <Infobox
                 type="success"
-                icon="mdiCheckboxMarkedCircleOutline"
+                icon={mdiCheckboxMarkedCircleOutline}
                 dismissable
                 onUnmount={updateWorkspaceRequest.reset}
               >
@@ -142,7 +143,7 @@ class WorkspacesDashboard extends Component {
             <Appear className={classes.appear}>
               <Infobox
                 type="success"
-                icon="mdiCheckboxMarkedCircleOutline"
+                icon={mdiCheckboxMarkedCircleOutline}
                 dismissable
                 onUnmount={deleteWorkspaceRequest.reset}
               >