mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-05 04:19:55 +00:00
minor refactor in Intro screen
This commit is contained in:
NikolaBorislavovHristov
parent
ca4e83148e
commit
eb72dfb266
4 changed files with 221 additions and 247 deletions
|
|
@ -1,7 +1,6 @@
|
|||
.checkbox-container {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: inline-block;
|
||||
|
||||
&:global(.checked) {
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -14,8 +14,6 @@
|
|||
margin-left: 0.5em;
|
||||
line-height: 1.2em;
|
||||
color: var(--color-surface);
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
|
||||
.link {
|
||||
color: var(--color-surfacelight);
|
||||
|
|
|
|||
|
|
@ -182,99 +182,96 @@ class Intro extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles['intro-container']}>
|
||||
<div className={styles['background-overlay']} />
|
||||
<div className={styles['intro-content']} tabIndex={-1}>
|
||||
<div className={styles['form-container']}>
|
||||
<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}
|
||||
/>
|
||||
{
|
||||
this.state.selectedForm === FORMS.LOGIN ?
|
||||
<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>
|
||||
:
|
||||
<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}
|
||||
toggle={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}
|
||||
toggle={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}
|
||||
toggle={this.toggleMarketing}
|
||||
/>
|
||||
</React.Fragment>
|
||||
}
|
||||
{
|
||||
this.state.error.length > 0 ?
|
||||
<div ref={this.errorRef} className={styles['error-message']}>{this.state.error}</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
<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={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={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>
|
||||
<div className={styles['intro-container']} tabIndex={-1}>
|
||||
<div className={styles['form-container']}>
|
||||
<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}
|
||||
/>
|
||||
{
|
||||
this.state.selectedForm === FORMS.LOGIN ?
|
||||
<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>
|
||||
:
|
||||
<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}
|
||||
toggle={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}
|
||||
toggle={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}
|
||||
toggle={this.toggleMarketing}
|
||||
/>
|
||||
</React.Fragment>
|
||||
}
|
||||
{
|
||||
this.state.error.length > 0 ?
|
||||
<div ref={this.errorRef} className={styles['error-message']}>{this.state.error}</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
<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={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={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>
|
||||
</div >
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,184 +4,164 @@
|
|||
}
|
||||
|
||||
.intro-container {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
height: 100%;
|
||||
background-image: url('/images/intro_background.jpg');
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background:
|
||||
linear-gradient(var(--color-backgrounddark80), var(--color-backgrounddark80)),
|
||||
url('/images/intro_background.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-origin: border-box;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.background-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
background-color: var(--color-backgrounddark80);
|
||||
}
|
||||
.form-container {
|
||||
width: var(--form-width);
|
||||
margin: auto;
|
||||
padding: 4em 0;
|
||||
|
||||
.intro-content {
|
||||
position: absolute;
|
||||
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;
|
||||
.login-form-button {
|
||||
width: 100%;
|
||||
padding: 0 1em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
.form-container {
|
||||
width: var(--form-width);
|
||||
margin: auto;
|
||||
padding: 4em 0;
|
||||
|
||||
.login-form-button {
|
||||
width: 100%;
|
||||
padding: 0 1em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
width: 0.8em;
|
||||
height: 100%;
|
||||
margin-right: 1em;
|
||||
fill: var(--color-surfacelighter);
|
||||
|
||||
&~.label {
|
||||
max-width: calc(100% - 1.8em);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
max-width: 100%;
|
||||
padding: 0.3em 0;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2em;
|
||||
font-weight: 600;
|
||||
color: var(--color-surfacelighter);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.facebook-button {
|
||||
min-height: 4.5em;
|
||||
background: #4267b2;
|
||||
|
||||
.label {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.facebook-statement {
|
||||
width: 100%;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 2em;
|
||||
text-align: center;
|
||||
color: var(--color-surface);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.text-input {
|
||||
.icon {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
padding: 0.5em 0.3em;
|
||||
border-bottom: calc(0.5 * var(--focusable-border-size)) solid var(--color-surface);
|
||||
width: 0.8em;
|
||||
margin-right: 1em;
|
||||
fill: var(--color-surfacelighter);
|
||||
|
||||
&~.label {
|
||||
max-width: calc(100% - 1.8em);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: none;
|
||||
max-width: 100%;
|
||||
padding: 0.3em 0;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.2em;
|
||||
font-weight: 600;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.facebook-button {
|
||||
min-height: 4.5em;
|
||||
background: #4267b2;
|
||||
|
||||
.label {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.facebook-statement {
|
||||
width: 100%;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 2em;
|
||||
text-align: center;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.text-input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
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 {
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-surfacedarker60);
|
||||
border-bottom-color: var(--color-surfacelighter);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-surfacedarker60);
|
||||
border-bottom-color: var(--color-surfacelighter);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forgot-password-link-container {
|
||||
margin: 1em 0;
|
||||
text-align: right;
|
||||
.forgot-password-link-container {
|
||||
margin: 1em 0;
|
||||
text-align: right;
|
||||
|
||||
.forgot-password-link {
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
padding: 0.5em 0.3em;
|
||||
color: var(--color-surfacelight);
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.consent-checkbox {
|
||||
margin: 1em 0;
|
||||
.forgot-password-link {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
padding: 0.5em 0.3em;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin: 1em 0;
|
||||
text-align: center;
|
||||
color: var(--color-signal1);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
min-height: 4em;
|
||||
margin: 1em 0;
|
||||
background-color: var(--color-primarydark);
|
||||
|
||||
.label {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
color: var(--color-surfacelight);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.guest-login-button {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.2em;
|
||||
padding: 0.8em .3em;
|
||||
.consent-checkbox {
|
||||
margin: 1em 0;
|
||||
padding: 0.5em 0.3em;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-surfacedarker60);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.switch-form-button {
|
||||
padding: 0.8em .3em;
|
||||
&:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-surfacedarker60);
|
||||
}
|
||||
.guest-login-button {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.2em;
|
||||
padding: 0.8em .3em;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-surfacedarker60);
|
||||
}
|
||||
}
|
||||
|
||||
.switch-form-button {
|
||||
padding: 0.8em .3em;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-surfacedarker60);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue