Composer restyle

* composer restyle, some input normalization

* style adjustments: spacing, preview background, colors

* small spacing adjustments, removing default iOS input appearance, fixing merge

* small width adjustment

* fixing mobile link modal for small devices

* FIX: more resilient allowInitiatlValueMutation implementation

* Build scrollMap only on scroll.

* FIX: pick date and time was not reseting state

* FIX: removes auto sizing and touchstart support for now

* Revert "FIX: reflects discourse icons naming scheme s/d-icon-*/d-*"

This reverts commit b5ed980235.

* tweak icon-library generation

* FIX: regression preventing to set number of hours before closing

This commit also adds a full test suite for editing topic timer.

* FIX: makes allowInitialValueMutation more restrictive

* FIX: invite-list expects initial value mutation

* fixing tag input spacing

* minor input cleanup

* bump onebox version

* FIX: avoids test failing at some times of the day

* FIX: various issues when editing category permissions

This commit also adds multiple tests

app/assets/javascripts/discourse/components/emoji-picker.js.es6

@@ -475,8 +475,8 @@ export default Ember.Component.extend({
         } else {
           let previewInputOffset = $(".d-editor-input").offset();
           let replyControlOffset = $("#reply-control").offset() || {left: 0};
-          let left = previewInputOffset.left - replyControlOffset.left;
+          let left = previewInputOffset.left;
-          desktopPositioning({left, bottom: $("#reply-control").height() - 48});
+          desktopPositioning({left, bottom: $("#reply-control").height() - 45});
         }
       }
     }

app/assets/javascripts/discourse/templates/components/composer-toggles.hbs

