diff options
Diffstat (limited to 'src/features/todos/components/TodosWebview.js')
-rw-r--r-- | src/features/todos/components/TodosWebview.js | 14 |
1 files changed, 6 insertions, 8 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'; | |||
10 | import { Button } from '@meetfranz/forms'; | 10 | import { Button } from '@meetfranz/forms'; |
11 | import * as environment from '../../../environment'; | 11 | import * as environment from '../../../environment'; |
12 | import Appear from '../../../components/ui/effects/Appear'; | 12 | import Appear from '../../../components/ui/effects/Appear'; |
13 | import ActivateTrialButton from '../../../components/ui/activateTrialButton'; | ||
13 | 14 | ||
14 | const OPEN_TODOS_BUTTON_SIZE = 45; | 15 | const OPEN_TODOS_BUTTON_SIZE = 45; |
15 | const CLOSE_TODOS_BUTTON_SIZE = 35; | 16 | const CLOSE_TODOS_BUTTON_SIZE = 35; |
@@ -70,7 +71,7 @@ const styles = theme => ({ | |||
70 | height: OPEN_TODOS_BUTTON_SIZE, | 71 | height: OPEN_TODOS_BUTTON_SIZE, |
71 | background: theme.todos.toggleButton.background, | 72 | background: theme.todos.toggleButton.background, |
72 | position: 'absolute', | 73 | position: 'absolute', |
73 | bottom: 80, | 74 | bottom: 120, |
74 | right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)), | 75 | right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)), |
75 | borderRadius: OPEN_TODOS_BUTTON_SIZE / 2, | 76 | borderRadius: OPEN_TODOS_BUTTON_SIZE / 2, |
76 | opacity: props => (props.isVisible ? 0 : 1), | 77 | opacity: props => (props.isVisible ? 0 : 1), |
@@ -94,7 +95,7 @@ const styles = theme => ({ | |||
94 | height: CLOSE_TODOS_BUTTON_SIZE, | 95 | height: CLOSE_TODOS_BUTTON_SIZE, |
95 | background: theme.todos.toggleButton.background, | 96 | background: theme.todos.toggleButton.background, |
96 | position: 'absolute', | 97 | position: 'absolute', |
97 | bottom: 80, | 98 | bottom: 120, |
98 | right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2), | 99 | right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2), |
99 | borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2, | 100 | borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2, |
100 | opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0), | 101 | opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0), |
@@ -143,7 +144,6 @@ class TodosWebview extends Component { | |||
143 | width: PropTypes.number.isRequired, | 144 | width: PropTypes.number.isRequired, |
144 | minWidth: PropTypes.number.isRequired, | 145 | minWidth: PropTypes.number.isRequired, |
145 | isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired, | 146 | isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired, |
146 | upgradeAccount: PropTypes.func.isRequired, | ||
147 | }; | 147 | }; |
148 | 148 | ||
149 | state = { | 149 | state = { |
@@ -235,7 +235,6 @@ class TodosWebview extends Component { | |||
235 | isVisible, | 235 | isVisible, |
236 | togglePanel, | 236 | togglePanel, |
237 | isTodosIncludedInCurrentPlan, | 237 | isTodosIncludedInCurrentPlan, |
238 | upgradeAccount, | ||
239 | } = this.props; | 238 | } = this.props; |
240 | 239 | ||
241 | const { | 240 | const { |
@@ -291,11 +290,10 @@ class TodosWebview extends Component { | |||
291 | <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} /> | 290 | <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} /> |
292 | <p>{intl.formatMessage(messages.premiumInfo)}</p> | 291 | <p>{intl.formatMessage(messages.premiumInfo)}</p> |
293 | <p>{intl.formatMessage(messages.rolloutInfo)}</p> | 292 | <p>{intl.formatMessage(messages.rolloutInfo)}</p> |
294 | <Button | 293 | <ActivateTrialButton |
295 | label={intl.formatMessage(messages.upgradeCTA)} | ||
296 | className={classes.premiumCTA} | 294 | className={classes.premiumCTA} |
297 | onClick={upgradeAccount} | 295 | gaEventInfo={{ category: 'Todos', event: 'upgrade' }} |
298 | buttonType="inverted" | 296 | short |
299 | /> | 297 | /> |
300 | </div> | 298 | </div> |
301 | </Appear> | 299 | </Appear> |