From ce168f08cb322d396cb2282c8386f178dfcfca6b Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Fri, 25 Jun 2021 17:13:03 +0300
Subject: [PATCH] className prop added to ServerNotification

---
 src/common/ServerNotification/ServerNotification.js | 10 ++++++++--
 src/common/ServerNotification/styles.less           |  2 --
 src/routes/Board/Board.js                           |  2 +-
 src/routes/Board/styles.less                        |  5 +++++
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/common/ServerNotification/ServerNotification.js b/src/common/ServerNotification/ServerNotification.js
index a1e9ec930..3f21e4b38 100644
--- a/src/common/ServerNotification/ServerNotification.js
+++ b/src/common/ServerNotification/ServerNotification.js
@@ -1,12 +1,14 @@
 // Copyright (C) 2017-2020 Smart code 203358507
 
 const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
 const Button = require('stremio/common/Button');
 const styles = require('./styles');
 
-const ServerNotification = () => {
+const ServerNotification = ({ className }) => {
     return (
-        <div className={styles['notification-container']}>
+        <div className={classnames(className, styles['notification-container'])}>
             <div className={styles['notification-statement']}>Streaming server must be available.</div>
             <Button className={styles['notification-button']} title={'later'}>
                 <span className={styles['notification-label']}>Later</span>
@@ -18,4 +20,8 @@ const ServerNotification = () => {
     );
 };
 
+ServerNotification.propTypes = {
+    className: PropTypes.string
+};
+
 module.exports = ServerNotification;
diff --git a/src/common/ServerNotification/styles.less b/src/common/ServerNotification/styles.less
index 5188fa246..a3c61b57a 100644
--- a/src/common/ServerNotification/styles.less
+++ b/src/common/ServerNotification/styles.less
@@ -3,8 +3,6 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
 .notification-container {
-    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 6441d422f..8c8e7bc29 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -65,7 +65,7 @@ const Board = () => {
                     })}
                 </div>
             </MainNavBars>
-            <ServerNotification />
+            <ServerNotification className={styles['board-notification-container']} />
         </div>
     );
 };
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 6f8949c26..37fbddff6 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -40,6 +40,11 @@
             }
         }
     }
+
+    .board-notification-container {
+        flex: none;
+        align-self: stretch;
+    }
 }
 
 @media only screen and (max-width: @large) {