From 156a129cc437fc8c22011c1a9ed7529326bfd4da Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:41:51 +0100
Subject: [PATCH 01/11] feature: seasonal notfication - no logic

---
 .../SeasonalNotification.js                   | 34 +++++++
 src/common/SeasonalNotification/styles.less   | 99 +++++++++++++++++++
 src/routes/Board/Board.js                     |  2 +
 3 files changed, 135 insertions(+)
 create mode 100644 src/common/SeasonalNotification/SeasonalNotification.js
 create mode 100644 src/common/SeasonalNotification/styles.less

diff --git a/src/common/SeasonalNotification/SeasonalNotification.js b/src/common/SeasonalNotification/SeasonalNotification.js
new file mode 100644
index 000000000..7adf96fbb
--- /dev/null
+++ b/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,
+};
+
diff --git a/src/common/SeasonalNotification/styles.less b/src/common/SeasonalNotification/styles.less
new file mode 100644
index 000000000..f1729837a
--- /dev/null
+++ b/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;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 6e92beea5..06859126b 100644
--- a/src/routes/Board/Board.js
+++ b/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}>
                     {

From 179ed3948f544f0b250feb44b5b4e94c40f75af4 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 14 Dec 2023 12:17:51 +0100
Subject: [PATCH 02/11] feature: useFetchNotficationData hook + new approach

---
 .../SeasonalNotification.js                   | 34 -------
 src/common/SeasonalNotification/styles.less   | 99 -------------------
 src/routes/Board/Board.js                     | 39 +++++++-
 src/routes/Board/styles.less                  | 52 ++++++++++
 src/routes/Board/useFetchModalData.js         | 41 ++++++++
 5 files changed, 129 insertions(+), 136 deletions(-)
 delete mode 100644 src/common/SeasonalNotification/SeasonalNotification.js
 delete mode 100644 src/common/SeasonalNotification/styles.less
 create mode 100644 src/routes/Board/useFetchModalData.js

diff --git a/src/common/SeasonalNotification/SeasonalNotification.js b/src/common/SeasonalNotification/SeasonalNotification.js
deleted file mode 100644
index 7adf96fbb..000000000
--- a/src/common/SeasonalNotification/SeasonalNotification.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// 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,
-};
-
diff --git a/src/common/SeasonalNotification/styles.less b/src/common/SeasonalNotification/styles.less
deleted file mode 100644
index f1729837a..000000000
--- a/src/common/SeasonalNotification/styles.less
+++ /dev/null
@@ -1,99 +0,0 @@
-// 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;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 06859126b..b9f6df20e 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -4,11 +4,11 @@ const React = require('react');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useTranslation } = require('react-i18next');
-const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
+const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange, ModalDialog, Button, useBinaryState } = require('stremio/common');
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
-const SeasonalNotification = require('stremio/common/SeasonalNotification/SeasonalNotification');
+const useFetchModalData = require('./useFetchModalData');
 
 const THRESHOLD = 5;
 
