From fb0ec7583a019c957b0cc5b5a4bbdf583ffbbb7f Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Tue, 19 Nov 2019 17:41:20 +0200
Subject: [PATCH] login button for redirect when no user

---
 src/routes/Library/Library.js  | 27 +++++++++++++++--------
 src/routes/Library/styles.less | 39 ++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index 69b2f744b..1b10dc87b 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -1,5 +1,6 @@
 const React = require('react');
-const { Multiselect, MainNavBar, MetaItem } = require('stremio/common');
+const classnames = require('classnames');
+const { Button, Multiselect, MainNavBar, MetaItem } = require('stremio/common');
 const useUser = require('stremio/common/useUser');
 const useLibrary = require('./useLibrary');
 const useSort = require('./useSort');
@@ -9,22 +10,30 @@ const Library = ({ urlParams, queryParams }) => {
     const user = useUser();
     const [metaItems, selectTypeInput, error] = useLibrary(urlParams);
     const [selectSortInput, sortFunction] = useSort(urlParams, queryParams);
+    const loginButtonOnClick = React.useCallback(() => {
+        window.location.replace('#/intro');
+    }, []);
     return (
         <div className={styles['library-container']}>
             <MainNavBar className={styles['nav-bar']} />
             <div className={styles['library-content']}>
-                <div className={styles['controls-container']}>
-                    <Multiselect {...selectTypeInput} className={styles['select-input-container']} />
-                    <Multiselect {...selectSortInput} className={styles['select-input-container']} />
-                </div>
+                {
+                    user ?
+                        <div className={styles['controls-container']}>
+                            <Multiselect {...selectTypeInput} className={styles['select-input-container']} />
+                            <Multiselect {...selectSortInput} className={styles['select-input-container']} />
+                        </div>
+                        :
+                        null
+                }
                 <div className={styles['type-content-container']}>
                     {
                         !user ?
-                            <div className={styles['message-container']}>
+                            <div className={classnames(styles['message-container'], styles['anonymous-user-message-container'])}>
                                 Please log into this app
-                                {
-                                    window.location.replace('#/intro')
-                                }
+                                <Button className={styles['login-button']} onClick={loginButtonOnClick}>
+                                    <div className={styles['label']}>LOG IN</div>
+                                </Button>
                             </div>
                             :
                             error !== null ?
diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
index 42f281429..a09fb601e 100644
--- a/src/routes/Library/styles.less
+++ b/src/routes/Library/styles.less
@@ -59,6 +59,45 @@
                 font-size: 2rem;
                 color: var(--color-surfacelighter);
             }
+
+            .anonymous-user-message-container {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                width: 100%;
+                height: 100%;
+
+                .login-button {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    width: 20rem;
+                    min-height: 4rem;
+                    margin-top: 2rem;
+                    padding: 0.5rem 1rem;
+                    background-color: var(--color-primarydark);
+
+                    .label {
+                        flex-grow: 0;
+                        flex-shrink: 1;
+                        flex-basis: auto;
+                        font-size: 1.1rem;
+                        font-weight: 700;
+                        color: var(--color-surfacelighter);
+                        text-align: center;
+                    }
+
+                    &:hover {
+                        background-color: var(--color-primary);
+                    }
+
+                    .label {
+                        font-size: 1.2rem;
+                    }
+                }
+            }
         }
     }
 }