[MM-61684]: Updated the heading element tag(#29841)

e2e-tests/cypress/tests/integration/channels/enterprise/system_console/user_management/user_management_admin_control_spec.js

@@ -107,7 +107,7 @@ describe('User Management', () => {
 
             cy.get('#cancelModalButton').should('be.visible').should('have.text', 'Cancel');
             cy.get('#confirmModalButton').should('be.visible').should('have.text', 'Manage User Settings').click();
-            cy.get('h1#accountSettingsModalLabel').should('be.visible').should('have.text', `Manage ${user.nickname}'s Settings`);
+            cy.get('h2#accountSettingsModalLabel').should('be.visible').should('have.text', `Manage ${user.nickname}'s Settings`);
             cy.get('.adminModeBadge').should('be.visible').should('have.text', 'Admin Mode');
         } else {
             cy.get('.manageUserSettingsBtn').should('not.exist');

webapp/channels/src/components/team_settings_modal/team_settings_modal.tsx

@@ -69,7 +69,10 @@ const TeamSettingsModal = ({onExited, canInviteUsers}: Props) => {
                 id='teamSettingsModalLabel'
                 closeButton={true}
             >
-                <Modal.Title componentClass='h1'>
+                <Modal.Title
+                    componentClass='h2'
+                    className='modal-header__title'
+                >
                     {formatMessage({id: 'team_settings_modal.title', defaultMessage: 'Team Settings'})}
                 </Modal.Title>
             </Modal.Header>

webapp/channels/src/components/user_settings/modal/user_settings_modal.tsx

@@ -351,8 +351,9 @@ class UserSettingsModal extends React.PureComponent<Props, State> {
                     closeButton={true}
                 >
                     <Modal.Title
-                        componentClass='h1'
+                        componentClass='h2'
                         id='accountSettingsModalLabel'
+                        className='modal-header__title'
                     >
                         {modalTitle}
                     </Modal.Title>

webapp/channels/src/sass/components/_settings-modal.scss

@@ -1,13 +1,22 @@
 @use "utils/functions";
 
 .app__body {
-    .settings-modal {
+    .settings-modal {  
         h3 {
             font-size: 18px;
         }
 
         .modal-header {
             border-bottom: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
+
+            &__title {
+                color: var(--center-channel-color);
+                font-family: 'Metropolis', serif;
+                font-size: 22px;
+                font-weight: 600;
+                line-height: 28px;
+                word-break: break-word;
+            }
         }
 
         // Tabs