Verified Commit 138d5889 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3100083 by finnsky, Zsuffa Dávid, ankithashetty, _utsavsharma,...

Issue #3100083 by finnsky, Zsuffa Dávid, ankithashetty, _utsavsharma, gauravvvv, smustgrave, zrpnr, markconroy: Add js message theme override to match Umami message markup

(cherry picked from commit 0e07179f)
parent 181fba58
Loading
Loading
Loading
Loading
Loading
+1 −1
Original line number Diff line number Diff line
@@ -28,7 +28,7 @@ public function testFrontAndRecipesPages(): void {
    $this->assertSame(6, $performance_data->getStylesheetCount());
    $this->assertLessThan(125000, $performance_data->getStylesheetBytes());
    $this->assertSame(1, $performance_data->getScriptCount());
    $this->assertLessThan(7500, $performance_data->getScriptBytes());
    $this->assertLessThan(12000, $performance_data->getScriptBytes());
  }

  /**
+2 −2
Original line number Diff line number Diff line
@@ -75,9 +75,9 @@ protected function testFrontPageHotCache(): void {
    $this->assertSame(1, $performance_data->getCacheTagIsValidCount());
    $this->assertSame(0, $performance_data->getCacheTagInvalidationCount());
    $this->assertSame(1, $performance_data->getScriptCount());
    $this->assertLessThan(7500, $performance_data->getScriptBytes());
    $this->assertLessThan(12000, $performance_data->getScriptBytes());
    $this->assertSame(2, $performance_data->getStylesheetCount());
    $this->assertLessThan(40400, $performance_data->getStylesheetBytes());
    $this->assertLessThan(42000, $performance_data->getStylesheetBytes());
  }

  /**
+3 −4
Original line number Diff line number Diff line
@@ -3,13 +3,12 @@
 * This file is used to style the layout builder.
 */

.layout-builder__message--defaults .messages,
.layout-builder__message--overrides .messages {
.layout-builder__message .messages {
  background-image: none;
}
.layout-builder__message--defaults .messages__content {
  background-image: url("../../../../../../../misc/icons/73b355/globe.svg");
  --umami-message-icon: url("../../../../../../../misc/icons/73b355/globe.svg");
}
.layout-builder__message--overrides .messages__content {
  background-image: url("../../../../../../../misc/icons/73b355/location.svg");
  --umami-message-icon: url("../../../../../../../misc/icons/73b355/location.svg");
}
+16 −22
Original line number Diff line number Diff line
@@ -4,49 +4,39 @@
 */

.messages {
  margin-bottom: 1em;
  padding: 20px;
  word-wrap: break-word;
  color: inherit;
  overflow-wrap: break-word;
}
[dir="rtl"] .messages {
  text-align: right;
  background-position: right 10px top 17px;
}
.messages + .messages {
  margin-top: 1.538em;
}
.messages__content {
  padding-left: 24px; /* LTR */
  background: no-repeat 0 center; /* LTR */
  padding-inline-start: 24px;
  background-image: var(--umami-message-icon);
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: center;
}
[dir="rtl"] .messages__content {
  padding-right: 24px;
  padding-left: 0;
  background-position: right;
  background-position-x: right;
}
.messages--status {
  --umami-message-icon: url(/core/misc/icons/73b355/check.svg);

  border: 1px solid #cbdebc;
  background-color: #e6eee0;
}
.messages--status .messages__content {
  background-image: url(/core/misc/icons/73b355/check.svg);
}
.messages--warning {
  --umami-message-icon: url(/core/misc/icons/e29700/warning.svg);

  border: 1px solid #fae2a4;
  background-color: #fcf1d4;
}
.messages--warning .messages__content {
  background-image: url(/core/misc/icons/e29700/warning.svg);
}
.messages--error {
  --umami-message-icon: url(/core/misc/icons/e32700/error.svg);

  border: 1px solid #f8c8d5;
  background-color: #f9e6eb;
}
.messages--error .messages__content {
  background-image: url(/core/misc/icons/e32700/error.svg);
}
.messages--error .error {
  color: inherit;
}
@@ -61,3 +51,7 @@
.messages__item + .messages__item {
  margin-top: 0.769em;
}
.messages__wrapper {
  display: grid;
  gap: 1.538em;
}
+1 −1
Original line number Diff line number Diff line
@@ -34,7 +34,7 @@
    messageWrapper.setAttribute('data-drupal-message-type', type);

    messageWrapper.innerHTML = `
    <div class="messages__content container">
    <div class="messages__content">
      <h2 class="visually-hidden">
        ${messagesTypes[type]}
      </h2>
Loading