MM-28014 Improve Channel Intros (#26413)

* added SVGs for channel intros and initial changes to styles and layout

* cleaned up svgs, made theme use theme colors

* updated action buttons in channel intro

* adding mobile view changes

* fixed lint issues

* fixed test issues

* fixed test and i18n issues

* updates to action button styles and reworked grouping of buttons

* updated off-topic and town square intro to remove the add members button

* updated default add members text and groups text

* fixed lint issue on action button css

* imported action button in module scss instead

* fixes from code review

* changed avatar tokens not to be so custom

* fixed type issue with avatar component

* fixed single quote issue with tests

* Revert "changed avatar tokens not to be so custom"

This reverts commit 700f172f0d537b5454d85c5fad5e9aa3f76c26b3.

* Revert "fixed type issue with avatar component"

This reverts commit 5ad1092ba49a10c11ab78247aa5c231e24ed722a.

* fixed avatar types and order of sizes

e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/keyboard_shortcuts_1_spec.js

@@ -59,13 +59,13 @@ describe('Keyboard Shortcuts', () => {
             });
 
             // # Verify that we are in the test channel
-            cy.get('#channelIntro').contains('.channel-intro__title', `Beginning of ${testChannel.display_name}`).should('be.visible');
+            cy.get('#channelIntro').contains('.channel-intro__title', `${testChannel.display_name}`).should('be.visible');
 
             // # Verify that the right channel is displayed in LHS
             cy.uiGetLhsSection('CHANNELS').findByText(testChannel.display_name).should('be.visible');
 
             // # Verify that the current user(sysadmin) created the channel
-            cy.get('#channelIntro').contains('.channel-intro__content', `This is the start of the ${testChannel.display_name} channel, created by sysadmin`).should('be.visible');
+            cy.get('#channelIntro').contains('.channel-intro__created', 'Public channel created by sysadmin').should('be.visible');
         });
     });
 

e2e-tests/cypress/tests/integration/channels/messaging/ctrl_cmd_k_open_dm_with_mouse_spec.js

@@ -51,10 +51,10 @@ describe('Messaging', () => {
 
         // # Verify that we are in a DM channel
         cy.get('#channelIntro').should('be.visible').within(() => {
-            cy.get('.channel-intro-profile').
+            cy.get('.channel-intro__title').
                 should('be.visible').
                 and('have.text', secondUser.username);
-            cy.get('.channel-intro-text').
+            cy.get('.channel-intro__text').
                 should('be.visible').
                 and('contain', `This is the start of your direct message history with ${secondUser.username}.`).
                 and('contain', 'Direct messages and files shared here are not shown to people outside this area.');

e2e-tests/cypress/tests/integration/channels/messaging/group_message_spec.js

@@ -137,8 +137,8 @@ describe('Group Message', () => {
         });
 
         // * Assert that intro message includes the right copy
-        const expectedChannelInfo = `This is the start of your group message history with ${sortedParticipants[0].username}, ${sortedParticipants[1].username}.Messages and files shared here are not shown to people outside this area.`;
-        cy.get('#channelIntro p.channel-intro-text').first().should('contain', expectedChannelInfo);
+        const expectedChannelInfo = 'This is the start of your group message history with these teammates.';
+        cy.get('#channelIntro p.channel-intro__text').first().should('contain', expectedChannelInfo);
         cy.get('#channelIntro .profile-icon').should('have.length', '2');
 
         cy.location().then((loc) => {

e2e-tests/cypress/tests/integration/channels/messaging/send_message_via_profile_popover_spec.js

@@ -95,12 +95,12 @@ function verifyDMChannelViaSendMessage(postId, team, channel, profileSelector, u
     // * Verify that it redirects into the DM channel and matches channel intro
     cy.get('#channelIntro').should('be.visible').within(() => {
         cy.url().should('include', `/${team.name}/messages/@${user.username}`);
-        cy.get('.channel-intro-profile').
+        cy.get('.channel-intro__title').
             should('be.visible').
             and('have.text', user.username);
-        cy.get('.channel-intro-text').
+        cy.get('.channel-intro__text').
             should('be.visible').
             and('contain', `This is the start of your direct message history with ${user.username}.`).
-            and('contain', 'Direct messages and files shared here are not shown to people outside this area.');
+            and('contain', 'Messages and files shared here are not shown to anyone else.');
     });
 }

e2e-tests/cypress/tests/integration/channels/multi_team_and_dm/gm_add_user_spec.js

@@ -136,7 +136,7 @@ describe('Multi-user group messages', () => {
         // * Original messages does not exist
         cy.contains('.post-message__text', 'historical').should('not.exist');
 
-        cy.contains('p.channel-intro-text span', 'This is the start of your group message history with');
+        cy.contains('p.channel-intro__text', 'This is the start of your group message history with');
 
         // * New user is added to the GM
         cy.get('.member-rhs__trigger').click();