From 8af0312f699681d90db59af76abf08ca89668aed Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sat, 28 Mar 2020 22:09:31 +0200
Subject: [PATCH] Library not available message styled and fixed for CW route

---
 src/routes/Library/Library.js  | 16 ++++++++++++----
 src/routes/Library/styles.less | 32 ++++++++++++++++++--------------
 2 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index da5c047b5..910892b2b 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -2,7 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const NotFound = require('stremio/routes/NotFound');
-const { Button, Multiselect, MainNavBars, LibItem, useProfile, routesRegexp } = require('stremio/common');
+const { Button, Multiselect, MainNavBars, LibItem, Image, useProfile, routesRegexp } = require('stremio/common');
 const useLibrary = require('./useLibrary');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
@@ -11,11 +11,14 @@ const Library = ({ model, route, urlParams, queryParams }) => {
     const profile = useProfile();
     const library = useLibrary(model, urlParams, queryParams);
     const [typeSelect, sortSelect] = useSelectableInputs(route, library);
+    const available = React.useMemo(() => {
+        return route === 'continuewatching' || profile.auth !== null;
+    }, []);
     return (
         <MainNavBars className={styles['library-container']} route={route}>
             <div className={styles['library-content']}>
                 {
-                    profile.auth !== null && library.type_names.length > 0 ?
+                    available ?
                         <div className={styles['selectable-inputs-container']}>
                             <Multiselect {...typeSelect} className={styles['select-input-container']} />
                             <Multiselect {...sortSelect} className={styles['select-input-container']} />
@@ -24,12 +27,17 @@ const Library = ({ model, route, urlParams, queryParams }) => {
                         null
                 }
                 {
-                    profile.auth === null ?
+                    !available ?
                         <div className={classnames(styles['message-container'], styles['no-user-message-container'])}>
-                            <div className={styles['message-label']}>Library is only available for logged in users</div>
+                            <Image
+                                className={styles['image']}
+                                src={'/images/anonymous.png'}
+                                alt={' '}
+                            />
                             <Button className={styles['login-button-container']} href={'#/intro'}>
                                 <div className={styles['label']}>LOG IN</div>
                             </Button>
+                            <div className={styles['message-label']}>Library is only available for logged in users!</div>
                         </div>
                         :
                         library.type_names.length === 0 ?
diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
index 521c94f4b..50eb330a3 100644
--- a/src/routes/Library/styles.less
+++ b/src/routes/Library/styles.less
@@ -42,25 +42,19 @@
         }
 
         .message-container {
-            flex-grow: 0;
-            flex-shrink: 1;
-            flex-basis: auto;
+            flex: 0 1 auto;
+            align-self: stretch;
             display: flex;
             flex-direction: column;
-            justify-content: flex-start;
             align-items: center;
             padding: 0 1.5rem;
+            overflow-y: auto;
 
             &:first-child {
-                .message-label {
-                    margin: 1.5rem 0;
-                }
+                padding: 4rem;
             }
 
             &.no-user-message-container {
-                flex: 1;
-                justify-content: center;
-
                 .login-button-container {
                     flex: none;
                     display: flex;
@@ -70,6 +64,7 @@
                     width: 20rem;
                     min-height: 4rem;
                     padding: 0.5rem 1rem;
+                    margin-bottom: 1rem;
                     background-color: @color-accent3;
 
                     &:hover {
@@ -83,18 +78,27 @@
                         max-height: 4.8em;
                         font-size: 1.2rem;
                         font-weight: 700;
-                        color: @color-surface-light5;
+                        color: @color-surface-light5-90;
                         text-align: center;
                     }
                 }
             }
 
+            .image {
+                flex: none;
+                width: 12rem;
+                height: 12rem;
+                margin-bottom: 1rem;
+                object-fit: contain;
+                object-position: center;
+                opacity: 0.9;
+            }
+
             .message-label {
                 flex: none;
-                max-height: 4.8em;
-                font-size: 2rem;
-                color: @color-surface-light5;
+                font-size: 2.5rem;
                 text-align: center;
+                color: @color-secondaryvariant2-light1-90;
             }
         }