mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-08-15 23:07:51 +00:00
intro screen style improvements
This commit is contained in:
svetlagasheva
parent
a837a0701f
commit
8e72845e77
3 changed files with 183 additions and 129 deletions
|
|
@ -16,8 +16,8 @@
|
|||
opacity: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
top: -99999999px;
|
||||
left: -99999999px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:global(.checked) {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ class Intro extends Component {
|
|||
this.termsRef = React.createRef();
|
||||
this.privacyPolicyRef = React.createRef();
|
||||
this.marketingRef = React.createRef();
|
||||
this.errorRef = React.createRef();
|
||||
|
||||
this.state = {
|
||||
selectedForm: FORMS.SIGN_UP,
|
||||
|
|
@ -32,6 +33,7 @@ class Intro extends Component {
|
|||
}
|
||||
|
||||
changeSelectedForm = (event) => {
|
||||
event.currentTarget.blur();
|
||||
this.setState({
|
||||
selectedForm: event.currentTarget.dataset.option,
|
||||
termsAccepted: false,
|
||||
|
|
@ -85,6 +87,12 @@ class Intro extends Component {
|
|||
nextState.error !== this.state.error;
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.error !== this.state.error && this.state.error.length > 0) {
|
||||
this.errorRef.current.scrollIntoView();
|
||||
}
|
||||
}
|
||||
|
||||
loginOnSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
if (this.state.email.length < 8) {
|
||||
|
|
@ -144,7 +152,7 @@ class Intro extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
validateGuestLogin = (event) => {
|
||||
guestLoginOnSubmit = (event) => {
|
||||
if (!this.state.termsAccepted) {
|
||||
event.preventDefault();
|
||||
this.setState({ error: 'You must accept the Terms of Service' });
|
||||
|
|
@ -154,15 +162,15 @@ class Intro extends Component {
|
|||
renderSignUpForm = () => {
|
||||
return (
|
||||
<form className={styles['form-container']} onSubmit={this.signUpOnSubmit}>
|
||||
<input ref={this.emailRef} className={styles['email']} type={'text'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
|
||||
<input ref={this.passwordRef} className={styles['password']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
|
||||
<input ref={this.confirmPasswordRef} className={styles['password']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} />
|
||||
<CheckboxLabel ref={this.termsRef} className={styles['checkbox-label']} 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} />
|
||||
<input ref={this.emailRef} className={styles['text-input']} type={'text'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
|
||||
<input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
|
||||
<input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} />
|
||||
<CheckboxLabel ref={this.termsRef} className={styles['checkbox-label']} label={'I have read and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree jhgj ghj hjg jhg jhg jkhg kjhg kjhgjkhg gjhg jhkg jhg jkhg jkhg jkhg jkg jkhgj kghkj gjh gjk gkj hgkkjh kjgwithd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree withd and agree with the Stremio'} link={'Terms and conditions'} href={'https://www.stremio.com/tos'} checked={this.state.termsAccepted} onClick={this.toggleTerms} />
|
||||
<CheckboxLabel ref={this.privacyPolicyRef} className={styles['checkbox-label']} 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} />
|
||||
<CheckboxLabel ref={this.marketingRef} className={styles['checkbox-label']} label={'I agree to receive marketing communications from Stremio'} checked={this.state.marketingAccepted} onClick={this.toggleMarketing} />
|
||||
{
|
||||
this.state.error.length > 0 ?
|
||||
<div className={styles['error']}>{this.state.error}</div>
|
||||
<div ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
|
|
@ -174,12 +182,12 @@ class Intro extends Component {
|
|||
renderLoginForm = () => {
|
||||
return (
|
||||
<form className={styles['form-container']} onSubmit={this.loginOnSubmit}>
|
||||
<input ref={this.emailRef} className={styles['email']} type={'text'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
|
||||
<input ref={this.passwordRef} className={styles['password']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
|
||||
<input ref={this.emailRef} className={styles['text-input']} type={'text'} placeholder={'Email'} value={this.state.email} onChange={this.emailOnChange} />
|
||||
<input ref={this.passwordRef} className={styles['text-input']} type={'password'} placeholder={'Password'} value={this.state.password} onChange={this.passwordOnChange} />
|
||||
<a className={styles['forgot-password']} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</a>
|
||||
{
|
||||
this.state.error.length > 0 ?
|
||||
<div className={styles['error']}>{this.state.error}</div>
|
||||
<div ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
|
|
@ -188,7 +196,7 @@ class Intro extends Component {
|
|||
);
|
||||
}
|
||||
|
||||
renderSelectedMenu = () => {
|
||||
renderSelectedForm = () => {
|
||||
switch (this.state.selectedForm) {
|
||||
case FORMS.SIGN_UP:
|
||||
return this.renderSignUpForm();
|
||||
|
|
@ -203,20 +211,22 @@ class Intro extends Component {
|
|||
return (
|
||||
<div className={styles['intro-container']}>
|
||||
<div className={styles['overlay']} />
|
||||
<div className={styles['intro']}>
|
||||
<div className={styles['facebook-button']} tabIndex={'0'}>
|
||||
<Icon className={styles['icon']} icon={'ic_facebook'} />
|
||||
<div className={styles['label']}>Login with Facebook</div>
|
||||
<div className={styles['scroll-container']}>
|
||||
<div className={styles['intro']}>
|
||||
<div className={styles['facebook-button']} tabIndex={'0'}>
|
||||
<Icon className={styles['icon']} icon={'ic_facebook'} />
|
||||
<div className={styles['label']}>Login with Facebook</div>
|
||||
</div>
|
||||
<div className={styles['facebook-subtext']}>We won't post anything on your behalf</div>
|
||||
{this.renderSelectedForm()}
|
||||
<div className={styles['option']} tabIndex={'0'} data-option={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>{this.state.selectedForm === FORMS.SIGN_UP ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
|
||||
{
|
||||
this.state.selectedForm === FORMS.SIGN_UP ?
|
||||
<a className={styles['option']} href={'#/'} onClick={this.guestLoginOnSubmit}>GUEST LOGIN</a>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
<div className={styles['facebook-subtext']}>We won't post anything on your behalf</div>
|
||||
{this.renderSelectedMenu()}
|
||||
<div className={styles['option']} data-option={this.state.selectedForm === FORMS.SIGN_UP ? FORMS.LOGIN : FORMS.SIGN_UP} onClick={this.changeSelectedForm}>{this.state.selectedForm === FORMS.SIGN_UP ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
|
||||
{
|
||||
this.state.selectedForm === FORMS.SIGN_UP ?
|
||||
<a className={styles['option']} href={'#/'} onClick={this.validateGuestLogin}>GUEST LOGIN</a>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/images/home-testimonials.jpg');
|
||||
background-image: url('/images/login_background.jpg');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
|
||||
|
|
@ -23,126 +23,170 @@
|
|||
background-color: var(--color-backgrounddark80);
|
||||
}
|
||||
|
||||
.intro {
|
||||
.scroll-container {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.facebook-button {
|
||||
width: var(--login-form-width);
|
||||
height: calc(var(--login-form-width) * 0.25);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
padding: calc(var(--spacing) * 1.25) 0;
|
||||
background: var(--color-secondarydark);
|
||||
.intro {
|
||||
width: 270px;
|
||||
margin: auto;
|
||||
|
||||
.icon {
|
||||
height: 100%;
|
||||
margin-right: var(--spacing);
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1.1em;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.facebook-subtext {
|
||||
margin: calc(var(--spacing) * 0.5) 0 calc(var(--spacing) * 4) 0;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: var(--login-form-width);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.email {
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: 0.5em 0;
|
||||
border-bottom: 1px solid var(--color-surface);
|
||||
font-size: 1.1em;
|
||||
color: var(--color-surfacelighter);
|
||||
outline: none;
|
||||
background: none;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
}
|
||||
|
||||
.password {
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: 0.5em 0;
|
||||
border-bottom: 1px solid var(--color-surface);
|
||||
font-size: 1.1em;
|
||||
color: var(--color-surfacelighter);
|
||||
outline: none;
|
||||
background: none;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
|
||||
|
||||
.forgot-password {
|
||||
.facebook-button {
|
||||
width: var(--login-form-width);
|
||||
height: calc(var(--login-form-width) * 0.25);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: calc(var(--spacing) * 1.25) 0;
|
||||
border: 2px solid transparent;
|
||||
background: var(--color-secondarydark);
|
||||
cursor: pointer;
|
||||
margin-bottom: var(--spacing);
|
||||
color: var(--color-surfacelight);
|
||||
|
||||
&:hover {
|
||||
.icon {
|
||||
height: 100%;
|
||||
margin-right: var(--spacing);
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 1.1em;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
margin-bottom: var(--spacing);
|
||||
text-align: center;
|
||||
color: var(--color-signal1);
|
||||
}
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
padding: calc(var(--spacing) * 1.1);
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-primarydark);
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-primary);
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
cursor: pointer;
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
color: var(--color-surfacelighter);
|
||||
.facebook-subtext {
|
||||
margin: calc(var(--spacing) * 0.5) 0 calc(var(--spacing) * 4) 0;
|
||||
text-align: center;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.form-container {
|
||||
width: var(--login-form-width);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.text-input {
|
||||
margin: 0 calc(var(--spacing) * 0.5) var(--spacing) calc(var(--spacing) * 0.5);
|
||||
padding: 0.5em 0;
|
||||
border-bottom: 1px solid var(--color-surface);
|
||||
font-size: 1.1em;
|
||||
color: var(--color-surfacelighter);
|
||||
background: none;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
border-bottom-color: var(--color-surfacelighter);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
width: 100%;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
text-align: left;
|
||||
border: 2px solid transparent;
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.forgot-password {
|
||||
align-self: flex-end;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
border: 2px solid transparent;
|
||||
color: var(--color-surfacelight);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
margin-bottom: var(--spacing);
|
||||
text-align: center;
|
||||
color: var(--color-signal1);
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
outline: none;
|
||||
padding: calc(var(--spacing) * 1.1);
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
border: 2px solid transparent;
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-primarydark);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 2px solid var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.option {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
margin-top: var(--spacing);
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
text-align: center;
|
||||
font-size: 1.1em;
|
||||
font-weight: 600;
|
||||
border: 2px solid transparent;
|
||||
color: var(--color-surfacelighter);
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
border: 2px solid var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue