From 2fb72ceb0382659393e95672f6fbf9e554617cd3 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 29 Jan 2019 13:33:37 +0200
Subject: [PATCH 01/11] user-select: text; for inputs

---
 src/App/styles.less | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/App/styles.less b/src/App/styles.less
index da0ea8c21..9ab13c600 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -59,6 +59,7 @@
     user-select: none;
     text-decoration: none;
     outline: none;
+    appearance: none;
 }
 
 html, body, :global(#app) {
@@ -77,6 +78,10 @@ html, body, :global(#app) {
         height: 100%;
     }
 
+    input {
+        user-select: text;
+    }
+
     ::-webkit-scrollbar {
         width: var(--scroll-bar-width);
     }

From a837a0701fa6d648fa37aba7ee0fbaad843bce02 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 29 Jan 2019 14:27:43 +0200
Subject: [PATCH 02/11] background image renamed

---
 .../{home-testimonials.jpg => login_background.jpg} | Bin
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename images/{home-testimonials.jpg => login_background.jpg} (100%)

diff --git a/images/home-testimonials.jpg b/images/login_background.jpg
similarity index 100%
rename from images/home-testimonials.jpg
rename to images/login_background.jpg

From 8e72845e77fbec49c382fc45cc4295df140fae34 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 29 Jan 2019 14:30:49 +0200
Subject: [PATCH 03/11] intro screen style improvements

---
 src/common/Checkbox/styles.less |   4 +-
 src/routes/Intro/Intro.js       |  56 ++++---
 src/routes/Intro/styles.less    | 252 +++++++++++++++++++-------------
 3 files changed, 183 insertions(+), 129 deletions(-)

diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less
index 10986c425..ffe321f53 100644
--- a/src/common/Checkbox/styles.less
+++ b/src/common/Checkbox/styles.less
@@ -16,8 +16,8 @@
         opacity: 0;
         height: 0;
         width: 0;
-        top: -99999999px;
-        left: -99999999px;
+        top: 0;
+        left: 0;
     }
 
     &:global(.checked) {
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index ea94e84d4..8bbce9e13 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -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>
         );
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index f9eb4c98c..e53cdf3bd 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -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;
+                }
+            }
         }
     }
 }
\ No newline at end of file

From fe2ded7f324d7023a5dba6cd7d935f81e543b157 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 29 Jan 2019 17:59:42 +0200
Subject: [PATCH 04/11] CheckboxLabel renamed to ConsentCheckbox

---
 src/routes/Intro/CheckboxLabel/index.js                |  3 ---
 .../ConsentCheckbox.js}                                | 10 +++++-----
 src/routes/Intro/ConsentCheckbox/index.js              |  3 +++
 .../{CheckboxLabel => ConsentCheckbox}/styles.less     |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)
 delete mode 100644 src/routes/Intro/CheckboxLabel/index.js
 rename src/routes/Intro/{CheckboxLabel/CheckboxLabel.js => ConsentCheckbox/ConsentCheckbox.js} (69%)
 create mode 100644 src/routes/Intro/ConsentCheckbox/index.js
 rename src/routes/Intro/{CheckboxLabel => ConsentCheckbox}/styles.less (96%)

diff --git a/src/routes/Intro/CheckboxLabel/index.js b/src/routes/Intro/CheckboxLabel/index.js
deleted file mode 100644
index 830cfc415..000000000
--- a/src/routes/Intro/CheckboxLabel/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import CheckboxLabel from './CheckboxLabel';
-
-export default CheckboxLabel;
diff --git a/src/routes/Intro/CheckboxLabel/CheckboxLabel.js b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
similarity index 69%
rename from src/routes/Intro/CheckboxLabel/CheckboxLabel.js
rename to src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
index d3e4974ed..9dfd91105 100644
--- a/src/routes/Intro/CheckboxLabel/CheckboxLabel.js
+++ b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
@@ -4,8 +4,8 @@ import classnames from 'classnames';
 import { Checkbox } from 'stremio-common';
 import styles from './styles';
 