@@ -1,12 +1,14 @@
-{{#if site.mobileView}}
+<div class="composer-controls">
-  {{flat-button
+  {{#if site.mobileView}}
-    class="toggle-toolbar"
+    {{flat-button
-    icon="bars"
+      class="toggle-toolbar"
-    action=toggleToolbar}}
+      icon="bars"
-{{/if}}
+      action=toggleToolbar}}
+  {{/if}}
 
-{{flat-button
+  {{flat-button
-  class="toggler"
+    class="toggler"
-  icon=toggleIcon
+    icon=toggleIcon
-  action=toggleComposer
+    action=toggleComposer
-  title='composer.toggler'}}
+    title='composer.toggler'}}
+</div>

app/assets/javascripts/discourse/templates/composer.hbs

@@ -23,34 +23,35 @@
                           messageCount=messageCount
                           addLinkLookup="addLinkLookup"}}
 
-      {{composer-toggles composeState=model.composeState
-                         toggleComposer=(action "toggle")
-                         toggleToolbar=(action "toggleToolbar")}}
-
       {{#if model.viewOpen}}
  
-        <div class='reply-area {{if canEditTags "with-tags"}}'>
+        <div class="reply-area {{if canEditTags 'with-tags'}}">
 
           <div class='composer-fields'>
 
             {{plugin-outlet name="composer-open" args=(hash model=model)}}
 
             <div class='reply-to'>
-              {{{model.actionTitle}}}
+              <div class="reply-details">
+                {{{model.actionTitle}}}
 
-              {{#unless site.mobileView}}
+                {{#unless site.mobileView}}
-                {{#if whisperOrUnlistTopicText}}
+                  {{#if whisperOrUnlistTopicText}}
-                  <span class='whisper'>({{whisperOrUnlistTopicText}})</span>
+                    <span class='whisper'>({{whisperOrUnlistTopicText}})</span>
-                {{/if}}
+                  {{/if}}
-              {{/unless}}
+                {{/unless}}
 
-              {{#if canEdit}}
+                {{#if canEdit}}
-                {{#if showEditReason}}
+                  {{#if showEditReason}}
-                  {{text-field autofocus="true" value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
+                    {{text-field autofocus="true" value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
-                {{else}}
+                  {{else}}
-                  <a {{action "displayEditReason"}} class="display-edit-reason">{{i18n 'composer.show_edit_reason'}}</a>
+                    <a {{action "displayEditReason"}} class="display-edit-reason">{{i18n 'composer.show_edit_reason'}}</a>
+                  {{/if}}
                 {{/if}}
-              {{/if}}
+              </div>
+              {{composer-toggles composeState=model.composeState
+                        toggleComposer=(action "toggle")
+                        toggleToolbar=(action "toggleToolbar")}}
             </div>
 
             {{#if model.canEditTitle}}
@@ -70,7 +71,7 @@
                 </div>
               {{/if}}
 
-              <div class="title-and-category">
+              <div class="title-and-category {{if showPreview 'with-preview'}}">
 
                 {{composer-title composer=model lastValidatedAt=lastValidatedAt focusTarget=focusTarget}}
 
@@ -83,6 +84,10 @@
                     {{d-button action="showOptions" label="topic.options"}}
                   {{/if}}
                 {{/if}}
+                {{#if canEditTags}}
+                  {{tag-chooser tags=model.tags tabIndex="4" categoryId=model.categoryId}}
+                {{/if}}
+
 
               </div>
             {{/if}}
@@ -111,12 +116,9 @@
                             showUploadSelector="showUploadSelector"
                             afterRefresh="afterRefresh"}}
 
-          <div class='submit-panel {{if canEditTags "with-tags"}}'>
+          <div class='submit-panel'>
             {{plugin-outlet name="composer-fields-below" args=(hash model=model)}}
 
-            {{#if canEditTags}}
-              {{tag-chooser tags=model.tags tabIndex="4" categoryId=model.categoryId}}
-            {{/if}}
      
             <div class='save-or-cancel'>
               {{composer-save-button action=(action "save")
@@ -180,6 +182,11 @@
             {{i18n "composer.saved_draft"}}
           {{/if}}
         </div>
+
+        {{composer-toggles composeState=model.composeState
+          toggleComposer=(action "toggle")
+          toggleToolbar=(action "toggleToolbar")}}
+
       {{/if}}
 
   {{/if}}

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

@@ -1,27 +1,27 @@
 #reply-control {
-  background-color: $primary-low;
-  border-top: 1px solid $primary-low;
-  bottom: 0;
-  height: 0;
   position: fixed;
   display: flex;
   flex-direction: column;
-  transition: height 250ms ease;
+  bottom: 0;
-  width: 100%;
+  height: 0;
+  right: 0;
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+
+  max-width: 1400px;
+  @media screen and (max-width: 1200px) {
+    width: 100%;
+    min-width: 0;
+  }
   z-index: 999;
+  transition: height 250ms ease, background 250ms ease;
+  background-color: $secondary;
+  box-shadow: 0 -2px 40px rgba($primary, .12);
 
-  .toggler,
+  .reply-area {
-  .toggle-toolbar {
+    display: flex;
-    position: absolute;
+    flex-direction: column;
-    color: $primary-medium;
-  }
-
-  .toggler {
-    right: 1px;
-  }
-
-  .toggle-toolbar {
-    right: 30px;
   }
 
   .saving-text,
@@ -30,9 +30,11 @@
     padding-left: 10px;
     .spinner {
       margin-left: 5px;
+      border-color: $secondary;
+      border-right-color: transparent;
     }
     i {
-      color: $primary-medium;
+      color: $secondary;
     }
   }
 
@@ -50,7 +52,21 @@
   &.draft,
   &.saving {
     height: 40px !important;
-    justify-content: center;
+    align-items: center;
+    background: $tertiary;
+    color: $secondary;
+    flex-direction: row;
+    .composer-controls {
+      margin-left: auto;
+      display: flex;
+      padding-right: 5px;
+      .toggle-toolbar {
+        display: none;
+      }
+      .d-icon {
+        opacity: 1;
+      }
+    }
   }
 
   &.draft {
@@ -62,34 +78,38 @@
     .grippie, .saving-text {
       display: none;
     }
-    .toggler {
-      right: 10px;
-    }
   }
 
   &.saving .saving-text {
     display: flex;
   }
 
-  input[type="text"] {
-    border: 0;
-  }
-
   .reply-to {
-    color: $tertiary;
+    color: $primary-medium;
-    margin-bottom: 10px;
+    margin: 5px 0 10px 0;
-    overflow: hidden;
+    display: flex;
-    text-overflow: ellipsis;
+    align-items: center;
-    white-space: nowrap;
     i {
       color: $primary-medium;
     }
+    .reply-details {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: calc(100% - 100px);
+    }
+    .composer-controls {
+      margin-left: auto;
+      margin-right: -5px;
+      button {
+        padding: 0 8px;
+      }
+    }
   }
 
   .whisper,
   .display-edit-reason {
     font-style: italic;
-    color: $primary-medium !important;
   }
 
   #edit-reason {
@@ -99,14 +119,52 @@
   .user-selector,
   .title-and-category {
     display: flex;
+    flex-wrap: wrap;
+    width: 100%;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
     position: relative;
+    &.with-preview {
+      width: 50%;
+    }
   }
 
   .title-input {
     position: relative;
-    .popup-tip {margin-top: -30px;}
+    display: flex;
+    flex: 1 1 50%;
+
+    input {
+      flex-grow: 1;
+    }
+  }
+
+  .with-tags {
+    .title-input {
+      flex: 1 1 100%;
+    }
+  }
+
+  .category-input {
+    display: flex;
+    flex: 1 0 35%;
+    margin: 0 0 5px 10px;
+    @media screen and (max-width: 955px) {
+      flex: 1 0 100%;
+      margin-left: 0;
+    }
+    .category-chooser {
+      display: flex;
+      flex: 1;
+      width: auto;
+    }
+  }
+
+  .with-tags {
+    .category-input {
+      flex-basis: 25%;
+      margin-left: 0;
+    }
   }
 
   .add-warning {
@@ -114,14 +172,25 @@
   }
 
   #reply-title {
-    width: 400px;
     padding: 6px 10px;
-    margin: 0 10px 0 0;
+    margin: 0 0 5px 0;
+    flex-basis: 50%;
   }
 
   .tag-chooser {
-    margin: 5px 0 0 0;
+    flex: 1 1 25%;
-    flex-basis: 30%;
+    margin: 0 0 5px 10px;
+    border: 1px solid $primary-medium;
+    @media all and (max-width: 900px) {
+      margin: 0;
+      flex: 1 1 100%;
+    }
+    .select2-choices {
+      border: none;
+    }
+    &.select2-dropdown-open, &.select2-container-active {
+      border-color: $tertiary;
+    }
   }
 
   .wmd-controls {
@@ -133,14 +202,28 @@
   }
 
   .d-editor-button-bar .btn {
-    padding: 0 6px;
+    padding: 3px 8px;
+    @media all and (max-width: 800px) {
+      padding: 5px;
+    }
+  }
+
+  .submit-panel {
+    display: flex;
+    flex-shrink: 0;
+    margin-top: 10px;
   }
 
   .save-or-cancel {
-    margin-top: 5px;
     flex-basis: 50%;
     display: flex;
     align-items: center;
+    button {
+      flex: 0 0 auto;
+    }
+    .cancel {
+      margin-left: 10px;
+    }
     #draft-status,
     #file-uploading {
       margin-left: 25px;
@@ -162,22 +245,12 @@
     }
   }
 
-  .with-tags {
-    .composer-bottom-right {
-      flex-basis: 60%;
-      margin-left: auto;
-    }
-    .save-or-cancel {
-      order: 3;
-    }
-  }
-
   .create {
     margin-right: 5px;
   }
 
   #draft-status, #file-uploading {
-    color: dark-light-choose($primary-medium, $secondary-medium);
+    color: $primary-medium;
   }
 }
 
@@ -212,7 +285,7 @@
         text-overflow: ellipsis;
 
         span.username {
-          color: darken($primary, 40%);
+          color: $primary;
         }
         span.name {
           font-size: 11px;
@@ -260,8 +333,8 @@ div.ac-wrap {
   overflow: auto;
   max-height: 150px;
   background-color: $secondary;
-  border: 1px solid $primary-low;
+  border: 1px solid $primary-medium;
-  padding: 5px 4px 1px 4px;
+  padding: 5px 4px 1px 10px;
   div.item {
     float: left;
     margin-bottom: 4px;
@@ -294,7 +367,7 @@ div.ac-wrap {
 
 .future-date-input {
   .examples {
-    color: lighten($primary, 40%);
+    color: $primary-medium;
   }
 }
 

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

@@ -185,37 +185,33 @@ input {
   &[type="search"],
   &[type="tel"],
   &[type="color"] {
+    @include appearance-none;
     display: inline-block;
     height: 18px;
-    padding: 4px;
+    padding: 4px 10px;
     margin-bottom: 9px;
-    font-size: 0.929em;
+    font-size:  0.929em;
-    line-height: 18px;
+    line-height: 1.25;
     color: $primary;
     background-color: $secondary;
-    border: 1px solid $primary-low;
+    border: 1px solid $primary-medium;
-    border-radius: 3px;
+    border-radius: 0;
-    box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-
     &:focus {
       border-color: $tertiary;
+      box-shadow: $tertiary 0px 0px 6px 0px;
       outline: 0;
-      box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
     }
   }
 }
 
 textarea {
   height: auto;
-  background-color:$secondary;
+  background-color: $secondary;
-  border: 1px solid $primary-low;
+  border: 1px solid $primary-medium;
-  border-radius: 3px;
-  box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-
   &:focus {
     border-color: $tertiary;
+    box-shadow: $tertiary 0px 0px 6px 0px;    
     outline: 0;
-    box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
   }
 }
 
@@ -316,10 +312,6 @@ select {
   }
 }
 
-.d-editor-input {
-  resize: none;
-}
-
 .avatar-wrapper {
   background-color: $secondary;
   display: inline-block;

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

@@ -202,7 +202,7 @@ header .discourse-tag {color: $tag-color }
   width: 100%;
   margin: 5px 0;
   ul.select2-choices {
-    max-height: 40px;
+    max-height: 30px;
     overflow-y: auto;
   }
 }

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

@@ -1,6 +1,7 @@
 .d-editor-container {
   display: flex;
   flex-grow: 1;
+  max-width: 100%;
 }
 
 .d-editor-overlay {
@@ -23,6 +24,9 @@
 
 .d-editor .d-editor-modal {
   min-width: 400px;
+  @media screen and (max-width: 424px) {
+    min-width: 300px;
+  }
   position: absolute;
   background-color: $secondary;
   border: 1px solid $primary-low;
@@ -30,7 +34,7 @@
   top: 25px;
 
   input {
-    width: 98%;
+    width: 95%;
   }
   h3 {
     margin-bottom: 0.5em;
@@ -47,11 +51,20 @@
   flex-direction: column;
   background-color: $secondary;
   position: relative;
+  border: 1px solid $primary-medium;
+  
+  textarea {
+    border-top: 1px solid $primary-low;
+    &:focus {
+      border-top: 1px solid $primary-low;      
+    }
+  }
+
 }
 
 .d-editor-preview-wrapper {
-  margin-left: 5px;
+  max-width: 49%;
-  max-width: 50%;
+  margin-left: 1%;
   display: flex;
   flex-direction: column;
   background: $secondary;
@@ -60,12 +73,13 @@
 .d-editor-button-bar {
   display: flex;
   align-items: center;
-  border-bottom: 2px solid $primary-low;
+  border-bottom: none;
   min-height: 30px;
+  padding-left: 3px;
 
   button {
     background-color: transparent;
-    color: $primary-medium;
+    color: $primary-high;
   }
 
   .btn:not(.no-text) {
@@ -91,7 +105,6 @@
 
 .d-editor-input,
 .d-editor-preview {
-  box-shadow: none;
   box-sizing: border-box;
   height: 100%;
   margin: 0;
@@ -99,6 +112,8 @@
   width: 100%;
   word-wrap: break-word;
   flex-grow: 1;
+  -webkit-appearance: none;
+  border-radius: 0;  
   &:focus {
     box-shadow: none;
     border: 0;
@@ -113,16 +128,15 @@
 
 .d-editor-input {
   border: 0;
-  padding: 7px;
+  padding: 10px;
   overflow-x: hidden;
+  resize: none;  
 }
 
 .d-editor-preview {
-  border: 1px dashed $primary-low;
   overflow: auto;
   cursor: default;
-  background-color: $secondary;
+  padding: 0 10px;
-  padding: 7px;
 }
 
 .composing-whisper .d-editor-preview {

app/assets/stylesheets/common/foundation/mixins.scss

@@ -110,3 +110,10 @@
 	-webkit-transform: $transforms;
             transform: $transforms;
 }
+
+
+@mixin appearance-none() { // resets default browser styles
+  -webkit-appearance: none;
+  -moz-appearance:    none;
+  appearance:         none;
+}

app/assets/stylesheets/common/select-kit/combo-box.scss

@@ -1,6 +1,5 @@
 .select-box-kit, .select-kit {
   &.combo-box {
-    border-radius: 3px;
 
     .select-box-kit-body, .select-kit-body {
       width: 100%;
@@ -14,7 +13,7 @@
 
     .select-box-kit-filter, .select-kit-filter {
       line-height: 18px;
-      padding: 5px 10px;
+      padding: 6px 10px;
       border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
       border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
 
@@ -25,16 +24,14 @@
 
     .select-box-kit-header, .select-kit-header {
       background: $secondary;
-      border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+      border: 1px solid $primary-medium;
-      border-radius: 3px;
+      padding: 6px 10px;
-      padding: 5px 10px;
       font-weight: 500;
-      font-size: 1em;
+      font-size: 0.929em;
       line-height: 18px;
 
       &.is-focused {
         border: 1px solid $tertiary;
-        border-radius: 3px;
         -webkit-box-shadow: $tertiary 0px 0px 6px 0px;
                 box-shadow: $tertiary 0px 0px 6px 0px;
       }
@@ -59,13 +56,11 @@
       .select-kit-wrapper {
         display: block;
         border: 1px solid $tertiary;
-        border-radius: 3px;
         -webkit-box-shadow: $tertiary 0px 0px 6px 0px;
                 box-shadow: $tertiary 0px 0px 6px 0px;
       }
 
       .select-kit-header {
-        border-radius: 3px 3px 0 0;
         border-color: transparent;
         -webkit-box-shadow: none;
                 box-shadow: none;

app/assets/stylesheets/common/select-kit/legacy-combo-box.scss

@@ -36,7 +36,6 @@
 }
 
 .select2-container {
-  border-radius: 3px;
   border: 1px solid $primary-low;
   min-width: 200px;
 

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

@@ -71,7 +71,6 @@
   }
 
   .select-box-kit-header, .select-kit-header {
-    border: 1px solid transparent;
     box-sizing: border-box;
     overflow: hidden;
     -webkit-transition: all .25s;
@@ -270,6 +269,5 @@
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
     pointer-events: none;
-    border: 1px solid transparent;
   }
 }

app/assets/stylesheets/desktop/compose.scss

@@ -1,3 +1,67 @@
+#reply-control {
+  .reply-area {
+    max-width: 1500px;
+    margin: 0 auto;
+    padding: 5px 15px;
+    box-sizing: border-box;
+    height: calc(100% - 11px);
+    width: 100%;
+    .submit-panel {
+      flex-wrap: wrap;
+      align-items: center;
+    }
+  }
+}
+
+.category-input {
+  margin-left: 10px;  
+}
+
+.edit-title {
+  .d-editor-preview {
+    margin-top: -43px;
+  }
+  &:not(.private-message) {
+    .d-editor-preview {
+      @media screen and (max-width: 955px) {
+        margin-top: -79px;
+      }
+    }
+  }
+  
+  
+  
+  .with-tags {
+    .d-editor-preview {
+      margin-top: -79px;
+      @media screen and (max-width: 900px) {
+        margin-top: -116px;
+      }
+    }
+  }
+}
+
+.closed {
+  .grippie {
+    display: none;
+  }
+}
+
+.open {
+  .grippie {
+    cursor: row-resize;
+    padding: 4px 0px;
+    background: $tertiary;
+    &:before {
+      content: '';
+      display: block;
+      width: 27px;
+      margin: auto;
+      border-top: 3px double $secondary;
+    }
+  }
+}
+
 .composer-popup-container {
   max-width: 1500px;
   margin-left: auto;
@@ -6,15 +70,11 @@
 
 .composer-popup {
   position: absolute;
-  width: calc(50% - 55px);
+  width: calc(50% - 45px);
   max-width: 724px;
-  top: 16px;
+  top: 20px;
-  bottom: 16px;
+  bottom: 10px;
-  left: 50%;
+  left: 51%;
-  // The composer goes off-center at 1550px
-  @media (min-width: 1550px) {
-    left: calc(50%);
-  }
   overflow-y: auto;
   z-index: 110;
   padding: 10px 10px 35px 10px;
@@ -68,8 +128,10 @@
   }
 }
 
-.d-editor-container {
+.composer-controls {
-  max-width: 100%;
+  .d-chevron-down {
+    vertical-align: text-top;
+  }
 }
 
 .custom-body {
@@ -110,21 +172,11 @@
   width: calc(50% - 65px);
 }
 
-#reply-control {
+.composer-bottom-right {
-  .reply-area {
+  a {
-    max-width: 1500px;
+    color: $primary-medium;
-    margin: 0 auto;
+    &:hover {
-    padding: 0 10px 10px 10px;
+      color: $tertiary;
-    box-sizing: border-box;
-    height: calc(100% - 11px);
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    .submit-panel {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      flex-shrink: 0;
     }
   }
 }

app/assets/stylesheets/desktop/discourse.scss

@@ -17,19 +17,6 @@ header {
   height: 100%;
 }
 
-.grippie {
-  cursor: row-resize;
-  padding: 4px 0px;
-
-  &:before {
-    content: '';
-    display: block;
-    width: 27px;
-    margin: auto;
-    border-top: 3px double dark-light-choose($primary-low-mid, $secondary-medium);
-  }
-}
-
 .topic-statuses {
   float: left;
   padding: 0;
@@ -157,7 +144,6 @@ input {
       position: relative;
       margin-bottom: 0;
       vertical-align: middle;
-      border-radius: 0 3px 3px 0;
 
       &:focus {
         z-index: 2;

app/assets/stylesheets/desktop/topic.scss

@@ -212,11 +212,11 @@ and (min-width: 400px) {
   }
 
   #topic-progress-wrapper {
-    right: 160px;
+    right: 19vw;
   }
 
   #topic-progress-wrapper.docked {
-    right: 152px;
+    right: 19vw;
   }
 
   #topic-footer-main-buttons {

app/assets/stylesheets/mobile/compose.scss

@@ -9,9 +9,10 @@
 #reply-control {
   z-index: 1002; //d-header is 1001
     .reply-area {
-      padding: 0 5px;
+      padding: 0 10px;
-      display: flex;
+      @media screen and (max-width: 374px) {
-      flex-direction: column;
+        padding: 0 5px;
+      }
       flex-grow: 1;
     }
 
@@ -23,13 +24,14 @@
     }
 
     .reply-to {
-      margin: 5px;
+      margin: 5px 0;
-      max-width: calc(100% - 60px);
     }
 
-    .toggle-toolbar,
     .toggler {
-      top: 2px;
+      margin-left: -5px;
+      .d-icon-chevron-down {
+        vertical-align: text-top;
+      }
     }
 
     &.draft {
@@ -37,10 +39,12 @@
       .toggler {
         top: 8px;
       }
-    }
+      .draft-text {
-
+        width: calc(100% - 40px);
-    .title-input {
+        white-space: nowrap;
-      margin-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
 
     #reply-title {
@@ -56,14 +60,17 @@
 
     .submit-panel {
       margin-bottom: 5px;
-      display: flex;
       align-items: baseline;
-      flex-shrink: 0;
       .save-or-cancel {
-        flex-basis: 69%;
+        flex: 1 1 auto;
+        #draft-status,
+        #file-uploading {
+          margin-left: 15px;
+        }
       }
       .composer-bottom-right {
-        flex-basis: 30%;
+        margin-left: auto;
+        flex: 1 1 auto;
       }
     }
 
@@ -126,6 +133,7 @@
     .user-selector {
       flex-direction: column;
       margin: 0;
+      min-height: 75px;
     }
 
     .title-input,
@@ -138,10 +146,5 @@
     .add-warning {
       margin: 5px 0 5px 5px;
     }
-
-    #draft-status {
-      color: $primary-medium;
-    }
-
   }
 

app/assets/stylesheets/vendor/select2.scss

@@ -129,7 +129,6 @@ Version: @@ver@@ Timestamp: @@timestamp@@
     border: 1px solid #aaa;
     border-top: 0;
 
-    border-radius: 0 0 4px 4px;
 
     -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
             box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
@@ -140,7 +139,6 @@ Version: @@ver@@ Timestamp: @@timestamp@@
     border-top: 1px solid #aaa;
     border-bottom: 0;
 
-    border-radius: 4px 4px 0 0;
 
     -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
             box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
@@ -446,11 +444,11 @@ html[dir="rtl"] .select2-container-multi .select2-choices li
 }
 
 .select2-container-multi .select2-choices .select2-search-field input {
-    padding: 5px;
+    padding: 5px 10px;
     margin: 1px 0;
 
     font-family: sans-serif;
-    font-size: 100%;
+    font-size: 0.929em;
     color: #666;
     outline: 0;
     border: 0;

app/assets/stylesheets/wizard.scss

@@ -4,7 +4,7 @@
 @import "vendor/sweetalert";
 @import "common/foundation/colors";
 @import "common/foundation/variables";
-@import "common/select-kit/*";
+@import "common/select-box-kit/*";
 
 body.wizard {
   background-color: #fff;
@@ -401,7 +401,6 @@ body.wizard {
     textarea {
       padding: 3px;
       border: 4px solid red;
-      border-radius: 3px;
     }
   }
 }
@@ -419,7 +418,6 @@ body.wizard {
     input {
       padding: 3px;
       border: 4px solid red;
-      border-radius: 3px;
     }
   }
 }

plugins/discourse-presence/assets/stylesheets/presence.scss

@@ -1,13 +1,10 @@
 .presence-users{
-  
+  background-color: $secondary;
-  background-color: $primary-low;
-
   color: $primary-medium;
   padding: 0px 5px;
   position: absolute;
-  top: 8px;
+  top: 18px;
-  right: 30px;
+  right: 35px;
-
 
   .wave {
 
@@ -37,8 +34,8 @@
 }
 
 .mobile-view .presence-users{
-  top: 5px;
+  top: 3px;
-  right: 60px;
+  right: 54px;
   .description{
     display:none;
   }