[MM-59346] Add labels for channel header and purpose in RHS channel info view (#27775)

* MM-59346: show channel description header

* refactor: updated inlt using npm and styles

* channel description header persist

webapp/channels/src/components/channel_info_rhs/about_area_channel.tsx

@@ -27,6 +27,17 @@ const ChannelPurpose = styled.div`
     }
 `;
 
+const ChannelDescriptionHeading = styled.div`
+    color: rgba(var(--center-channel-color-rgb), 0.75);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0.24px;
+    text-transform: uppercase;
+    padding: 6px 0px;
+`;
+
 const ChannelHeader = styled.div`
     margin-bottom: 12px;
 `;
@@ -47,6 +58,9 @@ const AboutAreaChannel = ({channel, canEditChannelProperties, actions}: Props) =
         <>
             {(channel.purpose || canEditChannelProperties) && (
                 <ChannelPurpose>
+                    <ChannelDescriptionHeading>
+                        {formatMessage({id: 'channel_info_rhs.about_area.channel_purpose.heading', defaultMessage: 'Channel Purpose'})}
+                    </ChannelDescriptionHeading>
                     <EditableArea
                         editable={canEditChannelProperties}
                         content={channel.purpose && (
@@ -67,6 +81,9 @@ const AboutAreaChannel = ({channel, canEditChannelProperties, actions}: Props) =
 
             {(channel.header || canEditChannelProperties) && (
                 <ChannelHeader>
+                    <ChannelDescriptionHeading>
+                        {formatMessage({id: 'channel_info_rhs.about_area.channel_header.heading', defaultMessage: 'Channel Header'})}
+                    </ChannelDescriptionHeading>
                     <EditableArea
                         content={channel.header && (
                             <LineLimiter

webapp/channels/src/i18n/en.json

@@ -3100,8 +3100,10 @@
   "channel_info_rhs.about_area_id": "ID:",
   "channel_info_rhs.about_area.add_channel_header": "Add a channel header",
   "channel_info_rhs.about_area.add_channel_purpose": "Add a channel purpose",
+  "channel_info_rhs.about_area.channel_header.heading": "Channel Header",
   "channel_info_rhs.about_area.channel_header.line_limiter.less": "less",
   "channel_info_rhs.about_area.channel_header.line_limiter.more": "more",
+  "channel_info_rhs.about_area.channel_purpose.heading": "Channel Purpose",
   "channel_info_rhs.about_area.channel_purpose.line_limiter.less": "less",
   "channel_info_rhs.about_area.channel_purpose.line_limiter.more": "more",
   "channel_info_rhs.edit_link": "Edit",