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

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