UX: Tweak composer styling (#15117)

* Even margins
* Slightly more muted and unified borders, separators, and icons
* Editor and preview area have same height

app/assets/stylesheets/common/base/compose.scss

@@ -32,7 +32,7 @@
     display: none;
     padding-left: 10px;
     .spinner {
-      margin-left: 5px;
+      margin-left: 8px;
       border-color: var(--secondary);
       border-right-color: transparent;
     }
@@ -63,7 +63,7 @@
     .composer-controls {
       margin-left: auto;
       display: flex;
-      padding-right: 5px;
+      padding-right: 8px;
       .toggle-toolbar {
         display: none;
       }
@@ -94,23 +94,24 @@
 
   .reply-to {
     color: var(--primary-high);
-    margin: 5px 0 10px 0;
+    margin-bottom: 8px;
     display: flex;
     align-items: center;
+    justify-content: flex-end;
 
     .reply-details {
-      max-width: calc(100% - 175px);
       flex: 1 1 auto;
       display: flex;
       align-items: center;
       white-space: nowrap;
+      overflow: auto;
 
       .d-icon {
         color: var(--primary-medium);
       }
     }
     .composer-action-title {
-      display: inline-flex;
+      display: flex;
       align-items: center;
       width: auto;
       max-width: 100%;
@@ -127,7 +128,7 @@
       .topic-link,
       .user-link,
       .post-link {
-        margin-right: 5px;
+        margin-right: 8px;
       }
 
       .username {
@@ -140,16 +141,22 @@
       }
 
       .d-icon {
-        margin-right: 5px;
+        margin-right: 8px;
       }
 
       img.avatar {
         margin-right: 3px;
       }
     }
+
     .composer-controls {
       display: flex;
-      margin-left: auto;
+      margin-left: 8px;
+
+      .d-icon {
+        color: var(--primary-medium);
+      }
+
       .toggle-minimize {
         order: 2;
       }
@@ -189,7 +196,7 @@
     display: flex;
     width: 100%;
     align-items: center;
-    margin-bottom: 5px;
+    margin-bottom: 8px;
     position: relative;
     &.with-preview {
       width: 50%;
@@ -223,7 +230,7 @@
     display: flex;
     flex: 1 0 40%;
     max-width: 40%;
-    margin: 0 0 5px 10px;
+    margin: 0 0 8px 8px;
     @media screen and (max-width: 955px) {
       flex: 1 0 100%;
       margin-left: 0;
@@ -280,12 +287,12 @@
     margin-bottom: 0;
     display: flex;
     input {
-      margin-right: 5px;
+      margin-right: 8px;
     }
   }
 
   #reply-title {
-    margin: 0 0 5px 0;
+    margin: 0 0 8px 0;
     flex-basis: 50%;
     width: unset;
     &:focus {
@@ -315,14 +322,14 @@
   .submit-panel {
     display: flex;
     flex-shrink: 0;
-    margin: 7px 0 3px 0;
+    margin-top: 8px;
   }
 
   .save-or-cancel {
-    flex-basis: 50%;
     display: flex;
     align-items: center;
-    margin-right: auto;
+    flex: 1 1 auto;
+
     .btn-primary {
       flex: 0 0 auto;
     }
@@ -537,7 +544,12 @@ body:not(.ios-safari-composer-hacks) {
 
 .toggle-preview {
   transition: all 0.33s ease-out;
+
   &.active {
     transform: rotate(180deg);
   }
+
+  .d-icon {
+    color: var(--primary-medium);
+  }
 }

app/assets/stylesheets/common/d-editor.scss

@@ -20,7 +20,7 @@
   flex-direction: column;
   background-color: var(--secondary);
   position: relative;
-  border: 1px solid var(--primary-medium);
+  border: 1px solid var(--primary-low);
 
   textarea {
     background: transparent;
@@ -54,9 +54,6 @@
   overflow: auto;
   cursor: default;
   -webkit-overflow-scrolling: touch;
-  // the below gives text little space to overflow without being cropped (e.g., Õ in headings)
-  padding-top: 1em;
-  margin-top: -1em;
 }
 
 .d-editor-input,
@@ -306,8 +303,9 @@
   .d-editor-spacer {
     height: 1em;
     display: inline-block;
-    border-left: 1px solid var(--primary-low-mid);
+    border-left: 1px solid var(--primary-low);
     margin: 0 0.25em;
+
     .mobile-view & {
       display: none;
     }

app/assets/stylesheets/common/select-kit/composer-actions.scss

@@ -6,9 +6,10 @@
         background: none;
         outline: none;
         padding: 0;
-        margin-right: 5px;
+        margin-right: 8px;
         border: 1px solid var(--primary-low);
         min-height: unset;
+
         .d-icon {
           padding: 5px 6px;
         }

app/assets/stylesheets/desktop/compose.scss

@@ -1,10 +1,11 @@
 #reply-control {
   .reply-area {
     margin: 0 auto;
-    padding: 5px 15px;
+    padding: 8px;
     box-sizing: border-box;
-    height: calc(100% - 11px);
+    height: 100%;
     width: 100%;
+
     .submit-panel {
       flex-wrap: wrap;
       align-items: center;
@@ -20,7 +21,7 @@
       .title-and-category {
         flex-wrap: nowrap; // force title and tags on same line for PMs
         .mini-tag-chooser {
-          margin-bottom: 5px; // match title input margin
+          margin-bottom: 8px; // match title input margin
           flex: 0 0 auto;
           margin-left: 1%; // matches margin between category and tag input
           width: 39%;
@@ -55,29 +56,6 @@
   }
 }
 
-.edit-title {
-  --overflow-buffer: 1em;
-  // this gives text little space to overflow without being cropped (e.g., Õ in headings)
-
-  .d-editor-preview-wrapper {
-    margin-top: calc(-41px - var(--overflow-buffer));
-    padding-top: var(--overflow-buffer);
-  }
-  &:not(.private-message) {
-    .d-editor-preview-wrapper {
-      @media screen and (max-width: 955px) {
-        margin-top: calc(-75px - var(--overflow-buffer));
-      }
-    }
-  }
-
-  .with-tags {
-    .d-editor-preview-wrapper {
-      margin-top: calc(-75px - var(--overflow-buffer));
-    }
-  }
-}
-
 .closed {
   .grippie {
     display: none;
@@ -89,12 +67,14 @@
     cursor: row-resize;
     padding: 4px 0;
     background: var(--tertiary);
+    margin-top: -11px;
+
     &:before {
       content: "";
       display: block;
-      width: 27px;
+      width: 24px;
       margin: auto;
-      border-top: 3px double var(--secondary);
+      border-top: 3px double var(--tertiary-medium);
     }
   }
 }
@@ -103,6 +83,7 @@
   .open {
     .grippie {
       padding: 7px 0;
+      margin-top: -17px;
     }
   }
 }
@@ -116,16 +97,16 @@
 .composer-popup {
   box-sizing: border-box;
   position: absolute;
-  width: calc(50% - 30px);
-  max-width: 724px;
-  top: 21px; // grippie height + .reply-to margin-top + .reply-area padding-top
-  bottom: 10px;
+  width: calc(49% - 8px);
+  top: 8px; // .reply-to margin-top + .reply-area padding-top
+  bottom: 8px;
   left: 51%;
   overflow-y: auto;
   z-index: z("composer", "popover");
-  padding: 10px 10px 35px 10px;
+  padding: 8px 8px 32px 8px;
   box-shadow: shadow("dropdown");
   background: var(--highlight-medium);
+
   .hide-preview & {
     z-index: z("composer", "dropdown") + 1;
   }
@@ -282,26 +263,31 @@ a.toggle-preview {
   .profiler-results {
     display: none;
   }
+
   #reply-control {
     &.fullscreen {
       // important needed because of inline styles when height is changed manually with grippie
       height: 100vh !important;
       max-height: 100%; // prevents devices from miscalculating using vh
+      z-index: z("header") + 1;
+
       @supports (--custom: property) {
         height: calc(var(--composer-vh, 1vh) * 100) !important;
       }
-      z-index: z("header") + 1;
+
       .d-editor-preview-wrapper {
         margin-top: 1%;
       }
+
       .reply-to {
         border-bottom: 1px solid var(--primary-low);
-        padding-bottom: 3px;
-        margin: 0;
+        margin-bottom: 0;
+
         .composer-controls {
           margin-right: 0;
         }
       }
+
       .d-editor-textarea-wrapper {
         border: none;
       }