Merge pull request #138 from Stremio/intro-design

Intro design
2026-04-18 08:42:48 +00:00 · 2020-02-27 12:09:23 +02:00 · 2020-02-27 12:09:23 +02:00 · 0e85128b8b
commit 0e85128b8b
parent 5fd35bb7c3 4d20b545f1
8 changed files with 151 additions and 69 deletions
--- a/package.json
+++ b/package.json
@ -27,7 +27,7 @@
        "react-dom": "16.12.0",
        "react-focus-lock": "2.2.1",
        "spatial-navigation-polyfill": "git+ssh://git@github.com/Stremio/spatial-navigation.git#381b4f37d138e66ae8ea025e240af3704245e5dc",
-        "stremio-colors": "git+ssh://git@github.com/Stremio/stremio-colors.git#v2.0.4",
+        "stremio-colors": "git+ssh://git@github.com/Stremio/stremio-colors.git#v3.0.0",
        "stremio-core-web": "git+ssh://git@github.com/stremio/stremio-core-web.git#da5b37865004d0ae140518c4f276d1ed1a1483d9",
        "stremio-icons": "git+ssh://git@github.com/Stremio/stremio-icons.git#v1.0.11",
        "vtt.js": "0.13.0"
--- a/src/App/styles.less
+++ b/src/App/styles.less
@ -1,6 +1,6 @@
-@import (inline, once, css) '~stremio-colors/css/stremio-colors.css';
@import (inline, once, css) '~stremio/common/roboto.css';
@import (reference) '~stremio/common/screen-sizes.less';
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';

 :global {
    @import (once, less) '~stremio-router/styles.css';
@ -11,7 +11,7 @@
    --poster-shape-ratio: 1.464;
    --scroll-bar-width: 6px;
    --nav-bar-size: 3.2rem;
-    --focus-outline-size: 2px;
+    --focus-outline-size: 4px;
    --color-facebook: #4267b2;
    --color-twitter: #1DA1F2;
    --color-placeholder: #60606080;
--- a/src/common/Checkbox/styles.less
+++ b/src/common/Checkbox/styles.less
@ -1,7 +1,10 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .checkbox-container {
    &:global(.checked) {
        .icon {
-            background-color: var(--color-primary);
+            fill: @color-surface-light5;
+            background-color: @color-primaryvariant1;
        }
    }

@ -9,6 +12,6 @@
        display: block;
        width: 1rem;
        height: 1rem;
-        fill: var(--color-surfacelighter);
+        fill: @color-surface-light5;
    }
 }
