UX: chat composer design update (mobile) (#25789)

plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs

@@ -27,11 +27,20 @@
     {{will-destroy this.cancelPersistDraft}}
   >
     <div class="chat-composer__outer-container">
-      <div class="chat-composer__inner-container">
+      {{#if this.site.mobileView}}
         <ChatComposerDropdown
           @buttons={{this.dropdownButtons}}
           @isDisabled={{this.disabled}}
         />
+      {{/if}}
+
+      <div class="chat-composer__inner-container">
+        {{#if this.site.desktopView}}
+          <ChatComposerDropdown
+            @buttons={{this.dropdownButtons}}
+            @isDisabled={{this.disabled}}
+          />
+        {{/if}}
 
         <div
           class="chat-composer__input-container"
@@ -78,6 +87,21 @@
           <Chat::Composer::Separator />
         {{/if}}
 
+        {{#if this.site.desktopView}}
+          <Chat::Composer::Button
+            @icon="paper-plane"
+            class="-send"
+            title={{i18n "chat.composer.send"}}
+            disabled={{or this.disabled (not this.sendEnabled)}}
+            tabindex={{if this.sendEnabled 0 -1}}
+            {{on "click" this.onSend}}
+            {{on "mousedown" this.trapMouseDown}}
+            {{on "focus" (fn this.computeIsFocused true)}}
+            {{on "blur" (fn this.computeIsFocused false)}}
+          />
+        {{/if}}
+      </div>
+      {{#if this.site.mobileView}}
         <Chat::Composer::Button
           @icon="paper-plane"
           class="-send"
@@ -89,7 +113,7 @@
           {{on "focus" (fn this.computeIsFocused true)}}
           {{on "blur" (fn this.computeIsFocused false)}}
         />
-      </div>
+      {{/if}}
     </div>
   </div>
 

plugins/chat/assets/stylesheets/mobile/chat-composer.scss

@@ -1,7 +1,46 @@
 .chat-composer {
+  &__wrapper {
+    padding-top: 0;
+    background: none;
+  }
+  &__outer-container {
+    padding: 0;
+
+    .chat-composer.is-disabled {
+      opacity: 0.5;
+    }
+  }
+  &__inner-container {
+    min-height: unset;
+    .chat-composer.is-focused & {
+      border-color: var(--primary-low);
+      box-shadow: 0px 0px 2px 0px rgba(10, 173, 255, 0.5);
+    }
+  }
+  &__input-container {
+    padding: 0.15em 0.5em;
+    background: var(--primary-very-low);
+  }
   &__input {
     .ios-device & {
       background-color: transparent;
     }
   }
+  &-button__wrapper {
+    align-self: unset;
+  }
+  &-button.-send {
+    height: 100%;
+    width: auto;
+    align-self: unset;
+    .d-icon {
+      padding: 0.5rem;
+      border-radius: 100%;
+
+      .is-send-enabled.is-focused & {
+        background-color: var(--tertiary-high);
+        color: var(--secondary);
+      }
+    }
+  }
 }