From 103a5ea296183a3bf07da1bb0cb6605c89515592 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 22 Jul 2019 22:41:17 +0300
Subject: [PATCH] Intro screen ui finalized

---
 .../Intro/ConsentCheckbox/ConsentCheckbox.js  |  2 +-
 src/routes/Intro/Intro.js                     | 35 +++++++++----------
 src/routes/Intro/styles.less                  |  8 +++--
 3 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
index 156cb0637..c0176f934 100644
--- a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
+++ b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
@@ -2,7 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const { Input } = require('stremio-navigation');
-const { Checkbox } = require('stremio-common');
+const { Checkbox } = require('stremio/common');
 const styles = require('./styles');
 
 const ConsentCheckbox = React.forwardRef(({ className, checked, label, link, href, toggle }, ref) => {
diff --git a/src/routes/Intro/Intro.js b/src/routes/Intro/Intro.js
index 876cc6c92..7b1519ab9 100644
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@@ -76,8 +76,7 @@ class Intro extends React.Component {
         this.setState({ email: event.currentTarget.value });
     }
 
-    emailOnSubmit = (event) => {
-        event.preventDefault();
+    emailOnSubmit = () => {
         this.passwordRef.current.focus();
     }
 
@@ -85,8 +84,7 @@ class Intro extends React.Component {
         this.setState({ password: event.currentTarget.value });
     }
 
-    passwordOnSubmit = (event) => {
-        event.preventDefault();
+    passwordOnSubmit = () => {
         if (this.state.selectedForm === FORMS.LOGIN) {
             this.loginWithEmail();
         } else {
@@ -98,8 +96,7 @@ class Intro extends React.Component {
         this.setState({ confirmPassword: event.currentTarget.value });
     }
 
-    confirmPasswordOnSubmit = (event) => {
-        event.preventDefault();
+    confirmPasswordOnSubmit = () => {
         this.termsRef.current.focus();
     }
 
@@ -122,12 +119,12 @@ class Intro extends React.Component {
     }
 
     loginWithFacebook = () => {
-        alert('Facebook login');
+        alert('TODO: Facebook login');
     }
 
     loginWithEmail = () => {
-        if (this.state.email.length < 8) {
-            this.setState({ error: 'Please enter a valid email' });
+        if (this.state.email.length === 0) {
+            this.setState({ error: 'Invalid email' });
             return;
         }
 
@@ -137,12 +134,12 @@ class Intro extends React.Component {
         }
 
         this.setState({ error: '' });
-        alert('Email login');
+        alert('TODO: Email login');
     }
 
     signup = () => {
-        if (this.state.email.length < 8) {
-            this.setState({ error: 'Please enter a valid email' });
+        if (this.state.email.length === 0) {
+            this.setState({ error: 'Invalid email' });
             return;
         }
 
@@ -167,7 +164,7 @@ class Intro extends React.Component {
         }
 
         this.setState({ error: '' });
-        alert('Signup');
+        alert('TODO: Signup');
     }
 
     loginAsGuest = () => {
@@ -177,16 +174,16 @@ class Intro extends React.Component {
         }
 
         this.setState({ error: '' });
-        alert('Guest login');
+        alert('TODO: Guest login');
     }
 
     render() {
         return (
             <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}>
+                    <Input className={classnames(styles['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>
+                        <div className={styles['label']}>Continue with Facebook</div>
                     </Input>
                     <div className={styles['facebook-statement']}>We won't post anything on your behalf</div>
                     <Input
@@ -256,18 +253,18 @@ class Intro extends React.Component {
                             :
                             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}>
+                    <Input className={classnames(styles['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}>
+                            <Input className={classnames(styles['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}>
+                    <Input className={classnames(styles['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>
diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less
index 0a98be41f..054682a06 100644
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@@ -24,7 +24,7 @@
         margin: auto;
         padding: 4em 0;
 
-        .login-form-button {
+        .form-button {
             width: 100%;
             padding: 0 1em;
             display: flex;
@@ -74,6 +74,7 @@
             width: 100%;
             margin-top: 0.5em;
             margin-bottom: 2em;
+            line-height: 1.1em;
             text-align: center;
             color: var(--color-surface);
         }
@@ -102,11 +103,12 @@
 
         .forgot-password-link-container {
             margin: 1em 0;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
             text-align: right;
 
             .forgot-password-link {
-                display: inline-block;
-                max-width: 100%;
                 padding: 0.5em 0.3em;
                 color: var(--color-surfacelight);
                 cursor: pointer;