--- a/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
+++ b/src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
@ -24,11 +24,11 @@ const ConsentCheckbox = React.forwardRef(({ className, checked, label, link, hre
    return (
        <Checkbox {...props} ref={ref} className={classnames(className, styles['consent-checkbox-container'])} checked={checked} onClick={checkboxOnClick}>
            <div className={styles['label']}>
-                {label}
+                {label}{' '}
                {
                    typeof link === 'string' && typeof href === 'string' ?
                        <Button className={styles['link']} href={href} target={'_blank'} tabIndex={-1} onClick={linkOnClick}>
-                            {' '}{link}
+                            {link}
                        </Button>
                        :
                        null
--- a/src/routes/Intro/ConsentCheckbox/styles.less
+++ b/src/routes/Intro/ConsentCheckbox/styles.less
@ -1,3 +1,5 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 :import('~stremio/common/Checkbox/styles.less') {
    checkbox-icon: icon;
 }
@ -8,36 +10,27 @@
    align-items: center;
    padding: 0.5rem;

-    &:focus, &:hover {
-        background-color: var(--color-surfacedarker60);
-
-        .checkbox-icon {
-            fill: var(--color-surfacelighter);
-        }
-
-        .label {
-            color: var(--color-surfacelighter);
-
-            .link {
-                color: var(--color-surfacelighter);
-            }
-        }
+    &:focus {
+        outline: none;
+        background-color: @color-surface-light5-20;
    }

    .checkbox-icon {
        flex: none;
        width: 1.2rem;
        height: 1.2rem;
-        fill: var(--color-surfacelight);
+        fill: @color-surface-dark5;
    }

    .label {
        flex: 1;
        margin-left: 0.5rem;
-        color: var(--color-surface);
+        font-size: 0.9rem;
+        color: @color-surface;

        .link {
-            color: var(--color-surfacelight);
+            font-size: 0.9rem;
+            color: @color-surface-light5;

            &:hover {
                text-decoration: underline;
--- a/src/routes/Intro/Intro.js
+++ b/src/routes/Intro/Intro.js
@ -3,7 +3,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { Modal, useRouteFocused } = require('stremio-router');
-const { Button, useBinaryState, useCoreEvent } = require('stremio/common');
+const { Button, Image, useBinaryState, useCoreEvent } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const CredentialsTextInput = require('./CredentialsTextInput');
 const ConsentCheckbox = require('./ConsentCheckbox');
@ -268,10 +268,25 @@ const Intro = ({ queryParams }) => {
    return (
        <div className={styles['intro-container']}>
            <div className={styles['form-container']}>
+                <div className={styles['logo-container']}>
+                    <Image className={styles['logo']} src={'/images/stremio_symbol.png'} />
+                    <Icon className={styles['icon']} icon={'ic_stremio'} />
+                </div>
                <Button className={classnames(styles['form-button'], styles['facebook-button'])} onClick={loginWithFacebook}>
                    <Icon className={styles['icon']} icon={'ic_facebook'} />
                    <div className={styles['label']}>Continue with Facebook</div>
                </Button>
+                {
+                    state.form === SIGNUP_FORM ?
+                        <Button className={classnames(styles['form-button'], styles['switch-form-button'], styles['switch-form-login-button'])} onClick={switchFormOnClick}>
+                            <div className={styles['label-container']}>
+                                <div className={styles['account-label']}>Already have an account?</div>
+                                <div className={styles['label']}>LOG IN</div>
+                            </div>
+                        </Button>
+                        :
+                        null
+                }
                <CredentialsTextInput
                    ref={emailRef}
                    className={styles['credentials-text-input']}
@ -340,7 +355,7 @@ const Intro = ({ queryParams }) => {
                        null
                }
                <Button className={classnames(styles['form-button'], styles['submit-button'])} onClick={state.form === SIGNUP_FORM ? signup : loginWithEmail}>
-                    <div className={styles['label']}>{state.form === SIGNUP_FORM ? 'SING UP' : 'LOG IN'}</div>
+                    <div className={styles['label']}>{state.form === SIGNUP_FORM ? 'Sign up' : 'Log in'}</div>
                </Button>
                {
                    state.form === SIGNUP_FORM ?
@ -350,9 +365,14 @@ const Intro = ({ queryParams }) => {
                        :
                        null
                }
-                <Button className={classnames(styles['form-button'], styles['switch-form-button'])} onClick={switchFormOnClick}>
-                    <div className={styles['label']}>{state.form === SIGNUP_FORM ? 'LOG IN' : 'SING UP WITH EMAIL'}</div>
-                </Button>
+                {
+                    state.form === LOGIN_FORM ?
+                        <Button className={classnames(styles['form-button'], styles['switch-form-button'])} onClick={switchFormOnClick}>
+                            <div className={styles['label']}>SIGN UP WITH EMAIL</div>
+                        </Button>
+                        :
+                        null
+                }
            </div>
            {
                passwordRestModalOpen ?
--- a/src/routes/Intro/styles.less
+++ b/src/routes/Intro/styles.less
@ -1,12 +1,12 @@
+@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
+
 .intro-container {
    display: flex;
    flex-direction: row;
-    justify-content: center;
-    align-items: center;
    width: 100%;
    height: 100%;
    background:
-        linear-gradient(var(--color-backgrounddark80), var(--color-backgrounddark80)),
+        linear-gradient(@color-background-dark3-80, @color-background-dark3-80),
        url('/images/intro_background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
@ -16,8 +16,31 @@

    .form-container {
        flex: none;
-        width: 20rem;
-        padding: 4rem 0;
+        width: 27rem;
+        margin: auto;
+        padding: 2rem 0;
+
+        .logo-container {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 3rem;
+
+            .logo {
+                flex: none;
+                width: 4rem;
+                height: 4rem;
+                margin-right: 1rem;
+            }
+
+            .icon {
+                flex: none;
+                width: 8rem;
+                height: 4rem;
+                fill: @color-surface-dark4;
+            }
+        }

        .form-button {
            display: flex;
@ -31,7 +54,7 @@
                width: 1rem;
                height: 2rem;
                margin-right: 1rem;
-                fill: var(--color-surfacelighter);
+                fill: @color-surface-light5;
            }

            .label {
@ -39,19 +62,24 @@
                flex-shrink: 1;
                flex-basis: auto;
                font-size: 1.1rem;
-                font-weight: 700;
-                color: var(--color-surfacelighter);
+                font-weight: 500;
+                color: @color-surface-light5;
                text-align: center;
            }
        }

        .facebook-button {
            min-height: 4.5rem;
-            margin-bottom: 2rem;
-            background: var(--color-facebook);
+            margin-top: 2rem;
+            margin-bottom: 0.5rem;
+            background: @color-secondaryvariant1-dark5;

-            &:hover, &:focus {
-                filter: brightness(1.2);
+            &:hover {
+                background: @color-secondary-dark4;
+            }
+
+            &:focus {
+                outline-color: @color-surface-light5;
            }

            .label {
@ -63,21 +91,24 @@
            display: block;
            width: 100%;
            margin: 1rem 0;
-            padding: 0.5rem;
-            border-bottom: thin solid var(--color-surface);
-            color: var(--color-surfacelighter);
+            padding: 1rem;
+            border-bottom: thin solid @color-surface;
+            color: @color-surface-light5;

-            &:hover, &:focus {
-                background-color: var(--color-surfacedarker60);
-                border-bottom-color: var(--color-surfacelighter);
+            &:hover {
+                background-color: @color-surface-light5-20;
+            }
+
+            &:focus {
+                border-bottom-color: @color-secondaryvariant2-light1;

                &::placeholder {
-                    color: var(--color-surfacelighter);
+                    color: @color-secondaryvariant2-light1;
                }
            }

            &::placeholder {
-                color: var(--color-surfacelight);
+                color: @color-surface-dark2;
            }
        }

@ -93,36 +124,37 @@
                flex-shrink: 1;
                flex-basis: auto;
                padding: 0.5rem;
-                color: var(--color-surfacelight);
+                color: @color-surface-light3;

-                &:hover {
+                &:hover, &:focus {
                    text-decoration: underline;
-                    color: var(--color-surfacelighter);
+                    color: @color-secondaryvariant2-light1;
                }

                &:focus {
-                    color: var(--color-surfacelighter);
+                    outline: none;
+                    background-color: @color-surface-light5-20;
                }
            }
        }

-        .consent-checkbox {
-            margin: 1rem 0;
-        }
-
        .error-message {
            margin: 1rem 0;
            text-align: center;
-            color: var(--color-signal1);
+            color: @color-accent5;
        }

        .submit-button {
            min-height: 4rem;
            margin: 1rem 0;
-            background-color: var(--color-primarydark);
+            background-color: @color-accent3;

            &:hover {
-                background-color: var(--color-primary);
+                background-color: @color-accent3-dark1;
+            }
+
+            &:focus {
+                outline-color: @color-surface-light5;
            }

            .label {
@ -131,12 +163,18 @@
        }

        .guest-login-button {
-            margin-top: 1.5rem;
-            margin-bottom: 0.5rem;
+            margin-top: 1rem;
            padding: 1rem 0.5rem;

-            &:hover, &:focus {
-                background-color: var(--color-surfacedarker60);
+            &:hover {
+                .label {
+                    text-decoration: underline;
+                }
+            }
+
+            &:focus {
+                outline: none;
+                background-color: @color-surface-light5-20;
            }
        }

@ -145,8 +183,36 @@
            padding: 1rem 0.5rem;

            &:hover, &:focus {
-                background-color: var(--color-surfacedarker60);
+                .label-container {
+                    .label {
+                        text-decoration: underline;
+                    }
+                }
            }
+
+            &:focus {
+                outline: none;
+                background-color: @color-surface-light5-20;
+            }
+
+            .label-container {
+                display: flex;
+                flex-direction: row;
+                align-items: baseline;
+
+                .account-label {
+                    margin-right: 0.5rem;
+                    color: @color-surface-dark2;
+                }
+
+                .label {
+                    color: @color-accent4-light1;
+                }
+            }
+        }
+
+        .switch-form-login-button {
+            margin-bottom: 0.5rem;
        }
    }
 }
@ -161,7 +227,7 @@
    .label {
        margin-bottom: 1rem;
        font-size: 2rem;
-        color: var(--color-surfacelighter);
+        color: @color-surface-light5;
        animation: 1s linear infinite alternate flash;
    }

@ -169,7 +235,7 @@
        flex: none;
        width: 5rem;
        height: 5rem;
-        fill: var(--color-surfacelighter);
+        fill: @color-surface-light5;
        animation: 1s linear infinite alternate flash;
    }

--- a/yarn.lock
+++ b/yarn.lock
@ -10442,9 +10442,9 @@ stream-shift@^1.0.0:
  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
  integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==

-"stremio-colors@git+ssh://git@github.com/Stremio/stremio-colors.git#v2.0.4":
+"stremio-colors@git+ssh://git@github.com/Stremio/stremio-colors.git#v3.0.0":
  version "2.0.4"
-  resolved "git+ssh://git@github.com/Stremio/stremio-colors.git#6a3fb5b311adb150920a8c59344b29d5de89b489"
+  resolved "git+ssh://git@github.com/Stremio/stremio-colors.git#0fd22b41b4246dd92182727b49ef9e4a67413202"

 "stremio-core-web@git+ssh://git@github.com/stremio/stremio-core-web.git#da5b37865004d0ae140518c4f276d1ed1a1483d9":
  version "0.6.0"