From 82c60414b95d3baeff9e5301edf3f97c9b977565 Mon Sep 17 00:00:00 2001
From: Nariman Jelveh <n.jelveh@gmail.com>
Date: Sat, 15 Jun 2024 11:31:26 -0700
Subject: [PATCH] Add support for icon, title, and text in notifications

---
 src/UI/UINotification.js | 10 ++++++++--
 src/css/style.css        | 42 +++++++++++++++++++++++++++++++++++++---
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/UI/UINotification.js b/src/UI/UINotification.js
index bfbc6a886..da9923c36 100644
--- a/src/UI/UINotification.js
+++ b/src/UI/UINotification.js
@@ -22,13 +22,19 @@ window.active_notifs = []
 function UINotification(options){
     window.global_element_id++;
 
-    options.content = options.content ?? '';
+    options.text = options.text ?? '';
     window.active_notifs.push(window.global_element_id);
 
     let h = '';
     h += `<div id="ui-notification__${window.global_element_id}" data-id="${window.global_element_id}" class="notification antialiased animate__animated animate__fadeInRight animate__slow">`;
         h += `<img class="notification-close" src="${html_encode(window.icons['close.svg'])}">`;
-        h += html_encode(options.content);
+        h += `<div class="notification-icon">`
+            h += `<img src="${html_encode(options.icon)}">`;
+        h += `</div>`;
+        h += `<div class="notification-content">`;
+            h += `<div class="notification-title">${html_encode(options.title)}</div>`;
+            h += `<div class="notification-text">${html_encode(options.text)}</div>`;
+        h += `</div>`;
     h += `</div>`;
 
     $('.notification-container').prepend(h);
diff --git a/src/css/style.css b/src/css/style.css
index 66a238248..c77eaf8b5 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -2433,8 +2433,8 @@ label {
  * Notification
  *****************************************************/
 .notification {
-    width: 250px;
-    height: 54px;
+    width: 320px;
+    min-height: 54px;
     background: #ffffffcd;
     backdrop-filter: blur(5px);
     border-radius: 11px;
@@ -2442,6 +2442,8 @@ label {
     box-shadow: 0px 0px 17px -9px #000;
     border: 1px solid #d5d5d5;
     margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
 }
 
 .notification-close {
@@ -2460,7 +2462,33 @@ label {
 .notification:hover .notification-close {
     display: block;
 }
-
+.notification-icon{
+    width: 40px;
+    margin: 10px 5px 10px 15px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    filter: drop-shadow(0px 0px 0.5px rgb(51, 51, 51));
+}
+.notification-icon img{
+    width: 35px;
+    height: 35px;
+}
+.notification-title{
+    font-size: 12px;
+    font-weight: 600;
+}
+.notification-text{
+    font-size: 12px; 
+    margin-top: 4px;
+}
+.notification-content{
+    flex-grow:1;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+}
 /*****************************************************
  * Start
  *****************************************************/
@@ -2821,6 +2849,14 @@ fieldset[name=number-code] {
         backdrop-filter: blur(10px);
     }
 
+    .notification {
+        background-color: hsla(var(--window-head-hue),
+                var(--window-head-saturation),
+                var(--window-head-lightness),
+                var(--window-head-alpha));
+        backdrop-filter: blur(10px);
+    }
+
     .device-phone .window-head {
         background-color: rgba(231, 238, 245);
         backdrop-filter: blur(10px);