UX: Chat info area back button + styling tweaks (#24966)

## Back button to navigate out of add-member area

Currently on mobile, once you're in the member area, there is no easy to return to the general settings area, except exiting the settings altogether, which isn't very user friendly. A go-back link solves the problem.

## Styling tweaks

* Removed the background from the leave button
* Added more spacing between the sections on desktop and removed the fixed height for rows

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs

@@ -3,6 +3,7 @@ import { cached, tracked } from "@glimmer/tracking";
 import { fn, hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
+import { LinkTo } from "@ember/routing";
 import { inject as service } from "@ember/service";
 import { modifier } from "ember-modifier";
 import isElementInViewport from "discourse/lib/is-element-in-viewport";
@@ -10,6 +11,7 @@ import DiscourseURL, { userPath } from "discourse/lib/url";
 import autoFocus from "discourse/modifiers/auto-focus";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import icon from "discourse-common/helpers/d-icon";
+import i18n from "discourse-common/helpers/i18n";
 import discourseDebounce from "discourse-common/lib/debounce";
 import I18n from "discourse-i18n";
 import MessageCreator from "discourse/plugins/chat/discourse/components/chat/message-creator";
@@ -22,6 +24,7 @@ export default class ChatRouteChannelInfoMembers extends Component {
   @service chatApi;
   @service modal;
   @service loadingSlider;
+  @service site;
 
   @tracked filter = "";
   @tracked showAddMembers = false;
@@ -122,6 +125,16 @@ export default class ChatRouteChannelInfoMembers extends Component {
   }
 
   <template>
+    {{#if this.site.mobileView}}
+      <LinkTo
+        class="c-back-button"
+        @route="chat.channel.info.settings"
+        @model={{@channel}}
+      >
+        {{icon "chevron-left"}}
+        {{i18n "chat.members_view.back_to_settings"}}
+      </LinkTo>
+    {{/if}}
     {{#if this.showAddMembers}}
       <MessageCreator
         @mode={{this.addMembersMode}}

plugins/chat/assets/stylesheets/common/chat-form.scss

@@ -13,10 +13,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-
+  margin-bottom: 2rem;
-  & + .chat-form__section {
-    margin-top: 1rem;
-  }
 
   &-title {
     font-weight: 700;
@@ -71,7 +68,6 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    min-height: 40px;
     gap: 0.25rem;
   }
 

plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss

@@ -1,3 +1,8 @@
+.c-channel-info {
+  .c-back-button {
+    padding-bottom: 1em;
+  }
+}
 .c-channel-members {
   width: 100%;
 }

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

@@ -1,6 +1,25 @@
-.chat-form__section {
+.chat-form {
-  &-content {
+  &__section {
-    background: var(--primary-very-low);
+    margin-bottom: 0;
-    padding: 1rem;
+
+    &:last-of-type {
+      .chat-form__section-content {
+        background: none;
+        padding-left: 0;
+      }
+    }
+
+    &-content {
+      background: var(--primary-very-low);
+      padding: 1rem;
+    }
+  }
+  &__section-title {
+    .chat-form__section:not(:first-of-type) & {
+      margin-top: 1.5rem;
+    }
+  }
+  &__row-content {
+    min-height: 40px;
   }
 }

plugins/chat/config/locales/client.en.yml

@@ -312,6 +312,7 @@ en:
       members_view:
         filter_placeholder: Find members
         add_member: Add Member
+        back_to_settings: "Back to settings"
 
       about_view:
         associated_topic: Linked topic

plugins/chat/spec/system/channel_members_page_spec.rb

@@ -102,4 +102,14 @@ RSpec.describe "Channel - Info - Members page", type: :system do
       )
     end
   end
+
+  context "when on mobile", mobile: true do
+    it "has a link to the settings" do
+      chat_page.visit_channel_members(channel_1)
+
+      expect(page).to have_css(
+        ".c-back-button[href='/chat/c/#{channel_1.slug}/#{channel_1.id}/info/settings']",
+      )
+    end
+  end
 end