FEATURE: New style for personal messages (#13800)

FEATURE: New style for personal messages (#13800)

diff --git a/app/assets/javascripts/discourse/app/widgets/embedded-post.js b/app/assets/javascripts/discourse/app/widgets/embedded-post.js
index 2be773d..e5192f4 100644
--- a/app/assets/javascripts/discourse/app/widgets/embedded-post.js
+++ b/app/assets/javascripts/discourse/app/widgets/embedded-post.js
@@ -30,7 +30,7 @@ export default createWidget("embedded-post", {
         h("div.row", [
           this.attach("post-avatar", attrs),
           h("div.topic-body", [
-            h("div.topic-meta-data", [
+            h("div.topic-meta-data.embedded-reply", [
               this.attach("poster-name", attrs),
               this.attach("post-link-arrow", {
                 above: state.above,
diff --git a/app/assets/javascripts/discourse/app/widgets/post.js b/app/assets/javascripts/discourse/app/widgets/post.js
index 1021ecf..866eb76 100644
--- a/app/assets/javascripts/discourse/app/widgets/post.js
+++ b/app/assets/javascripts/discourse/app/widgets/post.js
@@ -755,6 +755,9 @@ export default createWidget("post", {
     if (attrs.topicOwner) {
       classNames.push("topic-owner");
     }
+    if (attrs.user_id === this.currentUser.id) {
+      classNames.push("current-user-post");
+    }
     if (attrs.groupModerator) {
       classNames.push("category-moderator");
     }
diff --git a/app/assets/stylesheets/color_definitions.scss b/app/assets/stylesheets/color_definitions.scss
index 9e4174e..2990ac7 100644
--- a/app/assets/stylesheets/color_definitions.scss
+++ b/app/assets/stylesheets/color_definitions.scss
@@ -41,6 +41,7 @@
   --secondary-high: #{$secondary-high};
   --secondary-very-high: #{$secondary-very-high};
 
+  --tertiary-very-low: #{$tertiary-very-low};
   --tertiary-low: #{$tertiary-low};
   --tertiary-medium: #{$tertiary-medium};
   --tertiary-high: #{$tertiary-high};
diff --git a/app/assets/stylesheets/common/base/_index.scss b/app/assets/stylesheets/common/base/_index.scss
index 4ef29d0..7572adc 100644
--- a/app/assets/stylesheets/common/base/_index.scss
+++ b/app/assets/stylesheets/common/base/_index.scss
@@ -33,6 +33,7 @@
 @import "modal";
 @import "not-found";
 @import "onebox";
+@import "personal-message";
 @import "popup-menu";
 @import "redirection";
 @import "request_access";
diff --git a/app/assets/stylesheets/common/base/personal-message.scss b/app/assets/stylesheets/common/base/personal-message.scss
new file mode 100644
index 0000000..a1dc0de
--- /dev/null
+++ b/app/assets/stylesheets/common/base/personal-message.scss
@@ -0,0 +1,156 @@
+.archetype-private_message {
+  --border-radius: 2em;
+
+  @keyframes current-user-background-fade-highlight {
+    0% {
+      background-color: var(--secondary);
+      border-color: var(--primary-low);
+    }
+    100% {
+      background-color: var(--tertiary-very-low);
+      border-color: transparent;
+    }
+  }
+
+  .topic-body .cooked {
+    box-sizing: border-box;
+    border: 1px solid var(--primary-low);
+    margin-top: 0.25em;
+    margin-left: -1.35em;
+    padding: 1.5em 1.5em 0.5em 2em;
+    border-radius: 0 var(--border-radius) var(--border-radius)
+      var(--border-radius);
+  }
+
+  .current-user-post {
+    .topic-body .cooked {
+      border: 1px solid transparent;
+      background: var(--tertiary-very-low);
+    }
+    .topic-body.highlighted {
+      .cooked {
+        animation: current-user-background-fade-highlight 2.5s ease-out;
+      }
+    }
+    .embedded-posts {
+      .topic-body .cooked {
+        border: 1px solid var(--primary-low);
+        background: transparent;
+      }
+    }
+  }
+
+  .moderator {
+    .topic-body .cooked {
+      border: 1px solid transparent;
+    }
+  }
+
+  .deleted .topic-body {
+    .cooked {
+      background: var(--danger-low);
+    }
+  }
+
+  .whisper {
+    .topic-body .cooked {
+      background: transparent;
+      border: 2px dashed var(--primary-low);
+    }
+
+    &.my-post .topic-body .cooked {
+      border: 2px dashed var(--tertiary-very-low);
+    }
+  }
+
+  .topic-body.highlighted {
+    animation: none;
+    .cooked {
+      animation: background-fade-highlight 2.5s ease-out;
+    }
+  }
+
+  .topic-avatar,
+  .topic-body {
+    border: none;
+  }
+
+  .post-menu-area {
+    margin-top: 0.5em;
+  }
+
+  .small-action-desc.timegap {
+    flex: 0 0 auto;
+    padding: 0 1em;
+    margin-top: -1.75em;
+    margin-left: -1em;
+    background: var(--secondary);
+    max-width: calc(758px - 1.5em);
+  }
+
+  .post-notice {
+    margin-bottom: 1em;
+    border: none;
+    background: var(--primary-very-low);
+    border-radius: var(--border-radius);
+    margin-left: 1.5em;
+    box-sizing: border-box;
+    padding: 1.5em 2em;
+  }
+
+  .topic-map {
+    margin-left: -1.5em;
+    border: none;
+    border-radius: var(--border-radius);
+    padding: 1.25em;
+
+    section {
+      border: none;
+    }
+    .map:not(.map-collapsed) {
+      .avatars {
+        margin: 0.5em 0;
+      }
+    }
+
+    .participants {
+      margin-bottom: 1.5em;
+      .user {
+        border: none;
+        background: var(--primary-low);
+        padding: 2px 4px;
+        border-radius: var(--border-radius);
+      }
+    }
+  }
+
+  .map:first-of-type .buttons .btn {
+    border: none;
+    border-radius: var(--border-radius);
+  }
+
+  .embedded-posts {
+    border: none;
+    .topic-body {
+      overflow: visible;
+    }
+    .topic-body,
+    .topic-avatar {
+      border: none !important; // overrides some specificity for .bottom
+    }
+    .collapse-down,
+    .collapse-up {
+      display: none;
+    }
+  }
+
+  .timeline-replies {
+    display: flex;
+    align-items: baseline;
+    margin-right: 0.15em;
+  }
+
+  .gap {
+    margin-bottom: 2em;
+  }
+}
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 3238f3e..def3ebb 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -206,7 +206,6 @@ $quote-share-maxwidth: 150px;
 .moderator {
   .regular > .cooked {
     background-color: var(--highlight-low-or-medium);
-    padding: 10px;
   }
   .clearfix > .topic-meta-data > .names {
     span.user-title {
@@ -235,6 +234,53 @@ $quote-share-maxwidth: 150px;
   }
 }
 
+.deleted {
+  .regular > .cooked {
+    background-color: var(--danger-low-mid);
+  }
+  .topic-meta-data:not(.embedded-reply) {
+    color: var(--danger);
+
+    .post-info a,
+    a {
+      color: currentColor;
+    }
+
+    .d-icon {
+      color: currentColor;
+    }
+  }
+  nav.post-controls {
+    color: var(--danger);
+
+    .show-replies,
+    button.reply.create {
+      color: var(--danger);
+      .d-icon {
+        color: var(--danger);
+      }
+    }
+    .widget-button {
+      &:hover {
+        color: currentColor;
+        background: var(--danger-low);
+        .d-icon {
+          color: currentColor;
+        }
+      }
+      &.fade-out {
+        opacity: 1;
+      }
+    }
+    .d-icon {
+      color: var(--danger);
+    }
+  }
+  .post-action {
+    color: var(--danger);
+  }
+}
+
 // we use aside to hold expandable quotes (versus, say, static blockquotes)
 aside.quote {
   margin-top: 1em;
diff --git a/app/assets/stylesheets/common/foundation/color_transformations.scss b/app/assets/stylesheets/common/foundation/color_transformations.scss
index 4b1261d..ca43415 100644
--- a/app/assets/stylesheets/common/foundation/color_transformations.scss
+++ b/app/assets/stylesheets/common/foundation/color_transformations.scss
@@ -23,6 +23,7 @@ $secondary-high: dark-light-diff($secondary, $primary, 30%, -35%) !default;
 $secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%) !default;
 
 //tertiary
+$tertiary-very-low: dark-light-diff($tertiary, $secondary, 90%, -75%) !default;
 $tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%) !default;
 $tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%) !default;

[... diff too long, it was truncated ...]

GitHub sha: aa6daeaa3e70710c0c7c5d153b79731505cfcff0

This commit appears in #13800 which was approved by ZogStriP. It was merged by awesomerobot.