@@ -19,6 +19,8 @@ const Board = () => {
     const [board, loadBoardRows] = useBoard();
     const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0;
     const scrollContainerRef = React.useRef();
+    const { notificationModalData, isModalDataLoading } = useFetchModalData();
+    const [isNotificationModalOpen, , closeNotificationModal, ] = useBinaryState(true);
     const onVisibleRangeChange = React.useCallback(() => {
         const range = getVisibleChildrenRange(scrollContainerRef.current);
         if (range === null) {
@@ -39,7 +41,38 @@ const Board = () => {
     }, [board.catalogs, onVisibleRangeChange]);
     return (
         <div className={styles['board-container']}>
-            <SeasonalNotification imgUrl='https://i.postimg.cc/k5KFNyYH/Group-2395-2x.png' alt='Christmas' />
+            {
+                isNotificationModalOpen && notificationModalData && !isModalDataLoading ?
+                    <ModalDialog className={styles['notification-modal']} title={'Notification Modal'} onCloseRequest={closeNotificationModal}>
+                        {
+                            notificationModalData.imageUrl ?
+                                <img className={styles['notification-image']} style={{ width: '95%', height: '95%' }} src={notificationModalData.imageUrl} />
+                                :
+                                null
+                        }
+                        <div className={styles['info-container']}>
+                            <div className={styles['title-container']}>
+                                {
+                                    notificationModalData.title ?
+                                        <div className={styles['title']}>{notificationModalData.title}</div>
+                                        :
+                                        null
+                                }
+                                {
+                                    notificationModalData.message ?
+                                        <div className={styles['notification-label']}>{notificationModalData.message}</div>
+                                        :
+                                        null
+                                }
+                            </div>
+                            <Button className={styles['action-button']}>
+                                <div className={styles['label']}>Learn more</div>
+                            </Button>
+                        </div>
+                    </ModalDialog>
+                    :
+                    null
+            }
             <MainNavBars className={styles['board-content-container']} route={'board'}>
                 <div ref={scrollContainerRef} className={styles['board-content']} onScroll={onScroll}>
                     {
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index b949d8689..11f575a9b 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -17,6 +17,58 @@
     display: flex;
     flex-direction: column;
 
+    .notification-modal {
+        .notification-image {
+            width: 95%;
+            height: 95%;
+            margin: -10rem auto 0;
+        }
+    
+        .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;
+                }
+            }
+        }
+    }
+
     .board-content-container {
         flex: 1;
         align-self: stretch;
diff --git a/src/routes/Board/useFetchModalData.js b/src/routes/Board/useFetchModalData.js
new file mode 100644
index 000000000..b6f711fa1
--- /dev/null
+++ b/src/routes/Board/useFetchModalData.js
@@ -0,0 +1,41 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+
+const useFetchModalData = () => {
+    const [notificationModalData, setNotificationModalData] = React.useState(null);
+    const [isLoading, setIsLoading] = React.useState(false);
+
+    React.useEffect(() => {
+        const fetchData = async () => {
+            setIsLoading(true);
+            try {
+                const response = await fetch('https://api.strem.io/api/getModal', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ date: new Date() })
+                });
+
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+
+                const jsonData = await response.json();
+                const data = jsonData.result;
+                setNotificationModalData(data);
+            } catch (err) {
+                throw new Error(err.message);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        fetchData();
+    }, []);
+
+    return { notificationModalData, isLoading };
+};
+
+module.exports = useFetchModalData;

From cd8be46584c5185969b9e88be0e27f7503ea1b2e Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 14 Dec 2023 12:33:10 +0100
Subject: [PATCH 03/11] refactor: naming changes + conditional rendering for
 the button

---
 src/routes/Board/Board.js                       | 17 +++++++++++------
 ...ModalData.js => useFetchNotificationData.js} |  4 ++--
 2 files changed, 13 insertions(+), 8 deletions(-)
 rename src/routes/Board/{useFetchModalData.js => useFetchNotificationData.js} (93%)

diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index b9f6df20e..d8c152181 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -8,7 +8,7 @@ const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWar
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
-const useFetchModalData = require('./useFetchModalData');
+const useFetchNotificationData = require('./useFetchNotificationData');
 
 const THRESHOLD = 5;
 
@@ -19,8 +19,8 @@ const Board = () => {
     const [board, loadBoardRows] = useBoard();
     const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0;
     const scrollContainerRef = React.useRef();
-    const { notificationModalData, isModalDataLoading } = useFetchModalData();
-    const [isNotificationModalOpen, , closeNotificationModal, ] = useBinaryState(true);
+    const { notificationModalData, isModalDataLoading } = useFetchNotificationData();
+    const [isNotificationModalOpen, , closeNotificationModal] = useBinaryState(true);
     const onVisibleRangeChange = React.useCallback(() => {
         const range = getVisibleChildrenRange(scrollContainerRef.current);
         if (range === null) {
@@ -65,9 +65,14 @@ const Board = () => {
                                         null
                                 }
                             </div>
-                            <Button className={styles['action-button']}>
-                                <div className={styles['label']}>Learn more</div>
-                            </Button>
+                            {
+                                notificationModalData.addon.manifestUrl ?
+                                    <Button className={styles['action-button']} href={notificationModalData.addon.manifestUrl}>
+                                        <div className={styles['label']}>Learn more</div>
+                                    </Button>
+                                    :
+                                    null
+                            }
                         </div>
                     </ModalDialog>
                     :
diff --git a/src/routes/Board/useFetchModalData.js b/src/routes/Board/useFetchNotificationData.js
similarity index 93%
rename from src/routes/Board/useFetchModalData.js
rename to src/routes/Board/useFetchNotificationData.js
index b6f711fa1..022243a94 100644
--- a/src/routes/Board/useFetchModalData.js
+++ b/src/routes/Board/useFetchNotificationData.js
@@ -2,7 +2,7 @@
 
 const React = require('react');
 
-const useFetchModalData = () => {
+const useFetchNotificationData = () => {
     const [notificationModalData, setNotificationModalData] = React.useState(null);
     const [isLoading, setIsLoading] = React.useState(false);
 
@@ -38,4 +38,4 @@ const useFetchModalData = () => {
     return { notificationModalData, isLoading };
 };
 
-module.exports = useFetchModalData;
+module.exports = useFetchNotificationData;

From 9594efbb0ed1059beecb6afdb9ba6b6064b8e64d Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 14 Dec 2023 15:06:06 +0100
Subject: [PATCH 04/11] refactor: created a separate component

---
 .../SeasonalNotification.js                   | 52 ++++++++++
 src/common/SeasonalNotification/styles.less   | 96 +++++++++++++++++++
 .../useFetchNotificationData.js               |  0
 src/routes/Board/Board.js                     | 44 +--------
 src/routes/Board/styles.less                  | 52 ----------
 5 files changed, 151 insertions(+), 93 deletions(-)
 create mode 100644 src/common/SeasonalNotification/SeasonalNotification.js
 create mode 100644 src/common/SeasonalNotification/styles.less
 rename src/{routes/Board => common/SeasonalNotification}/useFetchNotificationData.js (100%)

diff --git a/src/common/SeasonalNotification/SeasonalNotification.js b/src/common/SeasonalNotification/SeasonalNotification.js
new file mode 100644
index 000000000..1c5b7ab07
--- /dev/null
+++ b/src/common/SeasonalNotification/SeasonalNotification.js
@@ -0,0 +1,52 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const styles = require('./styles');
+const { Button, ModalDialog } = require('../../common');
+const useBinaryState = require('stremio/common/useBinaryState');
+const useFetchNotificationData = require('./useFetchNotificationData');
+
+const SeasonalNotification = () => {
+    const { notificationModalData, isModalDataLoading } = useFetchNotificationData();
+    const [isNotificationModalOpen, , closeNotificationModal] = useBinaryState(true);
+
+    return (
+        notificationModalData !== null && !isModalDataLoading && isNotificationModalOpen ?
+            <ModalDialog className={styles['notification-modal']} onCloseRequest={closeNotificationModal}>
+                {
+                    notificationModalData.imageUrl ?
+                        <img className={styles['notification-image']} src={notificationModalData.imageUrl} />
+                        :
+                        null
+                }
+                <div className={styles['info-container']}>
+                    <div className={styles['title-container']}>
+                        {
+                            notificationModalData.title ?
+                                <div className={styles['title']}>{notificationModalData.title}</div>
+                                :
+                                null
+                        }
+                        {
+                            notificationModalData.message ?
+                                <div className={styles['notification-label']}>{notificationModalData.message}</div>
+                                :
+                                null
+                        }
+                    </div>
+                    {
+                        notificationModalData.addon.manifestUrl ?
+                            <Button className={styles['action-button']} href={notificationModalData.addon.manifestUrl}>
+                                <div className={styles['button-label']}>Learn more</div>
+                            </Button>
+                            :
+                            null
+                    }
+                </div>
+            </ModalDialog>
+            :
+            null
+    );
+};
+
+module.exports = SeasonalNotification;
diff --git a/src/common/SeasonalNotification/styles.less b/src/common/SeasonalNotification/styles.less
new file mode 100644
index 000000000..9acd55e3f
--- /dev/null
+++ b/src/common/SeasonalNotification/styles.less
@@ -0,0 +1,96 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+:import('~stremio/common/ModalDialog/styles.less') {
+    modal-dialog-content: modal-dialog-content;
+    modal-dialog-container: modal-dialog-container;
+}
+
+.notification-modal {
+    .modal-dialog-container {
+        overflow: visible;
+        max-width: 45rem;
+
+        .modal-dialog-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            overflow: visible;
+    
+            .notification-image {
+                width: 100%;
+                height: 100%;
+                margin-top: -10rem;
+            }
+        
+            .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 6rem;
+                    }
+        
+                    .notification-label {
+                        color: var(--primary-foreground-color);
+                        font-size: 1rem;
+                        text-align: center;
+                        opacity: 0.5;
+                        margin-bottom: 3rem;
+                    }
+                }
+        
+        
+                .action-button {
+                    background-color: var(--primary-foreground-color);
+                    border: 2px solid var(--primary-foreground-color);
+                    padding: 0.8rem 1.5rem;
+                    border-radius: 2rem;
+        
+                    .button-label {
+                        color: var(--primary-accent-color);
+                        font-size: 1rem;
+                    }
+        
+                    &:hover {
+                        background-color: transparent;
+                    }
+                }
+            }
+        }
+    }
+
+    @media only screen and (max-width: @minimum) {
+        .modal-dialog-container {
+            .modal-dialog-content {
+                .notification-image {
+                    height: 125%;
+                    width: 125%;
+                }
+
+                .info-container {
+                    .title-container {
+                        .title {
+                            padding: 0rem;
+                            font-size: 1rem;
+                        }
+
+                        .notification-label {
+                            font-size: 0.875rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/routes/Board/useFetchNotificationData.js b/src/common/SeasonalNotification/useFetchNotificationData.js
similarity index 100%
rename from src/routes/Board/useFetchNotificationData.js
rename to src/common/SeasonalNotification/useFetchNotificationData.js
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index d8c152181..b57091a3f 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -4,11 +4,11 @@ const React = require('react');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useTranslation } = require('react-i18next');
-const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange, ModalDialog, Button, useBinaryState } = require('stremio/common');
+const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
-const useFetchNotificationData = require('./useFetchNotificationData');
+const SeasonalNotification = require('stremio/common/SeasonalNotification/SeasonalNotification');
 
 const THRESHOLD = 5;
 
@@ -19,8 +19,6 @@ const Board = () => {
     const [board, loadBoardRows] = useBoard();
     const boardCatalogsOffset = continueWatchingPreview.items.length > 0 ? 1 : 0;
     const scrollContainerRef = React.useRef();
-    const { notificationModalData, isModalDataLoading } = useFetchNotificationData();
-    const [isNotificationModalOpen, , closeNotificationModal] = useBinaryState(true);
     const onVisibleRangeChange = React.useCallback(() => {
         const range = getVisibleChildrenRange(scrollContainerRef.current);
         if (range === null) {
@@ -41,43 +39,7 @@ const Board = () => {
     }, [board.catalogs, onVisibleRangeChange]);
     return (
         <div className={styles['board-container']}>
-            {
-                isNotificationModalOpen && notificationModalData && !isModalDataLoading ?
-                    <ModalDialog className={styles['notification-modal']} title={'Notification Modal'} onCloseRequest={closeNotificationModal}>
-                        {
-                            notificationModalData.imageUrl ?
-                                <img className={styles['notification-image']} style={{ width: '95%', height: '95%' }} src={notificationModalData.imageUrl} />
-                                :
-                                null
-                        }
-                        <div className={styles['info-container']}>
-                            <div className={styles['title-container']}>
-                                {
-                                    notificationModalData.title ?
-                                        <div className={styles['title']}>{notificationModalData.title}</div>
-                                        :
-                                        null
-                                }
-                                {
-                                    notificationModalData.message ?
-                                        <div className={styles['notification-label']}>{notificationModalData.message}</div>
-                                        :
-                                        null
-                                }
-                            </div>
-                            {
-                                notificationModalData.addon.manifestUrl ?
-                                    <Button className={styles['action-button']} href={notificationModalData.addon.manifestUrl}>
-                                        <div className={styles['label']}>Learn more</div>
-                                    </Button>
-                                    :
-                                    null
-                            }
-                        </div>
-                    </ModalDialog>
-                    :
-                    null
-            }
+            <SeasonalNotification />
             <MainNavBars className={styles['board-content-container']} route={'board'}>
                 <div ref={scrollContainerRef} className={styles['board-content']} onScroll={onScroll}>
                     {
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 11f575a9b..b949d8689 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -17,58 +17,6 @@
     display: flex;
     flex-direction: column;
 
-    .notification-modal {
-        .notification-image {
-            width: 95%;
-            height: 95%;
-            margin: -10rem auto 0;
-        }
-    
-        .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;
-                }
-            }
-        }
-    }
-
     .board-content-container {
         flex: 1;
         align-self: stretch;

From 4153c9b0030f405fb4b438383fd93775b4dc7847 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 14 Dec 2023 15:18:05 +0100
Subject: [PATCH 05/11] feature: correct redirect and action while clicking the
 button

---
 src/common/SeasonalNotification/SeasonalNotification.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/SeasonalNotification/SeasonalNotification.js b/src/common/SeasonalNotification/SeasonalNotification.js
index 1c5b7ab07..d6c2bd529 100644
--- a/src/common/SeasonalNotification/SeasonalNotification.js
+++ b/src/common/SeasonalNotification/SeasonalNotification.js
@@ -36,7 +36,7 @@ const SeasonalNotification = () => {
                     </div>
                     {
                         notificationModalData.addon.manifestUrl ?
-                            <Button className={styles['action-button']} href={notificationModalData.addon.manifestUrl}>
+                            <Button className={styles['action-button']} href={`#/addons?addon=${encodeURIComponent(notificationModalData.addon.manifestUrl)}`} onClick={closeNotificationModal}>
                                 <div className={styles['button-label']}>Learn more</div>
                             </Button>
                             :

From 56ff3465120f465d417ed83cbedfcbe9b536328b Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 14 Dec 2023 16:37:27 +0100
Subject: [PATCH 06/11] refactor: naming

---
 .../SeasonalNotification.js => EventModal/EventModal.js}    | 6 +++---
 src/common/{SeasonalNotification => EventModal}/styles.less | 0
 .../useFetchNotificationData.js                             | 0
 src/routes/Board/Board.js                                   | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)
 rename src/common/{SeasonalNotification/SeasonalNotification.js => EventModal/EventModal.js} (94%)
 rename src/common/{SeasonalNotification => EventModal}/styles.less (100%)
 rename src/common/{SeasonalNotification => EventModal}/useFetchNotificationData.js (100%)

diff --git a/src/common/SeasonalNotification/SeasonalNotification.js b/src/common/EventModal/EventModal.js
similarity index 94%
rename from src/common/SeasonalNotification/SeasonalNotification.js
rename to src/common/EventModal/EventModal.js
index d6c2bd529..3b648767d 100644
--- a/src/common/SeasonalNotification/SeasonalNotification.js
+++ b/src/common/EventModal/EventModal.js
@@ -2,11 +2,11 @@
 
 const React = require('react');
 const styles = require('./styles');
-const { Button, ModalDialog } = require('../../common');
+const { Button, ModalDialog } = require('..');
 const useBinaryState = require('stremio/common/useBinaryState');
 const useFetchNotificationData = require('./useFetchNotificationData');
 
-const SeasonalNotification = () => {
+const EventModal = () => {
     const { notificationModalData, isModalDataLoading } = useFetchNotificationData();
     const [isNotificationModalOpen, , closeNotificationModal] = useBinaryState(true);
 
@@ -49,4 +49,4 @@ const SeasonalNotification = () => {
     );
 };
 
-module.exports = SeasonalNotification;
+module.exports = EventModal;
diff --git a/src/common/SeasonalNotification/styles.less b/src/common/EventModal/styles.less
similarity index 100%
rename from src/common/SeasonalNotification/styles.less
rename to src/common/EventModal/styles.less
diff --git a/src/common/SeasonalNotification/useFetchNotificationData.js b/src/common/EventModal/useFetchNotificationData.js
similarity index 100%
rename from src/common/SeasonalNotification/useFetchNotificationData.js
rename to src/common/EventModal/useFetchNotificationData.js
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index b57091a3f..673261af6 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -5,10 +5,10 @@ const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useTranslation } = require('react-i18next');
 const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
+const EventModal = require('stremio/common/EventModal/EventModal');
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
-const SeasonalNotification = require('stremio/common/SeasonalNotification/SeasonalNotification');
 
 const THRESHOLD = 5;
 
@@ -39,7 +39,7 @@ const Board = () => {
     }, [board.catalogs, onVisibleRangeChange]);
     return (
         <div className={styles['board-container']}>
-            <SeasonalNotification />
+            <EventModal />
             <MainNavBars className={styles['board-content-container']} route={'board'}>
                 <div ref={scrollContainerRef} className={styles['board-content']} onScroll={onScroll}>
                     {

From 3710399bcadc6347ca8517b1e5d90e7f352e0ef7 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 14 Dec 2023 17:13:48 +0100
Subject: [PATCH 07/11] refactor: EventModal imports

---
 src/common/EventModal/index.js | 5 +++++
 src/common/index.js            | 2 ++
 src/routes/Board/Board.js      | 3 +--
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 src/common/EventModal/index.js

diff --git a/src/common/EventModal/index.js b/src/common/EventModal/index.js
new file mode 100644
index 000000000..ac88c0210
--- /dev/null
+++ b/src/common/EventModal/index.js
@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const EventModal = require('./EventModal');
+
+module.exports = EventModal;
diff --git a/src/common/index.js b/src/common/index.js
index 8d399d9a0..a26418eca 100644
--- a/src/common/index.js
+++ b/src/common/index.js
@@ -45,6 +45,7 @@ const useStreamingServer = require('./useStreamingServer');
 const useTorrent = require('./useTorrent');
 const platform = require('./platform');
 const externalPlayerOptions = require('./externalPlayerOptions');
+const EventModal = require('./EventModal');
 
 module.exports = {
     AddonDetailsModal,
@@ -96,4 +97,5 @@ module.exports = {
     useTorrent,
     platform,
     externalPlayerOptions,
+    EventModal,
 };
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 673261af6..4c0702eda 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -4,8 +4,7 @@ const React = require('react');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useTranslation } = require('react-i18next');
-const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
-const EventModal = require('stremio/common/EventModal/EventModal');
+const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange, EventModal } = require('stremio/common');
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');

From 236a3d5050ec04d562a6006f17cb1c7f7b1cd1a0 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Thu, 14 Dec 2023 22:26:36 +0100
Subject: [PATCH 08/11] refactor(EventModal): use events from ctx

---
 src/common/EventModal/EventModal.js           | 44 ++++++++++++-------
 src/common/EventModal/useEvents.js            | 36 +++++++++++++++
 .../EventModal/useFetchNotificationData.js    | 41 -----------------
 3 files changed, 65 insertions(+), 56 deletions(-)
 create mode 100644 src/common/EventModal/useEvents.js
 delete mode 100644 src/common/EventModal/useFetchNotificationData.js

diff --git a/src/common/EventModal/EventModal.js b/src/common/EventModal/EventModal.js
index 3b648767d..03fff5b83 100644
--- a/src/common/EventModal/EventModal.js
+++ b/src/common/EventModal/EventModal.js
@@ -2,41 +2,55 @@
 
 const React = require('react');
 const styles = require('./styles');
-const { Button, ModalDialog } = require('..');
-const useBinaryState = require('stremio/common/useBinaryState');
-const useFetchNotificationData = require('./useFetchNotificationData');
+const Button = require('stremio/common/Button');
+const ModalDialog = require('stremio/common/ModalDialog');
+const useEvents = require('./useEvents');
 
 const EventModal = () => {
-    const { notificationModalData, isModalDataLoading } = useFetchNotificationData();
-    const [isNotificationModalOpen, , closeNotificationModal] = useBinaryState(true);
+    const { events, pullEvents, dismissEvent } = useEvents();
+
+    const modal = React.useMemo(() => {
+        return events?.modal?.type === 'Ready' ?
+            events.modal.content
+            :
+            null;
+    }, [events]);
+
+    const onCloseRequest = React.useCallback(() => {
+        modal?.id && dismissEvent(modal.id);
+    }, [modal]);
+
+    React.useEffect(() => {
+        pullEvents();
+    }, []);
 
     return (
-        notificationModalData !== null && !isModalDataLoading && isNotificationModalOpen ?
-            <ModalDialog className={styles['notification-modal']} onCloseRequest={closeNotificationModal}>
+        modal !== null ?
+            <ModalDialog className={styles['notification-modal']} onCloseRequest={onCloseRequest}>
                 {
-                    notificationModalData.imageUrl ?
-                        <img className={styles['notification-image']} src={notificationModalData.imageUrl} />
+                    modal.imageUrl ?
+                        <img className={styles['notification-image']} src={modal.imageUrl} />
                         :
                         null
                 }
                 <div className={styles['info-container']}>
                     <div className={styles['title-container']}>
                         {
-                            notificationModalData.title ?
-                                <div className={styles['title']}>{notificationModalData.title}</div>
+                            modal.title ?
+                                <div className={styles['title']}>{modal.title}</div>
                                 :
                                 null
                         }
                         {
-                            notificationModalData.message ?
-                                <div className={styles['notification-label']}>{notificationModalData.message}</div>
+                            modal.message ?
+                                <div className={styles['notification-label']}>{modal.message}</div>
                                 :
                                 null
                         }
                     </div>
                     {
-                        notificationModalData.addon.manifestUrl ?
-                            <Button className={styles['action-button']} href={`#/addons?addon=${encodeURIComponent(notificationModalData.addon.manifestUrl)}`} onClick={closeNotificationModal}>
+                        modal.addon.manifestUrl ?
+                            <Button className={styles['action-button']} href={`#/addons?addon=${encodeURIComponent(modal.addon.manifestUrl)}`} onClick={onCloseRequest}>
                                 <div className={styles['button-label']}>Learn more</div>
                             </Button>
                             :
diff --git a/src/common/EventModal/useEvents.js b/src/common/EventModal/useEvents.js
new file mode 100644
index 000000000..f5efaa79e
--- /dev/null
+++ b/src/common/EventModal/useEvents.js
@@ -0,0 +1,36 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const useModelState = require('stremio/common/useModelState');
+const { useServices } = require('stremio/services');
+
+const map = (ctx) => ({
+    ...ctx.events,
+});
+
+const useEvents = () => {
+    const { core } = useServices();
+
+    const pullEvents = () => {
+        core.transport.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'GetEvents',
+            },
+        });
+    };
+
+    const dismissEvent = (id) => {
+        core.transport.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'DismissEvent',
+                args: id,
+            },
+        });
+    };
+
+    const events = useModelState({ model: 'ctx', map });
+    return { events, pullEvents, dismissEvent };
+};
+
+module.exports = useEvents;
diff --git a/src/common/EventModal/useFetchNotificationData.js b/src/common/EventModal/useFetchNotificationData.js
deleted file mode 100644
index 022243a94..000000000
--- a/src/common/EventModal/useFetchNotificationData.js
+++ /dev/null
@@ -1,41 +0,0 @@
-// Copyright (C) 2017-2023 Smart code 203358507
-
-const React = require('react');
-
-const useFetchNotificationData = () => {
-    const [notificationModalData, setNotificationModalData] = React.useState(null);
-    const [isLoading, setIsLoading] = React.useState(false);
-
-    React.useEffect(() => {
-        const fetchData = async () => {
-            setIsLoading(true);
-            try {
-                const response = await fetch('https://api.strem.io/api/getModal', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({ date: new Date() })
-                });
-
-                if (!response.ok) {
-                    throw new Error('Network response was not ok');
-                }
-
-                const jsonData = await response.json();
-                const data = jsonData.result;
-                setNotificationModalData(data);
-            } catch (err) {
-                throw new Error(err.message);
-            } finally {
-                setIsLoading(false);
-            }
-        };
-
-        fetchData();
-    }, []);
-
-    return { notificationModalData, isLoading };
-};
-
-module.exports = useFetchNotificationData;

From ca11721cd2c348abe0ea5ab5385242b0fe9fc779 Mon Sep 17 00:00:00 2001
From: kKaskak <117831817+kKaskak@users.noreply.github.com>
Date: Thu, 14 Dec 2023 23:29:14 +0100
Subject: [PATCH 09/11] update: action-button styles

---
 src/common/EventModal/styles.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index 9acd55e3f..a7c7b690f 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -54,12 +54,13 @@
                 .action-button {
                     background-color: var(--primary-foreground-color);
                     border: 2px solid var(--primary-foreground-color);
-                    padding: 0.8rem 1.5rem;
+                    padding: 0.8rem 2rem;
                     border-radius: 2rem;
         
                     .button-label {
                         color: var(--primary-accent-color);
                         font-size: 1rem;
+                        font-weight: 700;
                     }
         
                     &:hover {

From 14839d220e662b1ad63c28aae491d8a3984cd394 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Fri, 15 Dec 2023 16:13:27 +0100
Subject: [PATCH 10/11] refactor(EventModal): implement two types of modals

---
 src/common/EventModal/EventModal.js | 42 ++++++++++++++++++++++-------
 src/common/EventModal/styles.less   | 34 ++++++++++++++++++-----
 2 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/src/common/EventModal/EventModal.js b/src/common/EventModal/EventModal.js
index 03fff5b83..dcd9ca626 100644
--- a/src/common/EventModal/EventModal.js
+++ b/src/common/EventModal/EventModal.js
@@ -1,12 +1,16 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
-const styles = require('./styles');
+const { useTranslation } = require('react-i18next');
 const Button = require('stremio/common/Button');
 const ModalDialog = require('stremio/common/ModalDialog');
 const useEvents = require('./useEvents');
+const styles = require('./styles');
+const { default: Icon } = require('@stremio/stremio-icons/react');
 
 const EventModal = () => {
+    const { t } = useTranslation();
+
     const { events, pullEvents, dismissEvent } = useEvents();
 
     const modal = React.useMemo(() => {
@@ -16,7 +20,7 @@ const EventModal = () => {
             null;
     }, [events]);
 
-    const onCloseRequest = React.useCallback(() => {
+    const onClose = React.useCallback(() => {
         modal?.id && dismissEvent(modal.id);
     }, [modal]);
 
@@ -26,10 +30,10 @@ const EventModal = () => {
 
     return (
         modal !== null ?
-            <ModalDialog className={styles['notification-modal']} onCloseRequest={onCloseRequest}>
+            <ModalDialog className={styles['event-modal']} onCloseRequest={onClose}>
                 {
                     modal.imageUrl ?
-                        <img className={styles['notification-image']} src={modal.imageUrl} />
+                        <img className={styles['image']} src={modal.imageUrl} />
                         :
                         null
                 }
@@ -43,19 +47,39 @@ const EventModal = () => {
                         }
                         {
                             modal.message ?
-                                <div className={styles['notification-label']}>{modal.message}</div>
+                                <div className={styles['label']}>{modal.message}</div>
                                 :
                                 null
                         }
                     </div>
                     {
-                        modal.addon.manifestUrl ?
-                            <Button className={styles['action-button']} href={`#/addons?addon=${encodeURIComponent(modal.addon.manifestUrl)}`} onClick={onCloseRequest}>
-                                <div className={styles['button-label']}>Learn more</div>
-                            </Button>
+                        modal?.addon?.name ?
+                            <div className={styles['addon-container']}>
+                                <Icon className={styles['icon']} name={'addons'} />
+                                <div className={styles['name']}>
+                                    { modal.addon.name }
+                                </div>
+                            </div>
                             :
                             null
                     }
+                    {
+                        modal?.addon?.manifestUrl ?
+                            <Button className={styles['action-button']} href={`#/addons?addon=${encodeURIComponent(modal.addon.manifestUrl)}`} onClick={onClose}>
+                                <div className={styles['button-label']}>
+                                    { t('INSTALL_ADDON') }
+                                </div>
+                            </Button>
+                            :
+                            modal.externalUrl ?
+                                <Button className={styles['action-button']} href={modal.externalUrl} target={'_blank'}>
+                                    <div className={styles['button-label']}>
+                                        { t('LEARN_MORE') }
+                                    </div>
+                                </Button>
+                                :
+                                null
+                    }
                 </div>
             </ModalDialog>
             :
diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index 9acd55e3f..8bbd63add 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -7,7 +7,7 @@
     modal-dialog-container: modal-dialog-container;
 }
 
-.notification-modal {
+.event-modal {
     .modal-dialog-container {
         overflow: visible;
         max-width: 45rem;
@@ -18,7 +18,7 @@
             align-items: center;
             overflow: visible;
     
-            .notification-image {
+            .image {
                 width: 100%;
                 height: 100%;
                 margin-top: -10rem;
@@ -29,27 +29,47 @@
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
+                gap: 2.5rem;
                 padding: 1rem 4rem;
                 margin-top: -7rem;
         
                 .title-container {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 1rem;
+
                     .title {
                         color: var(--primary-foreground-color);
                         font-size: 1.325rem;
                         text-align: center;
-                        margin-bottom: 2rem;
                         padding: 0 6rem;
                     }
         
-                    .notification-label {
+                    .label {
                         color: var(--primary-foreground-color);
                         font-size: 1rem;
                         text-align: center;
                         opacity: 0.5;
-                        margin-bottom: 3rem;
                     }
                 }
         
+                .addon-container {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    gap: 0.5rem;
+
+                    .icon {
+                        height: 2rem;
+                        width: 2rem;
+                        color: var(--primary-accent-color);
+                    }
+
+                    .name {
+                        color: var(--primary-foreground-color);
+                    }
+                }
         
                 .action-button {
                     background-color: var(--primary-foreground-color);
@@ -73,7 +93,7 @@
     @media only screen and (max-width: @minimum) {
         .modal-dialog-container {
             .modal-dialog-content {
-                .notification-image {
+                .image {
                     height: 125%;
                     width: 125%;
                 }
@@ -85,7 +105,7 @@
                             font-size: 1rem;
                         }
 
-                        .notification-label {
+                        .label {
                             font-size: 0.875rem;
                         }
                     }

From 1ae7b8cce7f97e4aa085bfc6af9f40952e37e0dc Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Mon, 18 Dec 2023 12:05:06 +0100
Subject: [PATCH 11/11] style(EventModal): add blur to backdrop

---
 src/common/EventModal/styles.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less
index 2a85e51af..0fa9919b8 100644
--- a/src/common/EventModal/styles.less
+++ b/src/common/EventModal/styles.less
@@ -8,6 +8,8 @@
 }
 
 .event-modal {
+    backdrop-filter: blur(10px);
+
     .modal-dialog-container {
         overflow: visible;
         max-width: 45rem;