mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-30 23:18:47 +00:00
Intro screen styles refactored
This commit is contained in:
NikolaBorislavovHristov
parent
d65bf716fd
commit
2bf457993c
6 changed files with 170 additions and 131 deletions
|
|
@ -1,31 +1,38 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Checkbox } from 'stremio-common';
|
||||
import styles from './styles';
|
||||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const classnames = require('classnames');
|
||||
const { Checkbox } = require('stremio-common');
|
||||
const styles = require('./styles');
|
||||
|
||||
const linkOnClick = (event) => {
|
||||
event.stopPropagation();
|
||||
};
|
||||
const ConsentCheckbox = React.forwardRef(({ className, checked, label, link, href, onClick }, ref) => {
|
||||
const linkOnClick = React.useCallback((event) => {
|
||||
event.stopPropagation();
|
||||
}, []);
|
||||
|
||||
const ConsentCheckbox = React.forwardRef(({ className, label, link, href, checked, onClick }, ref) => (
|
||||
<Checkbox ref={ref} className={classnames(styles['consent-checkbox-container'], className)} checked={checked} onClick={onClick}>
|
||||
<div className={styles['label']}>
|
||||
{label}
|
||||
{link && href ? <a className={styles['link']} href={href} target={'_blank'} tabIndex={'-1'} onClick={linkOnClick}> {link}</a> : null}
|
||||
</div>
|
||||
</Checkbox>
|
||||
));
|
||||
return (
|
||||
<Checkbox ref={ref} className={classnames(className, styles['consent-checkbox-container'])} checked={checked} onClick={onClick}>
|
||||
<div className={styles['label']}>
|
||||
{label}
|
||||
{
|
||||
typeof link === 'string' && typeof href === 'string' ?
|
||||
<a className={styles['link']} href={href} target={'_blank'} tabIndex={-1} onClick={linkOnClick}> {link}</a>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</Checkbox>
|
||||
);
|
||||
});
|
||||
|
||||
ConsentCheckbox.displayName = 'ConsentCheckbox';
|
||||
|
||||
ConsentCheckbox.propTypes = {
|
||||
className: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
checked: PropTypes.bool,
|
||||
label: PropTypes.string,
|
||||
link: PropTypes.string,
|
||||
href: PropTypes.string,
|
||||
checked: PropTypes.bool
|
||||
onClick: PropTypes.func
|
||||
};
|
||||
|
||||
export default ConsentCheckbox;
|
||||
module.exports = ConsentCheckbox;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
import ConsentCheckbox from './ConsentCheckbox';
|
||||
const ConsentCheckbox = require('./ConsentCheckbox');
|
||||
|
||||
export default ConsentCheckbox;
|
||||
module.exports = ConsentCheckbox;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@
|
|||
|
||||
.link {
|
||||
color: var(--color-surfacelight);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29,7 +33,7 @@
|
|||
--icon-color: var(--color-surfacelighter);
|
||||
|
||||
.label {
|
||||
color: var(--color-surfacelight);
|
||||
color: var(--color-surfacelighter);
|
||||
|
||||
.link {
|
||||
color: var(--color-surfacelighter);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
import React, { Component, Fragment } from 'react';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import { Input } from 'stremio-common';
|
||||
import ConsentCheckbox from './ConsentCheckbox';
|
||||
import styles from './styles';
|
||||
const React = require('react');
|
||||
const classnames = require('classnames');
|
||||
const Icon = require('stremio-icons/dom');
|
||||
const { Input } = require('stremio-navigation');
|
||||
const ConsentCheckbox = require('./ConsentCheckbox');
|
||||
const styles = require('./styles');
|
||||
|
||||
const FORMS = {
|
||||
LOGIN: '1',
|
||||
SIGN_UP: '2'
|
||||
LOGIN: 'LOGIN',
|
||||
SIGN_UP: 'SIGN_UP'
|
||||
};
|
||||
|
||||
class Intro extends Component {
|
||||
class Intro extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
|
@ -67,12 +68,12 @@ class Intro extends Component {
|
|||
email: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
error: '',
|
||||
error: ''
|
||||
});
|
||||
}
|
||||
|
||||
emailOnChange = (event) => {
|
||||
this.setState({ email: event.target.value });
|
||||
this.setState({ email: event.currentTarget.value });
|
||||
}
|
||||
|
||||
emailOnSubmit = (event) => {
|
||||
|
|
@ -81,7 +82,7 @@ class Intro extends Component {
|
|||
}
|
||||
|
||||
passwordOnChange = (event) => {
|
||||
this.setState({ password: event.target.value });
|
||||
this.setState({ password: event.currentTarget.value });
|
||||
}
|
||||
|
||||
passwordOnSubmit = (event) => {
|
||||
|
|
@ -94,7 +95,7 @@ class Intro extends Component {
|
|||
}
|
||||
|
||||
confirmPasswordOnChange = (event) => {
|
||||
this.setState({ confirmPassword: event.target.value });
|
||||
this.setState({ confirmPassword: event.currentTarget.value });
|
||||
}
|
||||
|
||||
confirmPasswordOnSubmit = (event) => {
|
||||
|
|
@ -172,54 +173,103 @@ class Intro extends Component {
|
|||
loginAsGuest = () => {
|
||||
if (!this.state.termsAccepted) {
|
||||
this.setState({ error: 'You must accept the Terms of Service' });
|
||||
} else {
|
||||
this.setState({ error: '' });
|
||||
alert('Guest login');
|
||||
return;
|
||||
}
|
||||
|
||||
this.setState({ error: '' });
|
||||
alert('Guest login');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles['intro-container']}>
|
||||
<div className={styles['overlay']} />
|
||||
<div className={styles['background-overlay']} />
|
||||
<div className={styles['scroll-content']}>
|
||||
<div className={styles['form-container']}>
|
||||
<Input className={styles['facebook-button']} type={'button'} onClick={this.loginWithFacebook}>
|
||||
<Input className={classnames(styles['login-form-button'], styles['facebook-button'], 'focusable-with-border')} type={'button'} onClick={this.loginWithFacebook}>
|
||||
<Icon className={styles['icon']} icon={'ic_facebook'} />
|
||||
<div className={styles['label']}>Login with Facebook</div>
|
||||
</Input>
|
||||
<div className={styles['facebook-statement']}>We won't post anything on your behalf</div>
|
||||
<Input ref={this.emailRef} className={styles['text-input']} type={'email'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} onSubmit={this.emailOnSubmit} />
|
||||
<Input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} onSubmit={this.passwordOnSubmit} />
|
||||
<Input
|
||||
ref={this.emailRef}
|
||||
className={styles['text-input']}
|
||||
type={'email'}
|
||||
placeholder={'Email'}
|
||||
value={this.state.email}
|
||||
onChange={this.emailOnChange}
|
||||
onSubmit={this.emailOnSubmit}
|
||||
/>
|
||||
<Input
|
||||
ref={this.passwordRef}
|
||||
className={styles['text-input']}
|
||||
type={'password'}
|
||||
placeholder={'Password'}
|
||||
value={this.state.password}
|
||||
onChange={this.passwordOnChange}
|
||||
onSubmit={this.passwordOnSubmit}
|
||||
/>
|
||||
{
|
||||
this.state.selectedForm === FORMS.LOGIN ?
|
||||
<Input className={styles['forgot-password-link']} type={'link'} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Input>
|
||||
<div className={styles['forgot-password-link-container']}>
|
||||
<Input className={classnames(styles['forgot-password-link'], 'focusable-with-border')} type={'link'} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Input>
|
||||
</div>
|
||||
:
|
||||
<Fragment>
|
||||
<Input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} onSubmit={this.confirmPasswordOnSubmit} />
|
||||
<ConsentCheckbox ref={this.termsRef} className={styles['consent-checkbox']} label={'I have read and agree with the Stremio'} link={'Terms and conditions'} href={'https://www.stremio.com/tos'} checked={this.state.termsAccepted} onClick={this.toggleTerms} />
|
||||
<ConsentCheckbox ref={this.privacyPolicyRef} className={styles['consent-checkbox']} label={'I have read and agree with the Stremio'} link={'Privacy Policy'} href={'https://www.stremio.com/privacy'} checked={this.state.privacyPolicyAccepted} onClick={this.togglePrivacyPolicy} />
|
||||
<ConsentCheckbox ref={this.marketingRef} className={styles['consent-checkbox']} label={'I agree to receive marketing communications from Stremio'} checked={this.state.marketingAccepted} onClick={this.toggleMarketing} />
|
||||
</Fragment>
|
||||
<React.Fragment>
|
||||
<Input
|
||||
ref={this.confirmPasswordRef}
|
||||
className={styles['text-input']}
|
||||
type={'password'}
|
||||
placeholder={'Confirm Password'}
|
||||
value={this.state.confirmPassword}
|
||||
onChange={this.confirmPasswordOnChange}
|
||||
onSubmit={this.confirmPasswordOnSubmit}
|
||||
/>
|
||||
<ConsentCheckbox
|
||||
ref={this.termsRef}
|
||||
className={classnames(styles['consent-checkbox'], 'focusable-with-border')}
|
||||
label={'I have read and agree with the Stremio'}
|
||||
link={'Terms and conditions'}
|
||||
href={'https://www.stremio.com/tos'}
|
||||
checked={this.state.termsAccepted}
|
||||
onClick={this.toggleTerms}
|
||||
/>
|
||||
<ConsentCheckbox
|
||||
ref={this.privacyPolicyRef}
|
||||
className={classnames(styles['consent-checkbox'], 'focusable-with-border')}
|
||||
label={'I have read and agree with the Stremio'}
|
||||
link={'Privacy Policy'}
|
||||
href={'https://www.stremio.com/privacy'}
|
||||
checked={this.state.privacyPolicyAccepted}
|
||||
onClick={this.togglePrivacyPolicy}
|
||||
/>
|
||||
<ConsentCheckbox
|
||||
ref={this.marketingRef}
|
||||
className={classnames(styles['consent-checkbox'], 'focusable-with-border')}
|
||||
label={'I agree to receive marketing communications from Stremio'}
|
||||
checked={this.state.marketingAccepted}
|
||||
onClick={this.toggleMarketing}
|
||||
/>
|
||||
</React.Fragment>
|
||||
}
|
||||
{
|
||||
this.state.error.length > 0 ?
|
||||
<div ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
|
||||
<div ref={this.errorRef} className={styles['error-message']}>{this.state.error}</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
<Input className={styles['submit-button']} type={'button'} onClick={this.state.selectedForm === FORMS.LOGIN ? this.loginWithEmail : this.signup}>
|
||||
<Input className={classnames(styles['login-form-button'], styles['submit-button'], 'focusable-with-border')} type={'button'} onClick={this.state.selectedForm === FORMS.LOGIN ? this.loginWithEmail : this.signup}>
|
||||
<div className={styles['label']}>{this.state.selectedForm === FORMS.LOGIN ? 'LOG IN' : 'SING UP'}</div>
|
||||
</Input>
|
||||
{
|
||||
this.state.selectedForm === FORMS.SIGN_UP ?
|
||||
<Input className={styles['guest-login-button']} type={'button'} onClick={this.loginAsGuest}>
|
||||
<Input className={classnames(styles['login-form-button'], styles['guest-login-button'], 'focusable-with-border')} type={'button'} onClick={this.loginAsGuest}>
|
||||
<div className={styles['label']}>GUEST LOGIN</div>
|
||||
</Input>
|
||||
:
|
||||
null
|
||||
}
|
||||
<Input className={styles['switch-form-button']} type={'button'} data-form={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>
|
||||
<Input className={classnames(styles['login-form-button'], styles['switch-form-button'], 'focusable-with-border')} type={'button'} data-form={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>
|
||||
<div className={styles['label']}>{this.state.selectedForm === FORMS.SIGN_UP ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
|
||||
</Input>
|
||||
</div>
|
||||
|
|
@ -229,4 +279,4 @@ class Intro extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Intro;
|
||||
module.exports = Intro;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
import Intro from './Intro';
|
||||
const Intro = require('./Intro');
|
||||
|
||||
export default Intro;
|
||||
module.exports = Intro;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
.intro-container {
|
||||
--form-width: 270px;
|
||||
--spacing: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.intro-container {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/images/intro_background.jpg');
|
||||
background-size: cover;
|
||||
|
|
@ -15,87 +13,82 @@
|
|||
background-position: center;
|
||||
background-origin: border-box;
|
||||
|
||||
.overlay {
|
||||
.background-overlay {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
background-color: var(--color-backgrounddark80);
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.form-container {
|
||||
width: var(--form-width);
|
||||
margin: auto;
|
||||
padding: 5% 0;
|
||||
padding: 4em 0;
|
||||
|
||||
.facebook-button, .submit-button, .switch-form-button, .guest-login-button {
|
||||
.login-form-button {
|
||||
width: 100%;
|
||||
padding: 0 1em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: var(--focusable-border-size) solid transparent;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
height: 1.7em;
|
||||
width: 0.8em;
|
||||
height: 100%;
|
||||
margin-right: 1em;
|
||||
fill: var(--color-surfacelighter);
|
||||
|
||||
&~.label {
|
||||
max-width: calc(100% - 1.8em);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1em;
|
||||
padding: 0.3em 0;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2em;
|
||||
font-weight: 600;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.facebook-button {
|
||||
background: var(--color-secondarydark);
|
||||
min-height: 4.5em;
|
||||
background: #4267b2;
|
||||
|
||||
.label {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
&:before {
|
||||
padding-top: 25%;
|
||||
&:hover {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.facebook-statement {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
margin-bottom: 2em;
|
||||
text-align: center;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
|
@ -103,11 +96,9 @@
|
|||
.text-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: var(--spacing) 0;
|
||||
padding: 0.5em 0.2em;
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
border-bottom: 1px solid var(--color-surface);
|
||||
margin: 1em 0;
|
||||
padding: 0.5em 0.3em;
|
||||
border-bottom: calc(0.5 * var(--focusable-border-size)) solid var(--color-surface);
|
||||
color: var(--color-surfacelighter);
|
||||
|
||||
&::placeholder {
|
||||
|
|
@ -115,6 +106,7 @@
|
|||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-surfacedarker80);
|
||||
border-bottom-color: var(--color-surfacelighter);
|
||||
|
||||
&::placeholder {
|
||||
|
|
@ -123,69 +115,55 @@
|
|||
}
|
||||
}
|
||||
|
||||
.forgot-password-link {
|
||||
display: block;
|
||||
margin: var(--spacing) 0;
|
||||
padding: 0.5em;
|
||||
border: var(--focusable-border-size) solid transparent;
|
||||
color: var(--color-surfacelight);
|
||||
.forgot-password-link-container {
|
||||
margin: 1em 0;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
.forgot-password-link {
|
||||
display: inline-block;
|
||||
padding: 0.5em 0.3em;
|
||||
color: var(--color-surfacelight);
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
&:hover, &:focus {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.consent-checkbox {
|
||||
margin: var(--spacing) 0;
|
||||
padding: 0.5em 0.2em;
|
||||
border: var(--focusable-border-size) solid transparent;
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
margin: 1em 0;
|
||||
padding: 0.5em 0.3em;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: var(--spacing) 0;
|
||||
padding: 0.5em 0.2em;
|
||||
.error-message {
|
||||
margin: 1em 0;
|
||||
text-align: center;
|
||||
color: var(--color-signal1);
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
min-height: 4em;
|
||||
margin: 1em 0;
|
||||
background-color: var(--color-primarydark);
|
||||
|
||||
.label {
|
||||
font-size: 1.2em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&:before {
|
||||
padding-top: 20%;
|
||||
&:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.switch-form-button, .guest-login-button {
|
||||
margin: var(--spacing) 0;
|
||||
padding: 0.8em 0.2em;
|
||||
.guest-login-button {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.2em;
|
||||
padding: 0.8em .3em;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.switch-form-button {
|
||||
padding: 0.8em .3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue