FEATURE: New style for personal messages (#13800)

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,

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");
     }

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};

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";

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;
+  }
+}

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;

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;
 $tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%) !default;

app/assets/stylesheets/desktop/topic-post.scss

@@ -523,12 +523,6 @@ video {
   position: relative;
 }
 
-.deleted {
-  .topic-body {
-    background-color: var(--danger-low-mid);
-  }
-}
-
 .post-select {
   float: right;
   margin-right: 20px;

app/assets/stylesheets/mobile/_index.scss

@@ -21,6 +21,7 @@
 @import "login";
 @import "menu-panel";
 @import "modal";
+@import "personal-message";
 @import "push-notifications-mobile";
 @import "reviewables";
 @import "ring";

app/assets/stylesheets/mobile/personal-message.scss

@@ -0,0 +1,58 @@
+.archetype-private_message {
+  .topic-body .cooked {
+    margin-top: 0.5em;
+    margin-left: 0;
+    padding: 1.5em 1em;
+    border-radius: 0.75em var(--border-radius) var(--border-radius)
+      var(--border-radius);
+  }
+  .topic-avatar {
+    margin-bottom: -1em; // creates bubble overlap
+  }
+  .boxed .contents {
+    padding: 0;
+  }
+
+  .topic-post {
+    margin: 0 0 1em;
+    article {
+      border-top: none;
+    }
+  }
+
+  .topic-body {
+    flex: 1 1 auto;
+  }
+
+  .topic-map {
+    padding: 1em 0.5em;
+    margin-left: 0;
+  }
+
+  .post-notice {
+    padding: 1em;
+    margin: 0 0 1em;
+    width: 100%;
+  }
+
+  .small-action {
+    margin-left: 0;
+  }
+
+  .small-action-desc.timegap {
+    margin-left: 0;
+    padding: 1em 1em 1em 0;
+  }
+
+  .small-action:not(.time-gap) {
+    padding: 1em;
+  }
+
+  .topic-meta-data .names .first.staff {
+    flex-basis: 100%;
+    & + .second,
+    & + .second + .user-title {
+      flex-basis: unset;
+    }
+  }
+}

app/assets/stylesheets/mobile/topic-post.scss

@@ -87,11 +87,7 @@ span.badge-posts {
         &.expand-post {
           margin: 10px 0 10px 0;
         }
-        &.reply {
-          .d-icon {
-            color: var(--primary-high);
-          }
-        }
+
         &.has-like {
           .d-icon {
             color: var(--love);
@@ -126,6 +122,10 @@ span.badge-posts {
   }
 }
 
+nav.post-controls button.reply .d-icon {
+  color: var(--primary-high);
+}
+
 .post-admin-menu {
   bottom: -50px;
   left: 135px;
@@ -337,12 +337,6 @@ button.select-post {
   display: inline-block;
 }
 
-.deleted {
-  .topic-body {
-    background-color: var(--danger-low-mid);
-  }
-}
-
 .deleted-user-avatar {
   font-size: $font-up-5;
 }