MDL-65205 themes: message interface message styles

* change shadow for hovering over messages
* remove dependancy on the sass secondary color

message/templates/message_drawer.mustache

@@ -36,7 +36,7 @@
 
 <div
     id="message-drawer-{{uniqid}}"
-    class="message-app drawer bg-light hidden"
+    class="message-app drawer hidden"
     aria-expanded="false"
     aria-hidden="true"
     data-region="message-drawer"

message/templates/message_drawer_view_conversation_body_day.mustache

@@ -35,6 +35,6 @@
 
 }}
 <div class="mt-4" data-region="day-container" data-day-id="{{timestamp}}">
-    <h6 class="text-center mb-4">{{#userdate}} {{timestamp}}, {{#str}} strftimedateshort, core_langconfig  {{/str}} {{/userdate}}</h6>
+    <h6 class="text-center mb-4 day">{{#userdate}} {{timestamp}}, {{#str}} strftimedateshort, core_langconfig  {{/str}} {{/userdate}}</h6>
     {{> core_message/message_drawer_view_conversation_body_messages }}
 </div>

message/templates/message_drawer_view_conversation_body_message.mustache

@@ -35,7 +35,7 @@
 
 }}
 <div
-    class="message clickable d-flex flex-column p-2 mx-1 position-relative {{#fromloggedinuser}}send bg-secondary{{/fromloggedinuser}}{{^fromloggedinuser}}received bg-white{{/fromloggedinuser}} rounded mb-2 mt-2"
+    class="message clickable d-flex flex-column p-2 mx-1 position-relative {{#fromloggedinuser}}send {{/fromloggedinuser}}{{^fromloggedinuser}}received{{/fromloggedinuser}} rounded mb-2 mt-2"
     data-region="message"
     data-message-id="{{id}}"
     role="checkbox"
@@ -60,7 +60,7 @@
         {{/fromloggedinuser}}
 
         <div
-            class="ml-auto small text-right text-muted {{^formattedtime}}hidden{{/formattedtime}}"
+            class="ml-auto small text-right time {{^formattedtime}}hidden{{/formattedtime}}"
             style="flex-shrink: 0"
             data-region="time-created"
         >
@@ -88,8 +88,8 @@
         >
             <span class="text-primary small">{{#str}} retry, core {{/str}}</span>
         </button>
-        <span class="hidden ml-2 small text-dark" data-region="not-selected-icon">{{#pix}} i/uncheckedcircle, core {{/pix}}</span>
-        <span class="hidden ml-2 small text-primary" data-region="selected-icon">{{#pix}} i/checkedcircle, core {{/pix}}</span>
+        <span class="hidden ml-2 small" data-region="not-selected-icon">{{#pix}} i/uncheckedcircle, core {{/pix}}</span>
+        <span class="hidden ml-2 small" data-region="selected-icon">{{#pix}} i/checkedcircle, core {{/pix}}</span>
     </div>
     <div dir="auto" align="initial" data-region="text-container">{{{text}}}</div>
 </div>

theme/boost/scss/moodle/message.scss

@@ -419,10 +419,19 @@
 }
 
 $message-drawer-width: 320px;
+$message-send-bg: $gray-300 !default;
+$message-send-color: color-yiq($message-send-bg) !default;
+$message-send-time-color: mix($message-send-color, $message-send-bg, 100%) !default;
+$message-received-bg: $body-bg !default;
+$message-received-color: color-yiq($message-received-bg) !default;
+$message-received-color-muted: mix($message-received-color, $message-received-bg, 70%) !default;
+$message-app-bg: mix($message-send-bg, $message-received-bg, 50%) !default;
+$message-day-color: color-yiq($message-app-bg) !default;
 
 .message-app {
     display: flex;
     flex-direction: column;
+    background-color: $message-app-bg;
     @include transition();
 
     .icon-back-in-drawer {
@@ -485,6 +494,7 @@ $message-drawer-width: 320px;
         color: $body-color;
         height: 1.5rem;
     }
+
     .contact-status {
         position: absolute;
         left: 39px;
@@ -508,7 +518,7 @@ $message-drawer-width: 320px;
         cursor: pointer;
 
         &:hover {
-            box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.05), 3px 3px 5px -2px rgba(0, 0, 0, .1), 1px 1px 5px 0 rgba(0, 0, 0, 0.03);
+            filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
         }
     }
 
@@ -600,7 +610,32 @@ $message-drawer-width: 320px;
             overflow: hidden;
         }
     }
+
     .message {
+        &.send {
+            background-color: $message-send-bg;
+            color: $message-send-color;
+            .time {
+                color: $message-send-time-color;
+            }
+            .tail {
+                right: 0;
+                margin-right: -0.5rem;
+                border-bottom-color: $message-send-bg;
+            }
+        }
+        &.received {
+            background-color: $message-received-bg;
+            color: $message-received-color;
+            .time {
+                color: $message-received-color-muted;
+            }
+            .tail {
+                left: 0;
+                margin-left: -0.5rem;
+                border-bottom-color: $message-received-bg;
+            }
+        }
         .tail {
             content: '';
             bottom: 0;
@@ -609,16 +644,9 @@ $message-drawer-width: 320px;
             border: 0.5rem solid transparent;
             position: relative;
         }
-        &.send .tail {
-            right: 0;
-            margin-right: -0.5rem;
-            border-bottom-color: map-get($theme-colors, 'secondary');
-        }
-        &.received .tail {
-            left: 0;
-            margin-left: -0.5rem;
-            border-bottom-color: $white;
-        }
+    }
+    .day {
+        color: $message-day-color;
     }
     .lazy-load-list {
         overflow-y: auto;

theme/boost/style/moodle.css

@@ -14606,6 +14606,7 @@ a.ygtvspacer:hover {
 .message-app {
   display: flex;
   flex-direction: column;
+  background-color: #eff1f3;
   transition: all 0.2s ease-in-out; }
   @media (prefers-reduced-motion: reduce) {
     .message-app {
@@ -14664,7 +14665,7 @@ a.ygtvspacer:hover {
   .message-app .clickable {
     cursor: pointer; }
     .message-app .clickable:hover {
-      box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.05), 3px 3px 5px -2px rgba(0, 0, 0, 0.1), 1px 1px 5px 0 rgba(0, 0, 0, 0.03); }
+      filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3)); }
   .message-app a,
   .message-app .btn-link {
     color: inherit; }
@@ -14736,6 +14737,24 @@ a.ygtvspacer:hover {
     min-height: 1.5rem; }
   .message-app .section .collapsing {
     overflow: hidden; }
+  .message-app .message.send {
+    background-color: #dee2e6;
+    color: #212529; }
+    .message-app .message.send .time {
+      color: #212529; }
+    .message-app .message.send .tail {
+      right: 0;
+      margin-right: -0.5rem;
+      border-bottom-color: #dee2e6; }
+  .message-app .message.received {
+    background-color: #fff;
+    color: #212529; }
+    .message-app .message.received .time {
+      color: #646669; }
+    .message-app .message.received .tail {
+      left: 0;
+      margin-left: -0.5rem;
+      border-bottom-color: #fff; }
   .message-app .message .tail {
     content: '';
     bottom: 0;
@@ -14743,14 +14762,8 @@ a.ygtvspacer:hover {
     height: 0;
     border: 0.5rem solid transparent;
     position: relative; }
-  .message-app .message.send .tail {
-    right: 0;
-    margin-right: -0.5rem;
-    border-bottom-color: #ced4da; }
-  .message-app .message.received .tail {
-    left: 0;
-    margin-left: -0.5rem;
-    border-bottom-color: #fff; }
+  .message-app .day {
+    color: #212529; }
   .message-app .lazy-load-list {
     overflow-y: auto; }
 

theme/classic/style/moodle.css

@@ -14868,6 +14868,7 @@ a.ygtvspacer:hover {
 .message-app {
   display: flex;
   flex-direction: column;
+  background-color: #eff1f3;
   transition: all 0.2s ease-in-out; }
   @media (prefers-reduced-motion: reduce) {
     .message-app {
@@ -14926,7 +14927,7 @@ a.ygtvspacer:hover {
   .message-app .clickable {
     cursor: pointer; }
     .message-app .clickable:hover {
-      box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.05), 3px 3px 5px -2px rgba(0, 0, 0, 0.1), 1px 1px 5px 0 rgba(0, 0, 0, 0.03); }
+      filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3)); }
   .message-app a,
   .message-app .btn-link {
     color: inherit; }
@@ -14998,6 +14999,24 @@ a.ygtvspacer:hover {
     min-height: 1.5rem; }
   .message-app .section .collapsing {
     overflow: hidden; }
+  .message-app .message.send {
+    background-color: #dee2e6;
+    color: #212529; }
+    .message-app .message.send .time {
+      color: #212529; }
+    .message-app .message.send .tail {
+      right: 0;
+      margin-right: -0.5rem;
+      border-bottom-color: #dee2e6; }
+  .message-app .message.received {
+    background-color: #fff;
+    color: #212529; }
+    .message-app .message.received .time {
+      color: #646669; }
+    .message-app .message.received .tail {
+      left: 0;
+      margin-left: -0.5rem;
+      border-bottom-color: #fff; }
   .message-app .message .tail {
     content: '';
     bottom: 0;
@@ -15005,14 +15024,8 @@ a.ygtvspacer:hover {
     height: 0;
     border: 0.5rem solid transparent;
     position: relative; }
-  .message-app .message.send .tail {
-    right: 0;
-    margin-right: -0.5rem;
-    border-bottom-color: #e9ecef; }
-  .message-app .message.received .tail {
-    left: 0;
-    margin-left: -0.5rem;
-    border-bottom-color: #fff; }
+  .message-app .day {
+    color: #212529; }
   .message-app .lazy-load-list {
     overflow-y: auto; }