Improving mutli-post select styling

app/assets/javascripts/discourse/templates/selected-posts.hbs

@@ -9,7 +9,7 @@
 {{/if}}
 
 {{#if canDeleteSelected}}
-  {{d-button action="deleteSelected" icon="trash-o" label="topic.multi_select.delete"}}
+  {{d-button action="deleteSelected" icon="trash-o" label="topic.multi_select.delete" class="btn-danger"}}
 {{/if}}
 
 {{#if canSplitTopic}}

app/assets/stylesheets/common/base/topic-admin-menu.scss

@@ -88,3 +88,39 @@
     margin: 0 10px;
   }
 }
+
+// Select posts
+
+.selected-posts {
+  border: 1px solid $tertiary-medium;
+  background-color: $tertiary-low;
+  .btn {
+    border: none;
+    color: $secondary;
+    font-weight: normal;
+    margin-bottom: 10px;
+    &:not(.btn-danger) {
+      background: $tertiary;
+      border-color: $tertiary;
+      &[href] {
+        color: $secondary;
+      }
+      &:hover {
+        color: $secondary;
+        background: $tertiary-high;
+      }
+      &:active {
+        @include linear-gradient(
+          darken($tertiary, 18%),
+          darken($tertiary, 12%)
+        );
+        color: $secondary;
+      }
+    }
+    &[disabled] {
+      text-shadow: 0 1px 0 rgba($primary, 0.2);
+      @include linear-gradient($tertiary, darken($tertiary, 20%));
+      box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33);
+    }
+  }
+}

app/assets/stylesheets/common/base/topic-post.scss

@@ -709,6 +709,43 @@ a.mention-group {
   }
 }
 
+// Select posts
+
+.topic-post {
+  &.selected {
+    article.boxed {
+      .select-posts {
+        button.select-post {
+          background-color: $tertiary;
+          color: $secondary;
+          border-color: $tertiary;
+        }
+      }
+      .topic-body {
+        .contents:after {
+          display: none;
+        }
+      }
+    }
+  }
+  article.boxed {
+    position: relative;
+    .select-posts {
+      position: absolute;
+      right: 5em;
+      z-index: z("base") + 1;
+      top: 0.5em;
+      height: 100px;
+      button {
+        margin-left: 8px;
+        background-color: $primary-low;
+        color: $primary;
+        box-shadow: shadow("dropdown");
+      }
+    }
+  }
+}
+
 @media all and (max-width: 767px) {
   .reply-to-tab {
     span {

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

@@ -780,9 +780,8 @@ $topic-avatar-width: 45px;
   width: 200px;
   position: fixed;
   z-index: z("dropdown");
-  background-color: $tertiary-low;
+  box-shadow: shadow("card");
-  border: 1px solid $tertiary;
+  padding: 0.714em;
-  padding: 5px;
   margin-bottom: 5px;
   right: 10px;
   @include breakpoint(extra-large, min-width) {
@@ -791,7 +790,7 @@ $topic-avatar-width: 45px;
     left: 50%;
   }
   button {
-    width: 180px;
+    width: 100%;
     margin: 4px auto;
     display: inline-block;
     text-align: left;
@@ -817,63 +816,6 @@ $topic-avatar-width: 45px;
       margin-right: 7px;
     }
   }
-  .btn {
-    border: none;
-    color: $secondary;
-    font-weight: normal;
-    margin-bottom: 10px;
-    background: $tertiary-medium;
-    &[href] {
-      color: $secondary;
-    }
-    &:hover {
-      color: $secondary;
-      background: $tertiary-high;
-    }
-    &:active {
-      @include linear-gradient(darken($tertiary, 18%), darken($tertiary, 12%));
-      color: $secondary;
-    }
-    &[disabled] {
-      text-shadow: 0 1px 0 rgba($primary, 0.2);
-      @include linear-gradient($tertiary, darken($tertiary, 20%));
-      box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33);
-    }
-  }
-}
-
-.topic-post {
-  &.selected {
-    article.boxed {
-      .select-posts {
-        button.select-post {
-          background-color: $tertiary-medium;
-          color: $secondary;
-        }
-      }
-      .topic-body {
-        .contents:after {
-          display: none;
-        }
-      }
-    }
-  }
-  article.boxed {
-    position: relative;
-    .select-posts {
-      position: absolute;
-      right: 0;
-      z-index: z("base") + 1;
-      top: 3em;
-      height: 100px;
-      button {
-        margin-left: 8px;
-        background-color: dark-light-choose($primary-low-mid, $secondary-high);
-        border: 1px solid dark-light-choose($primary-medium, $secondary-high);
-        color: $primary;
-      }
-    }
-  }
 }
 
 a.attachment:before {

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

@@ -363,18 +363,7 @@ iframe {
 }
 
 .selected-posts {
-  width: 97%;
   padding: 0.1em 0.7em;
-  background-color: srgb-scale($tertiary, $secondary, 15%);
-  .btn {
-    margin-bottom: 10px;
-    color: $secondary;
-    background: $tertiary;
-    clear: both;
-  }
-  p {
-    clear: both;
-  }
 }
 
 // hide the full set of selection buttons on mobile
@@ -385,18 +374,6 @@ iframe {
 // unhide the simple "select just this post" button
 button.select-post {
   display: inline-block;
-  position: absolute;
-  z-index: z("base") + 1;
-  left: 200px;
-  background-color: srgb-scale($tertiary, $secondary, 60%);
-  color: $secondary;
-  padding: 5px;
-}
-
-.post-select {
-  float: right;
-  margin-right: 20px;
-  margin-top: -20px;
 }
 
 .deleted {