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 (
-
-
-
-
+ {
+ user ?
+
+
+
+
+ :
+ null
+ }
{
!user ?
-
+
Please log into this app
- {
- window.location.replace('#/intro')
- }
+
:
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;
+ }
+ }
+ }
}
}
}