From 4e34cebc655b36aee14a23a2680a8fb57d7abd5e Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Fri, 27 Mar 2020 10:27:37 +0200
Subject: [PATCH] Errors in discover styled

---
 src/routes/Discover/Discover.js | 25 +++++++++++++++++++++----
 src/routes/Discover/styles.less | 24 +++++++++++++++++++++---
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/routes/Discover/Discover.js b/src/routes/Discover/Discover.js
index 4cea4d124..a9f044c1c 100644
--- a/src/routes/Discover/Discover.js
+++ b/src/routes/Discover/Discover.js
@@ -2,7 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { AddonDetailsModal, Button, MainNavBars, MetaItem, MetaPreview, Multiselect, ModalDialog, PaginationInput, useBinaryState } = require('stremio/common');
+const { AddonDetailsModal, Button, MainNavBars, MetaItem, Image, MetaPreview, Multiselect, ModalDialog, PaginationInput, useBinaryState } = require('stremio/common');
 const { useServices } = require('stremio/services');
 const useDiscover = require('./useDiscover');
 const useSelectableInputs = require('./useSelectableInputs');
@@ -91,17 +91,34 @@ const Discover = ({ urlParams, queryParams }) => {
                     {
                         discover.selectable.types.length === 0 && discover.catalog_resource === null ?
                             <div className={styles['message-container']}>
-                                No catalogs
+                                <Image
+                                    className={styles['image']}
+                                    src={'/images/empty.png'}
+                                    alt={' '}
+                                />
+                                <div className={styles['message-label']}>No catalogs avaliable.</div>
                             </div>
                             :
                             discover.catalog_resource === null ?
                                 <div className={styles['message-container']}>
-                                    No select
+                                    <Image
+                                        className={styles['image']}
+                                        src={'/images/empty.png'}
+                                        alt={' '}
+                                    />
+                                    <div className={styles['message-label']}>No catalog selected</div>
                                 </div>
                                 :
                                 discover.catalog_resource.content.type === 'Err' ?
                                     <div className={styles['message-container']}>
-                                        Catalog Error
+                                        <Image
+                                            className={styles['image']}
+                                            src={'/images/empty.png'}
+                                            alt={' '}
+                                        />
+                                        <div className={styles['message-label']}>
+                                            {`Error(${discover.catalog_resource.content.content.type})${typeof discover.catalog_resource.content.content.content === 'string' ? ` - ${discover.catalog_resource.content.content.content}` : ''}`}
+                                        </div>
                                     </div>
                                     :
                                     discover.catalog_resource.content.type === 'Loading' ?
diff --git a/src/routes/Discover/styles.less b/src/routes/Discover/styles.less
index f764e6c57..bc1778396 100644
--- a/src/routes/Discover/styles.less
+++ b/src/routes/Discover/styles.less
@@ -157,9 +157,27 @@
             }
 
             .message-container {
-                padding: 0 1.5rem;
-                font-size: 2rem;
-                color: @color-surface-light5;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding: 4rem;
+
+                .image {
+                    flex: none;
+                    width: 12rem;
+                    height: 12rem;
+                    margin-bottom: 1rem;
+                    object-fit: contain;
+                    object-position: center;
+                    opacity: 0.9;
+                }
+
+                .message-label {
+                    flex: 0 1 auto;
+                    font-size: 2.5rem;
+                    text-align: center;
+                    color: @color-secondaryvariant2-light1-90;
+                }
             }
         }