Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-05 08:29:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Intro screen adapted to css modules

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-11 16:58:17 +03:00
parent 04951911d9
commit f08e7cc0ac
3 changed files with 56 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
View file

@ -2,7 +2,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { Button, Checkbox } = require('stremio/common');
require('./styles');
const styles = require('./styles');
const ConsentCheckbox = React.forwardRef(({ label, link, href, toggle, ...props }, ref) => {
const checkboxOnClick = React.useCallback((event) => {
@ -14,13 +14,13 @@ const ConsentCheckbox = React.forwardRef(({ label, link, href, toggle, ...props
event.nativeEvent.togglePrevented = true;
}, []);
return (
<Checkbox {...props} ref={ref} className={classnames(props.className, 'consent-checkbox-container')} onClick={checkboxOnClick}>
<div className={'label'}>
<Checkbox {...props} ref={ref} className={classnames(props.className, styles['consent-checkbox-container'])} onClick={checkboxOnClick}>
<div className={styles['label']}>
{label}
{
typeof link === 'string' && typeof href === 'string' ?
<Button
className={'link'}
className={styles['link']}
href={href}
target={'_blank'}
tabIndex={-1}

62
src/routes/Intro/ConsentCheckbox/styles.less
View file

@ -1,42 +1,40 @@
.intro-container {
.consent-checkbox-container {
--icon-size: 1.2rem;
--icon-color: var(--color-surface);
--icon-background-color: transparent;
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem 0.3rem;
.consent-checkbox-container {
--icon-size: 1.2rem;
--icon-color: var(--color-surface);
--icon-background-color: transparent;
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem 0.3rem;
&.checked {
--icon-color: var(--color-surfacelight);
--icon-background-color: var(--color-primary);
}
&:global(.checked) {
--icon-color: var(--color-surfacelight);
--icon-background-color: var(--color-primary);
}
&:focus, &:hover {
--icon-color: var(--color-surfacelighter);
background-color: var(--color-surfacedarker60);
.label {
color: var(--color-surfacelighter);
.link {
color: var(--color-surfacelighter);
}
}
}
&:focus, &:hover {
--icon-color: var(--color-surfacelighter);
background-color: var(--color-surfacedarker60);
.label {
flex: 1;
margin-left: 0.5rem;
color: var(--color-surface);
color: var(--color-surfacelighter);
.link {
color: var(--color-surfacelight);
color: var(--color-surfacelighter);
}
}
}
&:hover {
text-decoration: underline;
}
.label {
flex: 1;
margin-left: 0.5rem;
color: var(--color-surface);
.link {
color: var(--color-surfacelight);
&:hover {
text-decoration: underline;
}
}
}

44
src/routes/Intro/Intro.js
View file

@ -4,7 +4,7 @@ const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common');
const CredentialsTextInput = require('./CredentialsTextInput');
const ConsentCheckbox = require('./ConsentCheckbox');
require('./styles');
const styles = require('./styles');
const LOGIN_FORM = 'LOGIN_FORM';
const SIGNUP_FORM = 'SIGNUP_FORM';
@ -183,16 +183,16 @@ class Intro extends React.Component {
render() {
return (
<div className={'intro-container'}>
<div className={'form-container'}>
<Button className={classnames('form-button', 'facebook-button')} onClick={this.loginWithFacebook}>
<Icon className={'icon'} icon={'ic_facebook'} />
<div className={'label'}>Continue with Facebook</div>
<div className={styles['intro-container']}>
<div className={styles['form-container']}>
<Button className={classnames(styles['form-button'], styles['facebook-button'])} onClick={this.loginWithFacebook}>
<Icon className={styles['icon']} icon={'ic_facebook'} />
<div className={styles['label']}>Continue with Facebook</div>
</Button>
<div className={'facebook-statement'}>We won't post anything on your behalf</div>
<div className={styles['facebook-statement']}>We won't post anything on your behalf</div>
<CredentialsTextInput
ref={this.emailRef}
className={'text-input'}
className={styles['text-input']}
type={'email'}
placeholder={'Email'}
value={this.state.email}
@ -201,7 +201,7 @@ class Intro extends React.Component {
/>
<CredentialsTextInput
ref={this.passwordRef}
className={'text-input'}
className={styles['text-input']}
type={'password'}
placeholder={'Password'}
value={this.state.password}
@ -213,7 +213,7 @@ class Intro extends React.Component {
<React.Fragment>
<CredentialsTextInput
ref={this.confirmPasswordRef}
className={'text-input'}
className={styles['text-input']}
type={'password'}
placeholder={'Confirm Password'}
value={this.state.confirmPassword}
@ -222,7 +222,7 @@ class Intro extends React.Component {
/>
<ConsentCheckbox
ref={this.termsRef}
className={'consent-checkbox'}
className={styles['consent-checkbox']}
label={'I have read and agree with the Stremio'}
link={'Terms and conditions'}
href={'https://www.stremio.com/tos'}
@ -231,7 +231,7 @@ class Intro extends React.Component {
/>
<ConsentCheckbox
ref={this.privacyPolicyRef}
className={'consent-checkbox'}
className={styles['consent-checkbox']}
label={'I have read and agree with the Stremio'}
link={'Privacy Policy'}
href={'https://www.stremio.com/privacy'}
@ -240,36 +240,36 @@ class Intro extends React.Component {
/>
<ConsentCheckbox
ref={this.marketingRef}
className={'consent-checkbox'}
className={styles['consent-checkbox']}
label={'I agree to receive marketing communications from Stremio'}
checked={this.state.marketingAccepted}
toggle={this.toggleMarketingAccepted}
/>
</React.Fragment>
:
<div className={'forgot-password-link-container'}>
<Button className={'forgot-password-link'} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Button>
<div className={styles['forgot-password-link-container']}>
<Button className={styles['forgot-password-link']} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Button>
</div>
}
{
this.state.error.length > 0 ?
<div ref={this.errorRef} className={'error-message'}>{this.state.error}</div>
<div ref={this.errorRef} className={styles['error-message']}>{this.state.error}</div>
:
null
}
<Button className={classnames('form-button', 'submit-button')} onClick={this.state.form === SIGNUP_FORM ? this.signup : this.loginWithEmail}>
<div className={'label'}>{this.state.form === SIGNUP_FORM ? 'SING UP' : 'LOG IN'}</div>
<Button className={classnames(styles['form-button'], styles['submit-button'])} onClick={this.state.form === SIGNUP_FORM ? this.signup : this.loginWithEmail}>
<div className={styles['label']}>{this.state.form === SIGNUP_FORM ? 'SING UP' : 'LOG IN'}</div>
</Button>
{
this.state.form === SIGNUP_FORM ?
<Button className={classnames('form-button', 'guest-login-button')} onClick={this.loginAsGuest}>
<div className={'label'}>GUEST LOGIN</div>
<Button className={classnames(styles['form-button'], styles['guest-login-button'])} onClick={this.loginAsGuest}>
<div className={styles['label']}>GUEST LOGIN</div>
</Button>
:
null
}
<Button className={classnames('form-button', 'switch-form-button')} onClick={this.switchForm}>
<div className={'label'}>{this.state.form === SIGNUP_FORM ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
<Button className={classnames(styles['form-button'], styles['switch-form-button'])} onClick={this.switchForm}>
<div className={styles['label']}>{this.state.form === SIGNUP_FORM ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
</Button>
</div>
</div>