MM-64690 - fix channel name input label (#32157)

* MM-64690 - fix channel name input label

* add correct font-weight

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/channel_settings_modal/channel_settings_info_tab.tsx

@@ -344,12 +344,11 @@ function ChannelSettingsInfoTab({
             />
 
             {/* Channel Name Section*/}
-            <label
+            <div
-                htmlFor='input_channel-settings-name'
+                className='ChannelSettingsModal__infoTabTitle'
-                className='Input_legend'
             >
-                {formatMessage({id: 'channel_settings.label.name', defaultMessage: 'Channel Name'})}
+                {formatMessage({id: 'channel_settings.channel_info_tab.name', defaultMessage: 'Channel Info'})}
-            </label>
+            </div>
             <ChannelNameFormField
                 value={displayName}
                 name='channel-settings-name'

webapp/channels/src/components/channel_settings_modal/channel_settings_modal.scss

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 .ChannelSettingsModal {
-    label.Input_legend {
+    &__infoTabTitle {
         margin-bottom: 4px;
         color: var(--center-channel-color);
         font-family: Metropolis, sans-serif;

webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap

@@ -72,7 +72,10 @@ Object {
                 >
                   <label
                     class="Input_legend"
-                  />
+                    for="input_name"
+                  >
+                                            
+                  </label>
                   <div
                     class="Input_wrapper"
                   >
@@ -97,7 +100,9 @@ Object {
                 >
                   <label
                     class="Input_legend Input_legend___focus"
+                    for="input_email"
                   >
+                                            
                     Business Email
                   </label>
                   <div
@@ -141,7 +146,10 @@ Object {
                 >
                   <label
                     class="Input_legend"
-                  />
+                    for="input_company_name"
+                  >
+                                            
+                  </label>
                   <div
                     class="Input_wrapper"
                   >

webapp/channels/src/components/widgets/inputs/input/__snapshots__/input.test.tsx.snap

@@ -11,7 +11,10 @@ exports[`components/widgets/inputs/Input should match snapshot 1`] = `
     >
       <label
         class="Input_legend"
-      />
+        for="input_"
+      >
+                                
+      </label>
       <div
         class="Input_wrapper"
       >

webapp/channels/src/components/widgets/inputs/input/input.scss

@@ -192,6 +192,7 @@
         background-color: var(--center-channel-bg);
         color: rgba(var(--center-channel-color-rgb), 0.75);
         font-size: 10px;
+        font-weight: normal;
         line-height: 14px;
         opacity: 0;
         transform: translateY(8px);

webapp/channels/src/components/widgets/inputs/input/input.tsx

@@ -266,8 +266,10 @@ const Input = React.forwardRef((
                 data-testid='input-wrapper'
             >
                 {useLegend && (
-                    <label className={classNames('Input_legend', {Input_legend___focus: showLegend})}>
+                    <label
-                        {showLegend ? formatAsString(formatMessage, label || placeholder) : null}
+                        htmlFor={inputId}
+                        className={classNames('Input_legend', {Input_legend___focus: showLegend})}
+                    >                        {showLegend ? formatAsString(formatMessage, label || placeholder) : null}
                     </label>
                 )}
                 <div className={classNames('Input_wrapper', wrapperClassName)}>

webapp/channels/src/i18n/en.json

@@ -3654,12 +3654,12 @@
   "channel_settings_modal.purpose.placeholder": "Enter a purpose for this channel (optional)",
   "channel_settings.archive.button": "Archive this channel",
   "channel_settings.archive.warning": "Archiving a channel removes it from the user interface, but doesn't permanently delete the channel. New messages can't be posted to archived channels.",
+  "channel_settings.channel_info_tab.name": "Channel Info",
   "channel_settings.error_banner_color_required": "Banner color is required",
   "channel_settings.error_banner_text_required": "Banner text is required",
   "channel_settings.error_display_name_required": "Channel name is required",
   "channel_settings.error_purpose_length": "The text entered exceeds the character limit. The channel purpose is limited to {maxLength} characters.",
   "channel_settings.header.label": "Channel Header",
-  "channel_settings.label.name": "Channel Name",
   "channel_settings.modal.archiveTitle": "Archive Channel?",
   "channel_settings.modal.confirmArchive": "Confirm",
   "channel_settings.modal.title": "Channel Settings",