feature: seasonal notfication - no logic

src/common/SeasonalNotification/SeasonalNotification.js

@@ -0,0 +1,34 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const styles = require('./styles');
+const { default: Icon } = require('@stremio/stremio-icons/react');
+const PropTypes = require('prop-types');
+const Button = require('../Button');
+
+const SeasonalNotification = ({ imgUrl, altUrl }) => {
+
+    return (
+        <div className={styles['wrapper']}>
+            <img className={styles['notification-image']} src={imgUrl} alt={altUrl} />
+            <Icon className={styles['back-button']} name={'close'} />
+            <div className={styles['info-container']}>
+                <div className={styles['title-container']}>
+                    <div className={styles['title']}>Ho! Ho! Ho! Are you ready for a Silent Cinema Night?</div>
+                    <div className={styles['label']}>Get into the festive spirit with our Christmas movie collection – where holiday magic meets the screen!</div>
+                </div>
+                <Button className={styles['action-button']}>
+                    <div className={styles['label']}>Learn more</div>
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+module.exports = SeasonalNotification;
+
+SeasonalNotification.propTypes = {
+    imgUrl: PropTypes.string.isRequired,
+    altUrl: PropTypes.string.isRequired,
+};
+

src/common/SeasonalNotification/styles.less

@@ -0,0 +1,99 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+.wrapper {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    padding: 2rem 1rem;
+    z-index: 99;
+    transform: translate(-50%, -50%);
+    background-color: var(--modal-background-color);
+    border-radius: var(--border-radius);
+    width: 40rem;
+    height: 40rem;
+    box-shadow: var(--outer-glow);
+    overflow: visible;
+
+    .notification-image {
+        width: 95%;
+        height: 95%;
+        margin: -10rem auto 0;
+    }
+
+    .back-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 1rem;
+        width: 2rem;
+        height: 2rem;
+        cursor: pointer;
+        opacity: 0.5;
+        color: var(--primary-foreground-color);
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    .info-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 1rem 4rem;
+        margin-top: -7rem;
+
+        .title-container {
+            .title {
+                color: var(--primary-foreground-color);
+                font-size: 1.325rem;
+                text-align: center;
+                margin-bottom: 2rem;
+                padding: 0 4rem;
+            }
+
+            .label {
+                color: var(--primary-foreground-color);
+                font-size: 1rem;
+                text-align: center;
+                opacity: 0.5;
+                margin-bottom: 3rem;
+            }
+        }
+
+
+        .action-button {
+            background-color: var(--secondary-accent-color);
+            border: 2px solid var(--secondary-accent-color);
+            padding: 0.8rem 1.5rem;
+            border-radius: 2rem;
+
+            .label {
+                color: var(--primary-foreground-color);
+                font-size: 1rem;
+            }
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+    }
+
+    @media only screen and (max-width: @xsmall) {
+        width: 35rem;
+        height: 35rem;
+    }
+    @media only screen and (max-width: @xxsmall) {
+        width: 25rem;
+        height: 35rem;
+
+        .notification-image {
+            width: 25rem;
+            height: 25rem;
+            object-fit: cover;
+        }
+    }
+}

src/routes/Board/Board.js

@@ -8,6 +8,7 @@ const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWar
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
+const SeasonalNotification = require('stremio/common/SeasonalNotification/SeasonalNotification');
 
 const THRESHOLD = 5;
 
@@ -38,6 +39,7 @@ const Board = () => {
     }, [board.catalogs, onVisibleRangeChange]);
     return (
         <div className={styles['board-container']}>
+            <SeasonalNotification imgUrl='https://i.postimg.cc/k5KFNyYH/Group-2395-2x.png' alt='Christmas' />
             <MainNavBars className={styles['board-content-container']} route={'board'}>
                 <div ref={scrollContainerRef} className={styles['board-content']} onScroll={onScroll}>
                     {