bugfixing & polishing

3 files changed, 8 insertions, 15 deletions

diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index d8d96ba85..9cf925444 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -10,6 +10,7 @@ import { mdiChevronRight, mdiCheckAll } from '@mdi/js';
 import { Button } from '@meetfranz/forms';
 import * as environment from '../../../environment';
 import Appear from '../../../components/ui/effects/Appear';
+import ActivateTrialButton from '../../../components/ui/activateTrialButton';
 
 const OPEN_TODOS_BUTTON_SIZE = 45;
 const CLOSE_TODOS_BUTTON_SIZE = 35;
@@ -70,7 +71,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 +95,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),
@@ -143,7 +144,6 @@ class TodosWebview extends Component {
     width: PropTypes.number.isRequired,
     minWidth: PropTypes.number.isRequired,
     isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired,
-    upgradeAccount: PropTypes.func.isRequired,
   };
 
   state = {
@@ -235,7 +235,6 @@ class TodosWebview extends Component {
       isVisible,
       togglePanel,
       isTodosIncludedInCurrentPlan,
-      upgradeAccount,
     } = this.props;
 
     const {
@@ -291,11 +290,10 @@ class TodosWebview extends Component {
                 <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} />
                 <p>{intl.formatMessage(messages.premiumInfo)}</p>
                 <p>{intl.formatMessage(messages.rolloutInfo)}</p>
-                <Button
-                  label={intl.formatMessage(messages.upgradeCTA)}
+                <ActivateTrialButton
                   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..56e117c6c 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 (this.stores.services.all.length === 0 || delayAppState.isDelayAppScreenVisible) return false;
     if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
 
     return this.settings.isTodosPanelVisible;