diff options
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/ActivateTrialButton/index.js | 19 | ||||
-rw-r--r-- | src/components/ui/AppLoader/index.js | 17 | ||||
-rw-r--r-- | src/components/ui/Button.js | 2 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/styles.js | 1 | ||||
-rw-r--r-- | src/components/ui/Input.js | 2 | ||||
-rw-r--r-- | src/components/ui/Link.js | 4 | ||||
-rw-r--r-- | src/components/ui/Loader.js | 2 | ||||
-rw-r--r-- | src/components/ui/Modal/index.js | 3 | ||||
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/index.js | 8 | ||||
-rw-r--r-- | src/components/ui/UpgradeButton/index.js | 7 |
10 files changed, 22 insertions, 43 deletions
diff --git a/src/components/ui/ActivateTrialButton/index.js b/src/components/ui/ActivateTrialButton/index.js index e0637da90..340123c2f 100644 --- a/src/components/ui/ActivateTrialButton/index.js +++ b/src/components/ui/ActivateTrialButton/index.js | |||
@@ -5,7 +5,6 @@ import { defineMessages, intlShape } from 'react-intl'; | |||
5 | import classnames from 'classnames'; | 5 | import classnames from 'classnames'; |
6 | 6 | ||
7 | import { Button } from '@meetfranz/forms'; | 7 | import { Button } from '@meetfranz/forms'; |
8 | import { gaEvent } from '../../../lib/analytics'; | ||
9 | 8 | ||
10 | import UserStore from '../../../stores/UserStore'; | 9 | import UserStore from '../../../stores/UserStore'; |
11 | 10 | ||
@@ -63,25 +62,9 @@ class ActivateTrialButton extends Component { | |||
63 | }; | 62 | }; |
64 | 63 | ||
65 | handleCTAClick() { | 64 | handleCTAClick() { |
66 | const { actions, stores, gaEventInfo } = this.props; | 65 | const { actions } = this.props; |
67 | const { hadSubscription } = stores.user.data; | ||
68 | // const { defaultTrialPlan } = stores.features.features; | ||
69 | |||
70 | let label = ''; | ||
71 | if (!hadSubscription) { | ||
72 | // actions.user.activateTrial({ planId: defaultTrialPlan }); | ||
73 | |||
74 | label = 'Start Trial'; | ||
75 | } else { | ||
76 | label = 'Upgrade Account'; | ||
77 | } | ||
78 | 66 | ||
79 | actions.ui.openSettings({ path: 'user' }); | 67 | actions.ui.openSettings({ path: 'user' }); |
80 | |||
81 | if (gaEventInfo) { | ||
82 | const { category, event } = gaEventInfo; | ||
83 | gaEvent(category, event, label); | ||
84 | } | ||
85 | } | 68 | } |
86 | 69 | ||
87 | render() { | 70 | render() { |
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js index b0c7fed7b..1fd247d17 100644 --- a/src/components/ui/AppLoader/index.js +++ b/src/components/ui/AppLoader/index.js | |||
@@ -9,14 +9,13 @@ import { shuffleArray } from '../../../helpers/array-helpers'; | |||
9 | import styles from './styles'; | 9 | import styles from './styles'; |
10 | 10 | ||
11 | const textList = shuffleArray([ | 11 | const textList = shuffleArray([ |
12 | 'Looking for Sisi', | 12 | 'Adding free features', |
13 | 'Contacting the herald', | 13 | 'Making application usable', |
14 | 'Saddling the unicorn', | 14 | 'Removing unproductive paywalls', |
15 | 'Learning the Waltz', | 15 | 'Creating custom server software', |
16 | 'Visiting Horst & Grete', | 16 | 'Increasing productivity', |
17 | 'Twisting my moustache', | 17 | 'Listening to our userbase', |
18 | 'Playing the trumpet', | 18 | 'Fixing bugs', |
19 | 'Traveling through space & time', | ||
20 | ]); | 19 | ]); |
21 | 20 | ||
22 | export default @injectSheet(styles) @withTheme class AppLoader extends Component { | 21 | export default @injectSheet(styles) @withTheme class AppLoader extends Component { |
@@ -49,7 +48,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component | |||
49 | 48 | ||
50 | return ( | 49 | return ( |
51 | <FullscreenLoader | 50 | <FullscreenLoader |
52 | title="Franz" | 51 | title="Ferdi" |
53 | className={classes.component} | 52 | className={classes.component} |
54 | spinnerColor={theme.colorAppLoaderSpinner} | 53 | spinnerColor={theme.colorAppLoaderSpinner} |
55 | > | 54 | > |
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js index ffc7f7051..e2d7cea83 100644 --- a/src/components/ui/Button.js +++ b/src/components/ui/Button.js | |||
@@ -69,7 +69,7 @@ export default @observer class Button extends Component { | |||
69 | loaded={loaded} | 69 | loaded={loaded} |
70 | lines={10} | 70 | lines={10} |
71 | scale={0.4} | 71 | scale={0.4} |
72 | color={buttonType !== 'secondary' ? '#FFF' : '#373a3c'} | 72 | color={buttonType !== 'secondary' ? '#FFF' : '#7367F0'} |
73 | component="span" | 73 | component="span" |
74 | /> | 74 | /> |
75 | {label} | 75 | {label} |
diff --git a/src/components/ui/FullscreenLoader/styles.js b/src/components/ui/FullscreenLoader/styles.js index 64d24e4ce..d516781a8 100644 --- a/src/components/ui/FullscreenLoader/styles.js +++ b/src/components/ui/FullscreenLoader/styles.js | |||
@@ -4,6 +4,7 @@ export default { | |||
4 | alignItems: 'center', | 4 | alignItems: 'center', |
5 | position: 'absolute', | 5 | position: 'absolute', |
6 | width: '100%', | 6 | width: '100%', |
7 | background: 'linear-gradient( 135deg, #CE9FFC 10%, #7367F0 100%)', | ||
7 | }, | 8 | }, |
8 | component: { | 9 | component: { |
9 | width: '100%', | 10 | width: '100%', |
diff --git a/src/components/ui/Input.js b/src/components/ui/Input.js index 9b070c4df..4e3eb4ab8 100644 --- a/src/components/ui/Input.js +++ b/src/components/ui/Input.js | |||
@@ -68,7 +68,7 @@ export default @observer class Input extends Component { | |||
68 | 68 | ||
69 | const { passwordScore } = this.state; | 69 | const { passwordScore } = this.state; |
70 | 70 | ||
71 | let type = field.type; | 71 | let { type } = field; |
72 | if (type === 'password' && this.state.showPassword) { | 72 | if (type === 'password' && this.state.showPassword) { |
73 | type = 'text'; | 73 | type = 'text'; |
74 | } | 74 | } |
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js index b88686d5e..5f729844b 100644 --- a/src/components/ui/Link.js +++ b/src/components/ui/Link.js | |||
@@ -25,6 +25,7 @@ export default @inject('stores') @observer class Link extends Component { | |||
25 | className, | 25 | className, |
26 | activeClassName, | 26 | activeClassName, |
27 | strictFilter, | 27 | strictFilter, |
28 | style, | ||
28 | } = this.props; | 29 | } = this.props; |
29 | const { router } = stores; | 30 | const { router } = stores; |
30 | 31 | ||
@@ -44,6 +45,7 @@ export default @inject('stores') @observer class Link extends Component { | |||
44 | <a | 45 | <a |
45 | href={router.history.createHref(to)} | 46 | href={router.history.createHref(to)} |
46 | className={linkClasses} | 47 | className={linkClasses} |
48 | style={style} | ||
47 | onClick={e => this.onClick(e)} | 49 | onClick={e => this.onClick(e)} |
48 | > | 50 | > |
49 | {children} | 51 | {children} |
@@ -65,6 +67,7 @@ Link.wrappedComponent.propTypes = { | |||
65 | activeClassName: PropTypes.string, | 67 | activeClassName: PropTypes.string, |
66 | strictFilter: PropTypes.bool, | 68 | strictFilter: PropTypes.bool, |
67 | target: PropTypes.string, | 69 | target: PropTypes.string, |
70 | style: PropTypes.object, | ||
68 | }; | 71 | }; |
69 | 72 | ||
70 | Link.wrappedComponent.defaultProps = { | 73 | Link.wrappedComponent.defaultProps = { |
@@ -72,4 +75,5 @@ Link.wrappedComponent.defaultProps = { | |||
72 | activeClassName: '', | 75 | activeClassName: '', |
73 | strictFilter: false, | 76 | strictFilter: false, |
74 | target: '', | 77 | target: '', |
78 | style: {}, | ||
75 | }; | 79 | }; |
diff --git a/src/components/ui/Loader.js b/src/components/ui/Loader.js index f73296bb6..de8769b6c 100644 --- a/src/components/ui/Loader.js +++ b/src/components/ui/Loader.js | |||
@@ -16,7 +16,7 @@ export default class LoaderComponent extends Component { | |||
16 | children: null, | 16 | children: null, |
17 | loaded: false, | 17 | loaded: false, |
18 | className: '', | 18 | className: '', |
19 | color: '#373a3c', | 19 | color: '#7367F0', |
20 | }; | 20 | }; |
21 | 21 | ||
22 | render() { | 22 | render() { |
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js index 63d858c47..0af521452 100644 --- a/src/components/ui/Modal/index.js +++ b/src/components/ui/Modal/index.js | |||
@@ -41,6 +41,8 @@ export default @injectCSS(styles) class Modal extends Component { | |||
41 | showClose, | 41 | showClose, |
42 | } = this.props; | 42 | } = this.props; |
43 | 43 | ||
44 | const appRoot = document.getElementById('root'); | ||
45 | |||
44 | return ( | 46 | return ( |
45 | <ReactModal | 47 | <ReactModal |
46 | isOpen={isOpen} | 48 | isOpen={isOpen} |
@@ -53,6 +55,7 @@ export default @injectCSS(styles) class Modal extends Component { | |||
53 | portal={portal} | 55 | portal={portal} |
54 | onRequestClose={close} | 56 | onRequestClose={close} |
55 | shouldCloseOnOverlayClick={shouldCloseOnOverlayClick} | 57 | shouldCloseOnOverlayClick={shouldCloseOnOverlayClick} |
58 | appElement={appRoot} | ||
56 | > | 59 | > |
57 | {showClose && close && ( | 60 | {showClose && close && ( |
58 | <button | 61 | <button |
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js index 8d2746e22..7ba353be3 100644 --- a/src/components/ui/PremiumFeatureContainer/index.js +++ b/src/components/ui/PremiumFeatureContainer/index.js | |||
@@ -9,8 +9,7 @@ import { oneOrManyChildElements } from '../../../prop-types'; | |||
9 | import UserStore from '../../../stores/UserStore'; | 9 | import UserStore from '../../../stores/UserStore'; |
10 | 10 | ||
11 | import styles from './styles'; | 11 | import styles from './styles'; |
12 | import { gaEvent } from '../../../lib/analytics'; | 12 | import FeatureStore from '../../../stores/FeaturesStore'; |
13 | import { FeatureStore } from '../../../features/utils/FeatureStore'; | ||
14 | 13 | ||
15 | const messages = defineMessages({ | 14 | const messages = defineMessages({ |
16 | action: { | 15 | action: { |
@@ -50,7 +49,6 @@ class PremiumFeatureContainer extends Component { | |||
50 | actions, | 49 | actions, |
51 | condition, | 50 | condition, |
52 | stores, | 51 | stores, |
53 | gaEventInfo, | ||
54 | } = this.props; | 52 | } = this.props; |
55 | 53 | ||
56 | const { intl } = this.context; | 54 | const { intl } = this.context; |
@@ -75,10 +73,6 @@ class PremiumFeatureContainer extends Component { | |||
75 | type="button" | 73 | type="button" |
76 | onClick={() => { | 74 | onClick={() => { |
77 | actions.ui.openSettings({ path: 'user' }); | 75 | actions.ui.openSettings({ path: 'user' }); |
78 | if (gaEventInfo) { | ||
79 | const { category, event, label } = gaEventInfo; | ||
80 | gaEvent(category, event, label); | ||
81 | } | ||
82 | }} | 76 | }} |
83 | > | 77 | > |
84 | {intl.formatMessage(messages.action)} | 78 | {intl.formatMessage(messages.action)} |
diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js index 73762f0bf..1b764bd90 100644 --- a/src/components/ui/UpgradeButton/index.js +++ b/src/components/ui/UpgradeButton/index.js | |||
@@ -4,7 +4,6 @@ import { inject, observer } from 'mobx-react'; | |||
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | 5 | ||
6 | import { Button } from '@meetfranz/forms'; | 6 | import { Button } from '@meetfranz/forms'; |
7 | import { gaEvent } from '../../../lib/analytics'; | ||
8 | 7 | ||
9 | import UserStore from '../../../stores/UserStore'; | 8 | import UserStore from '../../../stores/UserStore'; |
10 | import ActivateTrialButton from '../ActivateTrialButton'; | 9 | import ActivateTrialButton from '../ActivateTrialButton'; |
@@ -41,13 +40,9 @@ class UpgradeButton extends Component { | |||
41 | }; | 40 | }; |
42 | 41 | ||
43 | handleCTAClick() { | 42 | handleCTAClick() { |
44 | const { actions, gaEventInfo } = this.props; | 43 | const { actions } = this.props; |
45 | 44 | ||
46 | actions.ui.openSettings({ path: 'user' }); | 45 | actions.ui.openSettings({ path: 'user' }); |
47 | if (gaEventInfo) { | ||
48 | const { category, event } = gaEventInfo; | ||
49 | gaEvent(category, event, 'Upgrade Account'); | ||
50 | } | ||
51 | } | 46 | } |
52 | 47 | ||
53 | render() { | 48 | render() { |