diff options
Diffstat (limited to 'src/components/auth/Pricing.js')
-rw-r--r-- | src/components/auth/Pricing.js | 29 |
1 files changed, 19 insertions, 10 deletions
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js index 593cb9c4b..4f5a76c8a 100644 --- a/src/components/auth/Pricing.js +++ b/src/components/auth/Pricing.js | |||
@@ -67,6 +67,15 @@ const messages = defineMessages({ | |||
67 | }); | 67 | }); |
68 | 68 | ||
69 | const styles = theme => ({ | 69 | const styles = theme => ({ |
70 | root: { | ||
71 | width: '500px !important', | ||
72 | textAlign: 'center', | ||
73 | padding: 20, | ||
74 | zIndex: 100, | ||
75 | |||
76 | '& h1': { | ||
77 | }, | ||
78 | }, | ||
70 | container: { | 79 | container: { |
71 | position: 'relative', | 80 | position: 'relative', |
72 | marginLeft: -150, | 81 | marginLeft: -150, |
@@ -86,8 +95,8 @@ const styles = theme => ({ | |||
86 | featureContainer: { | 95 | featureContainer: { |
87 | width: 300, | 96 | width: 300, |
88 | position: 'absolute', | 97 | position: 'absolute', |
89 | left: 'calc(100% / 2 + 225px)', | 98 | left: 'calc(100% / 2 + 250px)', |
90 | top: 155, | 99 | marginTop: 20, |
91 | background: theme.signup.pricing.feature.background, | 100 | background: theme.signup.pricing.feature.background, |
92 | height: 'auto', | 101 | height: 'auto', |
93 | padding: 20, | 102 | padding: 20, |
@@ -174,8 +183,8 @@ export default @injectSheet(styles) @observer class Signup extends Component { | |||
174 | const [intPart, fractionPart] = (price).toString().split('.'); | 183 | const [intPart, fractionPart] = (price).toString().split('.'); |
175 | 184 | ||
176 | return ( | 185 | return ( |
177 | <div className={classnames('auth__scroll-container', classes.container)}> | 186 | <> |
178 | <div className={classnames('auth__container', 'auth__container--signup', classes.content)}> | 187 | <div className={classnames('auth__container', classes.root, classes.container)}> |
179 | <form className="franz-form auth__form"> | 188 | <form className="franz-form auth__form"> |
180 | {isLoadingRequiredData ? <Loader /> : ( | 189 | {isLoadingRequiredData ? <Loader /> : ( |
181 | <img | 190 | <img |
@@ -212,7 +221,7 @@ export default @injectSheet(styles) @observer class Signup extends Component { | |||
212 | <p className={classnames(classes.price, classes.trialPrice)}> | 221 | <p className={classnames(classes.price, classes.trialPrice)}> |
213 | <span className={classes.figure}> | 222 | <span className={classes.figure}> |
214 | {currency} | 223 | {currency} |
215 | 0 | 224 | 0 |
216 | </span> | 225 | </span> |
217 | <sup>00</sup> | 226 | <sup>00</sup> |
218 | </p> | 227 | </p> |
@@ -234,7 +243,7 @@ export default @injectSheet(styles) @observer class Signup extends Component { | |||
234 | </ul> | 243 | </ul> |
235 | </div> | 244 | </div> |
236 | {trialActivationError && ( | 245 | {trialActivationError && ( |
237 | <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p> | 246 | <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p> |
238 | )} | 247 | )} |
239 | <Button | 248 | <Button |
240 | label={intl.formatMessage(!canSkipTrial ? messages.ctaStart : messages.ctaAccept)} | 249 | label={intl.formatMessage(!canSkipTrial ? messages.ctaStart : messages.ctaAccept)} |
@@ -244,9 +253,9 @@ export default @injectSheet(styles) @observer class Signup extends Component { | |||
244 | disabled={isLoadingRequiredData || isActivatingTrial} | 253 | disabled={isLoadingRequiredData || isActivatingTrial} |
245 | /> | 254 | /> |
246 | {canSkipTrial && ( | 255 | {canSkipTrial && ( |
247 | <p className={classes.skipLink}> | 256 | <p className={classes.skipLink}> |
248 | <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a> | 257 | <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a> |
249 | </p> | 258 | </p> |
250 | )} | 259 | )} |
251 | </form> | 260 | </form> |
252 | </div> | 261 | </div> |
@@ -256,7 +265,7 @@ export default @injectSheet(styles) @observer class Signup extends Component { | |||
256 | </H2> | 265 | </H2> |
257 | <FeatureList /> | 266 | <FeatureList /> |
258 | </div> | 267 | </div> |
259 | </div> | 268 | </> |
260 | ); | 269 | ); |
261 | } | 270 | } |
262 | } | 271 | } |