From 25125bbfe2d0bf24f1870846e02d3a7e4a31e08a Mon Sep 17 00:00:00 2001
From: Pedro Jordao <pedrojordaorezende@gmail.com>
Date: Tue, 27 Feb 2024 13:54:11 +0100
Subject: [PATCH] MDL-80364 message: Change icon and background-color when item
 selected

Icon and background-color had contrast issues in the selected state.
---
 .../notification_area_content_area_header.mustache         | 2 +-
 .../popup/templates/notification_content_item.mustache     | 2 +-
 theme/boost/scss/moodle/popover-region.scss                | 7 ++++++-
 theme/boost/style/moodle.css                               | 7 +++++--
 theme/classic/style/moodle.css                             | 7 +++++--
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/message/output/popup/templates/notification_area_content_area_header.mustache b/message/output/popup/templates/notification_area_content_area_header.mustache
index 6d7047baf5af4..db8e0f4856ffd 100644
--- a/message/output/popup/templates/notification_area_content_area_header.mustache
+++ b/message/output/popup/templates/notification_area_content_area_header.mustache
@@ -36,6 +36,6 @@
     }
 
 }}
-<div class="image-container"><img src="{{{iconurl}}}" alt="{{#str}}notificationimage, message{{/str}}"/></div>
+<div class="image-container">{{#pix}} e/text_highlight, core, {{#str}} notificationimage, message {{/str}} {{/pix}}</div>
 <div class="subject-container">{{subject}}</div>
 <div class="timestamp">{{timecreatedpretty}}</div>
diff --git a/message/output/popup/templates/notification_content_item.mustache b/message/output/popup/templates/notification_content_item.mustache
index 6da6648a1d95d..9bd76bfc9bc1f 100644
--- a/message/output/popup/templates/notification_content_item.mustache
+++ b/message/output/popup/templates/notification_content_item.mustache
@@ -65,7 +65,7 @@
 
         <div class="content-item-body">
             <div class="notification-image">
-                <img src="{{{iconurl}}}" alt="{{#str}}notificationimage, message{{/str}}"/>
+                {{#pix}} e/text_highlight, core, {{#str}} notificationimage, message {{/str}} {{/pix}}
             </div>
             <div class="notification-message">{{shortenedsubject}}</div>
         </div>
diff --git a/theme/boost/scss/moodle/popover-region.scss b/theme/boost/scss/moodle/popover-region.scss
index 428e4109c7291..89e03e1538ee5 100644
--- a/theme/boost/scss/moodle/popover-region.scss
+++ b/theme/boost/scss/moodle/popover-region.scss
@@ -6,7 +6,7 @@ $region-header-height: 25px;
 $region-footer-height: 30px;
 $content-item-hover-colour-bg: $primary;
 $content-item-hover-colour-text: $white;
-$content-item-selected-colour-bg: #4f94cd;
+$content-item-selected-colour-bg: #3279b3;
 $content-item-unread-colour: #f4f4f4;
 $content-header-footer-height: $region-header-height + $region-footer-height;
 
@@ -178,6 +178,11 @@ $content-header-footer-height: $region-header-height + $region-footer-height;
         .icon {
             font-weight: bolder;
         }
+        .notification-image {
+            .icon {
+                font-weight: 400;
+            }
+        }
     }
 }
 
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 06cbfe8dccf1d..91165c32757cf 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -36374,6 +36374,9 @@ body {
 .navbar-nav .popover-region .icon {
   font-weight: bolder;
 }
+.navbar-nav .popover-region .notification-image .icon {
+  font-weight: 400;
+}
 
 .navbar .popover-region.collapsed .popover-region-container {
   opacity: 0;
@@ -36473,9 +36476,9 @@ body {
   width: calc(100% - 24px);
 }
 .content-item-container.selected {
-  background-color: #4f94cd;
+  background-color: #3279b3;
   color: #fff;
-  border-color: #4f94cd;
+  border-color: #3279b3;
 }
 .content-item-container.selected .content-item-footer .timestamp {
   color: #fff;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index d6adb76f1e549..4021dd4baf9a9 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -36308,6 +36308,9 @@ body {
 .navbar-nav .popover-region .icon {
   font-weight: bolder;
 }
+.navbar-nav .popover-region .notification-image .icon {
+  font-weight: 400;
+}
 
 .navbar .popover-region.collapsed .popover-region-container {
   opacity: 0;
@@ -36407,9 +36410,9 @@ body {
   width: calc(100% - 24px);
 }
 .content-item-container.selected {
-  background-color: #4f94cd;
+  background-color: #3279b3;
   color: #fff;
-  border-color: #4f94cd;
+  border-color: #3279b3;
 }
 .content-item-container.selected .content-item-footer .timestamp {
   color: #fff;