From 255cd6be16d48ac77f8a73edf6a941683b8c45a1 Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 25 Jun 2021 15:58:50 +0300
Subject: [PATCH] ServerNotification rendered in Board

---
 src/App/App.js                            |   3 +-
 src/common/ServerNotification/styles.less |   7 +-
 src/routes/Board/Board.js                 | 109 +++++++++++-----------
 src/routes/Board/styles.less              |  33 ++++---
 4 files changed, 79 insertions(+), 73 deletions(-)

diff --git a/src/App/App.js b/src/App/App.js
index 42c55b5f6..08e7acc3b 100644
--- a/src/App/App.js
+++ b/src/App/App.js
@@ -5,7 +5,7 @@ const React = require('react');
 const { Router } = require('stremio-router');
 const { Core, Shell, Chromecast, KeyboardShortcuts, ServicesProvider } = require('stremio/services');
 const { NotFound } = require('stremio/routes');
-const { ToastProvider, ServerNotification, sanitizeLocationPath, CONSTANTS } = require('stremio/common');
+const { ToastProvider, sanitizeLocationPath, CONSTANTS } = require('stremio/common');
 const CoreEventsToaster = require('./CoreEventsToaster');
 const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
@@ -98,7 +98,6 @@ const App = () => {
                         :
                         <div className={styles['app-loader']} />
                 }
-                <ServerNotification />
             </ServicesProvider>
         </React.StrictMode>
     );
diff --git a/src/common/ServerNotification/styles.less b/src/common/ServerNotification/styles.less
index 835fc524e..5188fa246 100644
--- a/src/common/ServerNotification/styles.less
+++ b/src/common/ServerNotification/styles.less
@@ -3,11 +3,8 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
 .notification-container {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
+    flex: none;
+    align-self: stretch;
     display: flex;
     flex-direction: row;
     padding: 0.5rem 1rem;
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 1afd7d104..2dbed505f 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -2,7 +2,7 @@
 
 const React = require('react');
 const classnames = require('classnames');
-const { MainNavBars, MetaRow, LibItem, MetaItem } = require('stremio/common');
+const { MainNavBars, MetaRow, LibItem, MetaItem, ServerNotification } = require('stremio/common');
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
@@ -11,59 +11,62 @@ const Board = () => {
     const board = useBoard();
     const continueWatchingPreview = useContinueWatchingPreview();
     return (
-        <MainNavBars className={styles['board-container']} route={'board'}>
-            <div className={styles['board-content']}>
-                {
-                    continueWatchingPreview.libraryItems.length > 0 ?
-                        <MetaRow
-                            className={classnames(styles['board-row'], styles['continue-watching-row'])}
-                            title={'Continue Watching'}
-                            items={continueWatchingPreview.libraryItems}
-                            itemComponent={LibItem}
-                            deepLinks={continueWatchingPreview.deepLinks}
-                        />
-                        :
-                        null
-                }
-                {board.catalogs.map((catalog, index) => {
-                    switch (catalog.content.type) {
-                        case 'Ready': {
-                            return (
-                                <MetaRow
-                                    key={index}
-                                    className={classnames(styles['board-row'], styles[`board-row-${catalog.content.content[0].posterShape}`])}
-                                    title={catalog.title}
-                                    items={catalog.content.content}
-                                    itemComponent={MetaItem}
-                                    deepLinks={catalog.deepLinks}
-                                />
-                            );
-                        }
-                        case 'Err': {
-                            return (
-                                <MetaRow
-                                    key={index}
-                                    className={styles['board-row']}
-                                    title={catalog.title}
-                                    message={catalog.content.content}
-                                    deepLinks={catalog.deepLinks}
-                                />
-                            );
-                        }
-                        case 'Loading': {
-                            return (
-                                <MetaRow.Placeholder
-                                    key={index}
-                                    className={classnames(styles['board-row'], styles['board-row-poster'])}
-                                    title={catalog.title}
-                                    deepLinks={catalog.deepLinks}
-                                />
-                            );
-                        }
+        <div className={styles['board-content-container']}>
+            <MainNavBars className={styles['board-container']} route={'board'}>
+                <div className={styles['board-content']}>
+                    {
+                        continueWatchingPreview.libraryItems.length > 0 ?
+                            <MetaRow
+                                className={classnames(styles['board-row'], styles['continue-watching-row'])}
+                                title={'Continue Watching'}
+                                items={continueWatchingPreview.libraryItems}
+                                itemComponent={LibItem}
+                                deepLinks={continueWatchingPreview.deepLinks}
+                            />
+                            :
+                            null
                     }
-                })}
-            </div>
-        </MainNavBars>
+                    {board.catalogs.map((catalog, index) => {
+                        switch (catalog.content.type) {
+                            case 'Ready': {
+                                return (
+                                    <MetaRow
+                                        key={index}
+                                        className={classnames(styles['board-row'], styles[`board-row-${catalog.content.content[0].posterShape}`])}
+                                        title={catalog.title}
+                                        items={catalog.content.content}
+                                        itemComponent={MetaItem}
+                                        deepLinks={catalog.deepLinks}
+                                    />
+                                );
+                            }
+                            case 'Err': {
+                                return (
+                                    <MetaRow
+                                        key={index}
+                                        className={styles['board-row']}
+                                        title={catalog.title}
+                                        message={catalog.content.content}
+                                        deepLinks={catalog.deepLinks}
+                                    />
+                                );
+                            }
+                            case 'Loading': {
+                                return (
+                                    <MetaRow.Placeholder
+                                        key={index}
+                                        className={classnames(styles['board-row'], styles['board-row-poster'])}
+                                        title={catalog.title}
+                                        deepLinks={catalog.deepLinks}
+                                    />
+                                );
+                            }
+                        }
+                    })}
+                </div>
+            </MainNavBars>
+            <ServerNotification />
+        </div>
     );
 };
 
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 1be9bd048..e62523c48 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -11,25 +11,32 @@
     meta-item-placeholder: meta-item;
 }
 
-.board-container {
+.board-content-container {
     width: 100%;
     height: 100%;
-    background-color: @color-background-dark2;
+    display: flex;
+    flex-direction: column;
 
-    .board-content {
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
+    .board-container {
+        flex: 1;
+        align-self: stretch;
+        background-color: @color-background-dark2;
 
-        .board-row {
-            margin: 4rem 2rem;
+        .board-content {
+            width: 100%;
+            height: 100%;
+            overflow-y: auto;
 
-            &:first-child {
-                margin-top: 2rem;
-            }
+            .board-row {
+                margin: 4rem 2rem;
 
-            &:last-child {
-                margin-bottom: 2rem;
+                &:first-child {
+                    margin-top: 2rem;
+                }
+
+                &:last-child {
+                    margin-bottom: 2rem;
+                }
             }
         }
     }