From eb72dfb2664fbf9abc6095aa165c33b46cc75a7c Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Tue, 4 Jun 2019 11:06:09 +0300
Subject: [PATCH] minor refactor in Intro screen

---
 src/common/Checkbox/styles.less              |   1 -
 src/routes/Intro/ConsentCheckbox/styles.less |   2 -
 src/routes/Intro/Intro.js                    | 181 ++++++------
 src/routes/Intro/styles.less                 | 284 +++++++++----------
 4 files changed, 221 insertions(+), 247 deletions(-)

diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less
index a7184f73f..498e75d3b 100644
--- a/src/common/Checkbox/styles.less
+++ b/src/common/Checkbox/styles.less
@@ -1,7 +1,6 @@
 .checkbox-container {
     position: relative;
     z-index: 0;
-    display: inline-block;
 
     &:global(.checked) {
         .icon {
diff --git a/src/routes/Intro/ConsentCheckbox/styles.less b/src/routes/Intro/ConsentCheckbox/styles.less
index d413ff144..4770c7169 100644
--- a/src/routes/Intro/ConsentCheckbox/styles.less
+++ b/src/routes/Intro/ConsentCheckbox/styles.less
@@ -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);
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index 25e5eb5a1..876cc6c92 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -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>
         );
     }
 }
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index 114cefe7d..0a98be41f 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -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);
             }
         }
     }