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,7 @@
           <Chat::Composer::Separator />
         {{/if}}
 
+        {{#if this.site.desktopView}}
           <Chat::Composer::Button
             @icon="paper-plane"
             class="-send"
@@ -89,7 +99,21 @@
             {{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"
+          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>
   </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);
+      }
+    }
+  }
 }