From 1eed73fc4b956dd1be0be4bc52b767b4004dfe3a Mon Sep 17 00:00:00 2001
From: Simey Lameze <simey@moodle.com>
Date: Thu, 7 Oct 2021 13:52:20 +0800
Subject: [PATCH] MDL-72667 message: fix contrast issue in the drawer

---
 .../message_drawer_conversations_list.mustache  |  6 +++---
 .../message_drawer_messages_list.mustache       |  4 ++--
 ...essage_drawer_view_overview_section.mustache |  2 +-
 theme/boost/scss/moodle/message.scss            | 17 +++++++++++++++++
 theme/boost/style/moodle.css                    | 12 ++++++++++++
 theme/classic/style/moodle.css                  | 12 ++++++++++++
 6 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/message/templates/message_drawer_conversations_list.mustache b/message/templates/message_drawer_conversations_list.mustache
index 6b6823941bb..c9e96d740ee 100644
--- a/message/templates/message_drawer_conversations_list.mustache
+++ b/message/templates/message_drawer_conversations_list.mustache
@@ -78,12 +78,12 @@
                         {{#str}} sender, core_message, {{.}} {{/str}}
                     {{/lastsendername}}
                 {{/sentfromcurrentuser}}
-                <span class="text-muted">{{{lastmessage}}}</span>
+                <span>{{{lastmessage}}}</span>
             </p>
         </div>
         <div class="d-flex align-self-stretch">
             <div
-                class="px-2 py-1 small position-absolute position-right text-muted {{^lastmessagedate}}hidden{{/lastmessagedate}}"
+                class="px-2 py-1 small position-absolute position-right {{^lastmessagedate}}hidden{{/lastmessagedate}}"
                 data-region="last-message-date" aria-hidden="true"
             >
                 {{#lastmessagedate}}
@@ -98,7 +98,7 @@
             </div>
             <div class="d-flex align-self-center align-items-center">
                 <span
-                    class="badge badge-pill badge-primary bg-primary {{^unreadcount}}hidden{{/unreadcount}}"
+                    class="badge badge-pill badge-primary {{^unreadcount}}hidden{{/unreadcount}}"
                     data-region="unread-count"
                     aria-label="{{#str}} unreadmessages, core_message, {{unreadcount}} {{/str}}"
                 >
diff --git a/message/templates/message_drawer_messages_list.mustache b/message/templates/message_drawer_messages_list.mustache
index 64dbe08d9bd..866c30e7078 100644
--- a/message/templates/message_drawer_messages_list.mustache
+++ b/message/templates/message_drawer_messages_list.mustache
@@ -91,13 +91,13 @@
         </div>
 
         <span
-            class="badge badge-pill badge-primary bg-primary {{^unreadcount}}hidden{{/unreadcount}}"
+            class="badge badge-pill badge-primary {{^unreadcount}}hidden{{/unreadcount}}"
             data-region="unread-count"
         >
             {{unreadcount}}
         </span>
 
-        <div class="text-muted">
+        <div>
             {{> core_message/message_drawer_icon_forward }}
         </div>
     </a>
diff --git a/message/templates/message_drawer_view_overview_section.mustache b/message/templates/message_drawer_view_overview_section.mustache
index 33506961478..ed0ce53d4d6 100644
--- a/message/templates/message_drawer_view_overview_section.mustache
+++ b/message/templates/message_drawer_view_overview_section.mustache
@@ -39,7 +39,7 @@
     class="section border-0 card rounded-0"
     data-region="{{$region}}{{/region}}"
 >
-    <div id="{{$region}}{{/region}}-toggle" class="card-header rounded-0 p-0" data-region="toggle">
+    <div id="{{$region}}{{/region}}-toggle" class="card-header rounded-0" data-region="toggle">
         <button
             class="btn btn-link w-100 text-left p-1 p-sm-2 d-flex rounded-0 align-items-center overview-section-toggle {{^expanded}}collapsed{{/expanded}}"
             data-toggle="collapse"
diff --git a/theme/boost/scss/moodle/message.scss b/theme/boost/scss/moodle/message.scss
index a3e9b7a9bb2..099a8a91611 100644
--- a/theme/boost/scss/moodle/message.scss
+++ b/theme/boost/scss/moodle/message.scss
@@ -526,6 +526,10 @@ $message-day-color: color-yiq($message-app-bg) !default;
             &.expanded {
                 display: flex;
             }
+
+            div[data-region="toggle"] {
+                padding: 0.1rem;
+            }
         }
     }
 
@@ -541,12 +545,25 @@ $message-day-color: color-yiq($message-app-bg) !default;
         .list-group-item {
             border-left: 0;
             border-right: 0;
+            &:hover {
+                color: $white;
+                background-color: $primary;
+                .badge-primary {
+                    background-color: $white;
+                    color: $primary;
+                }
+            }
             &:first-child {
                 border-top: 0;
             }
             &:last-child {
                 border-bottom: 0;
             }
+            &.list-group-item-action {
+                margin: 0.1rem;
+                width: auto;
+                text-align: inherit;
+            }
         }
     }
     .last-message {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 0c350f9aea3..f1fa7484da8 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15969,6 +15969,8 @@ a.ygtvspacer:hover {
     display: block; }
     .message-app .view-overview-body .section.expanded {
       display: flex; }
+    .message-app .view-overview-body .section div[data-region="toggle"] {
+      padding: 0.1rem; }
   .message-app .view-conversation .content-message-container img {
     max-width: 100%; }
   .message-app .list-group {
@@ -15976,10 +15978,20 @@ a.ygtvspacer:hover {
     .message-app .list-group .list-group-item {
       border-left: 0;
       border-right: 0; }
+      .message-app .list-group .list-group-item:hover {
+        color: #fff;
+        background-color: #0f6cbf; }
+        .message-app .list-group .list-group-item:hover .badge-primary {
+          background-color: #fff;
+          color: #0f6cbf; }
       .message-app .list-group .list-group-item:first-child {
         border-top: 0; }
       .message-app .list-group .list-group-item:last-child {
         border-bottom: 0; }
+      .message-app .list-group .list-group-item.list-group-item-action {
+        margin: 0.1rem;
+        width: auto;
+        text-align: inherit; }
   .message-app .last-message {
     min-height: 1.5rem; }
   .message-app .section .collapsing {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 42efde41bfa..1935cbe2698 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -15969,6 +15969,8 @@ a.ygtvspacer:hover {
     display: block; }
     .message-app .view-overview-body .section.expanded {
       display: flex; }
+    .message-app .view-overview-body .section div[data-region="toggle"] {
+      padding: 0.1rem; }
   .message-app .view-conversation .content-message-container img {
     max-width: 100%; }
   .message-app .list-group {
@@ -15976,10 +15978,20 @@ a.ygtvspacer:hover {
     .message-app .list-group .list-group-item {
       border-left: 0;
       border-right: 0; }
+      .message-app .list-group .list-group-item:hover {
+        color: #fff;
+        background-color: #0f6fc5; }
+        .message-app .list-group .list-group-item:hover .badge-primary {
+          background-color: #fff;
+          color: #0f6fc5; }
       .message-app .list-group .list-group-item:first-child {
         border-top: 0; }
       .message-app .list-group .list-group-item:last-child {
         border-bottom: 0; }
+      .message-app .list-group .list-group-item.list-group-item-action {
+        margin: 0.1rem;
+        width: auto;
+        text-align: inherit; }
   .message-app .last-message {
     min-height: 1.5rem; }
   .message-app .section .collapsing {