-const CheckboxLabel = React.forwardRef(({ className, label, link, href, checked, onClick }, ref) => (
-    <label className={classnames(styles['checkbox-label-container'], className)}>
+const ConsentCheckbox = React.forwardRef(({ className, label, link, href, checked, onClick }, ref) => (
+    <label className={classnames(styles['consent-checkbox-container'], className)}>
         <Checkbox ref={ref} className={styles['checkbox']} checked={checked} onClick={onClick} />
         <div className={styles['label']}>
             {label}
@@ -14,9 +14,9 @@ const CheckboxLabel = React.forwardRef(({ className, label, link, href, checked,
     </label>
 ));
 
-CheckboxLabel.displayName = 'CheckboxLabel';
+ConsentCheckbox.displayName = 'ConsentCheckbox';
 
-CheckboxLabel.propTypes = {
+ConsentCheckbox.propTypes = {
     className: PropTypes.string,
     onClick: PropTypes.func,
     label: PropTypes.string,
@@ -25,4 +25,4 @@ CheckboxLabel.propTypes = {
     checked: PropTypes.bool
 };
 
-export default CheckboxLabel;
+export default ConsentCheckbox;
diff --git a/src/routes/Intro/ConsentCheckbox/index.js b/src/routes/Intro/ConsentCheckbox/index.js
new file mode 100644
index 000000000..b31edc668
--- /dev/null
+++ b/src/routes/Intro/ConsentCheckbox/index.js
@@ -0,0 +1,3 @@
+import ConsentCheckbox from './ConsentCheckbox';
+
+export default ConsentCheckbox;
diff --git a/src/routes/Intro/CheckboxLabel/styles.less b/src/routes/Intro/ConsentCheckbox/styles.less
similarity index 96%
rename from src/routes/Intro/CheckboxLabel/styles.less
rename to src/routes/Intro/ConsentCheckbox/styles.less
index 2fc58adf8..c1067f69d 100644
--- a/src/routes/Intro/CheckboxLabel/styles.less
+++ b/src/routes/Intro/ConsentCheckbox/styles.less
@@ -1,4 +1,4 @@
-.checkbox-label-container {
+.consent-checkbox-container {
     display: flex;
     flex-direction: row;
     align-items: center;

From 552de0bd49d93523d25e8f732e4bc649af34d11f Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 29 Jan 2019 17:59:58 +0200
Subject: [PATCH 05/11] Link implemented

---
 src/common/Link/Link.js  | 35 +++++++++++++++++++++++++++++++++++
 src/common/Link/index.js |  3 +++
 src/common/index.js      |  6 ++++--
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/common/Link/Link.js
 create mode 100644 src/common/Link/index.js

diff --git a/src/common/Link/Link.js b/src/common/Link/Link.js
new file mode 100644
index 000000000..dadb27377
--- /dev/null
+++ b/src/common/Link/Link.js
@@ -0,0 +1,35 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { withFocusable } from 'stremio-common';
+
+class Link extends PureComponent {
+    render() {
+        const { forwardedRef, focusable, ...props } = this.props;
+        return (
+            <a
+                {...props}
+                ref={forwardedRef}
+                tabIndex={focusable ? 0 : -1}
+            />
+        );
+    }
+}
+
+Link.propTypes = {
+    focusable: PropTypes.bool.isRequired
+};
+Link.defaultProps = {
+    focusable: false
+};
+
+const LinkWithFocusable = withFocusable(Link);
+
+LinkWithFocusable.displayName = 'LinkWithFocusable';
+
+const LinkWithForwardedRef = React.forwardRef((props, ref) => (
+    <LinkWithFocusable {...props} forwardedRef={ref} />
+));
+
+LinkWithForwardedRef.displayName = 'LinkWithForwardedRef';
+
+export default LinkWithForwardedRef;
diff --git a/src/common/Link/index.js b/src/common/Link/index.js
new file mode 100644
index 000000000..18a195368
--- /dev/null
+++ b/src/common/Link/index.js
@@ -0,0 +1,3 @@
+import Link from './Link';
+
+export default Link;
diff --git a/src/common/index.js b/src/common/index.js
index 3a135f8db..d6fb24585 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -2,7 +2,8 @@ import Slider from './Slider';
 import { FocusableProvider, withFocusable } from './Focusable';
 import Button from './Button';
 import Checkbox from './Checkbox';
-import TextInput from './TextInput';
+import Input from './Input';
+import Link from './Link';
 import { Modal, ModalsContainerContext, withModalsContainer } from './Modal';
 import Popup from './Popup';
 import Router from './Router';
@@ -13,7 +14,8 @@ import UserPanel from './UserPanel';
 
 export {
     Checkbox,
-    TextInput,
+    Input,
+    Link,
     Popup,
     NavBar,
     ModalsContainerContext,

From 09c30a810146f42d89a147f08853a9f04ba6235d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 29 Jan 2019 18:00:24 +0200
Subject: [PATCH 06/11] TextInput renamed to Input

---
 .../{TextInput/TextInput.js => Input/Input.js} | 18 +++++++++---------
 src/common/Input/index.js                      |  3 +++
 src/common/TextInput/index.js                  |  3 ---
 3 files changed, 12 insertions(+), 12 deletions(-)
 rename src/common/{TextInput/TextInput.js => Input/Input.js} (50%)
 create mode 100644 src/common/Input/index.js
 delete mode 100644 src/common/TextInput/index.js

diff --git a/src/common/TextInput/TextInput.js b/src/common/Input/Input.js
similarity index 50%
rename from src/common/TextInput/TextInput.js
rename to src/common/Input/Input.js
index 1c1bed044..1766e975d 100644
--- a/src/common/TextInput/TextInput.js
+++ b/src/common/Input/Input.js
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { withFocusable } from 'stremio-common';
 
-class TextInput extends PureComponent {
+class Input extends PureComponent {
     render() {
         const { forwardedRef, focusable, ...props } = this.props;
         return (
@@ -15,21 +15,21 @@ class TextInput extends PureComponent {
     }
 }
 
-TextInput.propTypes = {
+Input.propTypes = {
     focusable: PropTypes.bool.isRequired
 };
-TextInput.defaultProps = {
+Input.defaultProps = {
     focusable: false
 };
 
-const TextInputWithFocusable = withFocusable(TextInput);
+const InputWithFocusable = withFocusable(Input);
 
-TextInputWithFocusable.displayName = 'TextInputWithFocusable';
+InputWithFocusable.displayName = 'InputWithFocusable';
 
-const TextInputWithForwardedRef = React.forwardRef((props, ref) => (
-    <TextInputWithFocusable {...props} forwardedRef={ref} />
+const InputWithForwardedRef = React.forwardRef((props, ref) => (
+    <InputWithFocusable {...props} forwardedRef={ref} />
 ));
 
-TextInputWithForwardedRef.displayName = 'TextInputWithForwardedRef';
+InputWithForwardedRef.displayName = 'InputWithForwardedRef';
 
-export default TextInputWithForwardedRef;
+export default InputWithForwardedRef;
diff --git a/src/common/Input/index.js b/src/common/Input/index.js
new file mode 100644
index 000000000..a122bd4be
--- /dev/null
+++ b/src/common/Input/index.js
@@ -0,0 +1,3 @@
+import Input from './Input';
+
+export default Input;
diff --git a/src/common/TextInput/index.js b/src/common/TextInput/index.js
deleted file mode 100644
index a93ada305..000000000
--- a/src/common/TextInput/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import TextInput from './TextInput';
-
-export default TextInput;

From 7b5c24afd1ebe0dd479492de87b1ef8047e91332 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 29 Jan 2019 18:00:32 +0200
Subject: [PATCH 07/11] border size added to app styles

---
 src/App/styles.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App/styles.less b/src/App/styles.less
index 9ab13c600..9b4e27486 100644
--- a/src/App/styles.less
+++ b/src/App/styles.less
@@ -48,6 +48,7 @@
     --poster-shape-ratio: 1.464;
     --window-min-width: 1000px;
     --window-min-height: 650px;
+    --focusable-border-size: 2px;
 }
 
 * {

From d5f6b8b77242f38b70951a249df46ea85dd6ced7 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 29 Jan 2019 18:01:45 +0200
Subject: [PATCH 08/11] intro screen styles refactored

---
 src/routes/Intro/styles.less | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index e53cdf3bd..b89d080da 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -23,7 +23,8 @@
         background-color: var(--color-backgrounddark80);
     }
 
-    .scroll-container { 
+    .scroll-container {
+        display: flex;
         position: absolute;
         z-index: 1;
         top: 0;
@@ -34,8 +35,9 @@
         overflow-x: hidden;
 
         .intro {
-            width: 270px;
             margin: auto;
+            padding: calc(var(--login-form-width) * 0.2) 0;
+            width: var(--login-form-width);
 
             .facebook-button {
                 width: var(--login-form-width);
@@ -44,7 +46,7 @@
                 align-items: center;
                 justify-content: center;
                 padding: calc(var(--spacing) * 1.25) 0;
-                border: 2px solid transparent;
+                border: var(--focusable-border-size) solid transparent;
                 background: var(--color-secondarydark);
                 cursor: pointer;
 
@@ -68,7 +70,7 @@
                 }
             }
 
-            .facebook-subtext {
+            .facebook-statement {
                 margin: calc(var(--spacing) * 0.5) 0 calc(var(--spacing) * 4) 0;
                 text-align: center;
                 color: var(--color-surface);
@@ -77,9 +79,9 @@
             .form-container {
                 width: var(--login-form-width);
                 display: flex;
+                flex-direction: column;
                 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);
@@ -102,12 +104,11 @@
                     }
                 }
 
-                .checkbox-label {
+                .consent-checkbox {
                     width: 100%;
                     margin-bottom: var(--spacing);
                     padding: calc(var(--spacing) * 0.5);
-                    text-align: left;
-                    border: 2px solid transparent;
+                    border: var(--focusable-border-size) solid transparent;
 
                     &:focus-within {
                         border-color: var(--color-surfacelighter);
@@ -119,7 +120,7 @@
                     align-self: flex-end;
                     margin-bottom: var(--spacing);
                     padding: calc(var(--spacing) * 0.5);
-                    border: 2px solid transparent;
+                    border: var(--focusable-border-size) solid transparent;
                     color: var(--color-surfacelight);
                     cursor: pointer;
 
@@ -148,7 +149,7 @@
                     padding: calc(var(--spacing) * 1.1);
                     font-size: 1.1em;
                     font-weight: 600;
-                    border: 2px solid transparent;
+                    border: var(--focusable-border-size) solid transparent;
                     color: var(--color-surfacelighter);
                     background-color: var(--color-primarydark);
                     cursor: pointer;
@@ -158,7 +159,7 @@
                     }
 
                     &:focus {
-                        border: 2px solid var(--color-surfacelighter);
+                        border-color: var(--color-surfacelighter);
                     }
 
                     &:hover {
@@ -167,7 +168,7 @@
                 }
             }
 
-            .option {
+            .switch-form-button, .guest-login-button {
                 width: 100%;
                 display: inline-block;
                 margin-top: var(--spacing);
@@ -175,12 +176,12 @@
                 text-align: center;
                 font-size: 1.1em;
                 font-weight: 600;
-                border: 2px solid transparent;
+                border: var(--focusable-border-size) solid transparent;
                 color: var(--color-surfacelighter);
                 cursor: pointer;
 
                 &:focus {
-                    border: 2px solid var(--color-surfacelighter);
+                    border-color: var(--color-surfacelighter);
                 }
 
                 &:hover {

From 02f00afc098b216713f014ca919a937cda6d5a2a Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 29 Jan 2019 18:06:18 +0200
Subject: [PATCH 09/11] intro screen: sign up/ login form united

---
 src/routes/Intro/Intro.js | 96 +++++++++++++++------------------------
 1 file changed, 36 insertions(+), 60 deletions(-)

diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index 8752ee275..dd438cc74 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import Icon from 'stremio-icons/dom';
-import { Button, TextInput } from 'stremio-common';
-import CheckboxLabel from './CheckboxLabel';
+import { Button, Input, Link } from 'stremio-common';
+import ConsentCheckbox from './ConsentCheckbox';
 import styles from './styles';
 
 const FORMS = {
@@ -22,7 +22,7 @@ class Intro extends Component {
         this.errorRef = React.createRef();
 
         this.state = {
-            selectedForm: FORMS.SIGN_UP,
+            selectedForm: FORMS.LOGIN,
             termsAccepted: false,
             privacyPolicyAccepted: false,
             marketingAccepted: false,
@@ -92,6 +92,9 @@ class Intro extends Component {
         if (prevState.error !== this.state.error && this.state.error.length > 0) {
             this.errorRef.current.scrollIntoView();
         }
+        if (prevState.selectedForm !== this.state.selectedForm) {
+            this.emailRef.current.focus();
+        }
     }
 
     loginOnSubmit = (event) => {
@@ -153,77 +156,50 @@ class Intro extends Component {
         }
     }
 
-    guestLoginOnSubmit = (event) => {
+    guestLoginOnSubmit = () => {
         if (!this.state.termsAccepted) {
-            event.preventDefault();
             this.setState({ error: 'You must accept the Terms of Service' });
         }
     }
 
-    renderSignUpForm = () => {
-        return (
-            <form className={styles['form-container']} onSubmit={this.signUpOnSubmit}>
-                <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 ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
-                        :
-                        null
-                }
-                <input className={styles['submit-button']} type={'submit'} value={'SING UP'} />
-            </form>
-        );
-    }
-
-    renderLoginForm = () => {
-        return (
-            <form className={styles['form-container']} onSubmit={this.loginOnSubmit}>
-                <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 ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
-                        :
-                        null
-                }
-                <input className={styles['submit-button']} type={'submit'} value={'LOG IN'} />
-            </form>
-        );
-    }
-
-    renderSelectedForm = () => {
-        switch (this.state.selectedForm) {
-            case FORMS.SIGN_UP:
-                return this.renderSignUpForm();
-            case FORMS.LOGIN:
-                return this.renderLoginForm();
-            default:
-                return null;
-        }
-    }
-
     render() {
         return (
             <div className={styles['intro-container']}>
                 <div className={styles['overlay']} />
                 <div className={styles['scroll-container']}>
                     <div className={styles['intro']}>
-                        <div className={styles['facebook-button']} tabIndex={'0'}>
+                        <Button className={styles['facebook-button']}>
                             <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>
+                        </Button>
+                        <div className={styles['facebook-statement']}>We won't post anything on your behalf</div>
+                        <form className={styles['form-container']} onSubmit={this.state.selectedForm === FORMS.LOGIN ? this.loginOnSubmit : this.signUpOnSubmit}>
+                            <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} />
+                            {
+                                this.state.selectedForm === FORMS.LOGIN ?
+                                    <Link className={styles['forgot-password']} href={'https://www.strem.io/reset-password/'} target={'_blank'}>Forgot password?</Link>
+                                    :
+                                    <Fragment>
+                                        <Input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} />
+                                        <ConsentCheckbox ref={this.termsRef} className={styles['consent-checkbox']} label={'I have read and agree wead and agree wead and agree wead and agree wead and agree wead and agree w ead and agree wead and agree wead and agree w ead and agree wead and agree wead and agree wead and agree w ead and agree wead and agree wead and agree w ead and agree wead and agree wead and agree wead and agree wead and agree wead and agree w ead and agree wead and agree wead and agree wead and agree w ead and agree wead and agree wead and agree wead and agree w ith 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>
+                            }
+                            {
+                                this.state.error.length > 0 ?
+                                    <div ref={this.errorRef} className={styles['error']}>{this.state.error}</div>
+                                    :
+                                    null
+                            }
+                            <Input className={styles['submit-button']} type={'submit'} value={this.state.selectedForm === FORMS.LOGIN ? 'LOG IN' : 'SING UP'} />
+                        </form>
+
+                        <Button className={styles['switch-form-button']} 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'}</Button>
                         {
                             this.state.selectedForm === FORMS.SIGN_UP ?
-                                <a className={styles['option']} href={'#/'} onClick={this.guestLoginOnSubmit}>GUEST LOGIN</a>
+                                <Button className={styles['guest-login-button']} onClick={this.guestLoginOnSubmit}>GUEST LOGIN</Button>
                                 :
                                 null
                         }

From 4a60321cf54537b07860e68576fd5e24030d5151 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 30 Jan 2019 10:41:08 +0200
Subject: [PATCH 10/11] reset error on submit

---
 src/routes/Intro/Intro.js    | 11 ++++++++---
 src/routes/Intro/styles.less |  2 +-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index dd438cc74..e392f8c19 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -92,6 +92,7 @@ class Intro extends Component {
         if (prevState.error !== this.state.error && this.state.error.length > 0) {
             this.errorRef.current.scrollIntoView();
         }
+
         if (prevState.selectedForm !== this.state.selectedForm) {
             this.emailRef.current.focus();
         }
@@ -108,6 +109,8 @@ class Intro extends Component {
 
             if (this.state.password.length === 0) {
                 this.setState({ error: 'Invalid password' });
+            } else {
+                this.setState({ error: '' });
             }
         }
     }
@@ -148,6 +151,7 @@ class Intro extends Component {
                             if (this.privacyPolicyRef.current === document.activeElement) {
                                 this.marketingRef.current.focus();
                             }
+
                             this.setState({ error: '' });
                         }
                     }
@@ -159,6 +163,8 @@ class Intro extends Component {
     guestLoginOnSubmit = () => {
         if (!this.state.termsAccepted) {
             this.setState({ error: 'You must accept the Terms of Service' });
+        } else {
+            this.setState({ error: '' });
         }
     }
 
@@ -166,7 +172,7 @@ class Intro extends Component {
         return (
             <div className={styles['intro-container']}>
                 <div className={styles['overlay']} />
-                <div className={styles['scroll-container']}>
+                <div className={styles['scroll-content']}>
                     <div className={styles['intro']}>
                         <Button className={styles['facebook-button']}>
                             <Icon className={styles['icon']} icon={'ic_facebook'} />
@@ -182,7 +188,7 @@ class Intro extends Component {
                                     :
                                     <Fragment>
                                         <Input ref={this.confirmPasswordRef} className={styles['text-input']} type={'password'} placeholder={'Confirm Password'} value={this.state.confirmPassword} onChange={this.confirmPasswordOnChange} />
-                                        <ConsentCheckbox ref={this.termsRef} className={styles['consent-checkbox']} label={'I have read and agree wead and agree wead and agree wead and agree wead and agree wead and agree w ead and agree wead and agree wead and agree w ead and agree wead and agree wead and agree wead and agree w ead and agree wead and agree wead and agree w ead and agree wead and agree wead and agree wead and agree wead and agree wead and agree w ead and agree wead and agree wead and agree wead and agree w ead and agree wead and agree wead and agree wead and agree w ith the Stremio'} link={'Terms and conditions'} href={'https://www.stremio.com/tos'} checked={this.state.termsAccepted} onClick={this.toggleTerms} />
+                                        <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>
@@ -195,7 +201,6 @@ class Intro extends Component {
                             }
                             <Input className={styles['submit-button']} type={'submit'} value={this.state.selectedForm === FORMS.LOGIN ? 'LOG IN' : 'SING UP'} />
                         </form>
-
                         <Button className={styles['switch-form-button']} 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'}</Button>
                         {
                             this.state.selectedForm === FORMS.SIGN_UP ?
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index b89d080da..8afd7549d 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -23,7 +23,7 @@
         background-color: var(--color-backgrounddark80);
     }
 
-    .scroll-container {
+    .scroll-content {
         display: flex;
         position: absolute;
         z-index: 1;

From db06aadf052314b124ca84453346150deb9c6e52 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 30 Jan 2019 11:44:47 +0200
Subject: [PATCH 11/11] facebook icon height fixed

---
 src/routes/Intro/styles.less | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index 8afd7549d..57c81ceac 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -25,6 +25,7 @@
 
     .scroll-content {
         display: flex;
+        flex-direction: row;
         position: absolute;
         z-index: 1;
         top: 0;
@@ -43,15 +44,15 @@
                 width: var(--login-form-width);
                 height: calc(var(--login-form-width) * 0.25);
                 display: flex;
+                flex-direction: row;
                 align-items: center;
                 justify-content: center;
-                padding: calc(var(--spacing) * 1.25) 0;
                 border: var(--focusable-border-size) solid transparent;
                 background: var(--color-secondarydark);
                 cursor: pointer;
 
                 .icon {
-                    height: 100%;
+                    height: 1.7em;
                     margin-right: var(--spacing);
                     fill: var(--color-surfacelighter);
                 }