PLT-6905 - Updating channel header design (#6789)

* PLT-6905 - Updating channel header design

* Updating border-radius

* Updating radius for wide icons

* Updating trigger for overlay

* Updating UI for channel header

* Updating channel header sizing

* Updating channel header css

* Updating sidebar css

* Updating status icons

* Adjusting border

* Updating comment

* Removing type from status icon

* Fixing UI issues for the channel header/sidebar

* make "Add a channel description" open the channel header modal

* Updating status and opacity

* Updating stauts icon positioning

* Updating description and heading size

* Updating UI changes

* Updating UI changes

* add a focused class to the parent div .search__form and then remove when hover away

* Fix active state for pinned posts icon

* Updating UI changes

* Update channel header text

webapp/i18n/en.json

@@ -1087,6 +1087,8 @@
   "channel_flow.handleTooShort": "Channel URL must be 2 or more lowercase alphanumeric characters",
   "channel_flow.invalidName": "Invalid Channel Name",
   "channel_flow.set_url_title": "Set Channel URL",
+  "channel_header.channelMembers": "Members",
+  "channel_header.addChannelHeader": "Add a channel description",
   "channel_header.addMembers": "Add Members",
   "channel_header.addToFavorites": "Add to Favorites",
   "channel_header.channelHeader": "Edit Channel Header",
@@ -1096,6 +1098,7 @@
   "channel_header.manageMembers": "Manage Members",
   "channel_header.notificationPreferences": "Notification Preferences",
   "channel_header.recentMentions": "Recent Mentions",
+  "channel_header.pinnedPosts": "Pinned Posts",
   "channel_header.removeFromFavorites": "Remove from Favorites",
   "channel_header.rename": "Rename Channel",
   "channel_header.setHeader": "Edit Channel Header",
@@ -1980,15 +1983,15 @@
   "setting_upload.import": "Import",
   "setting_upload.noFile": "No file selected.",
   "setting_upload.select": "Select file",
-  "sidebar.channels": "Channels",
+  "sidebar.channels": "PUBLIC CHANNELS",
   "sidebar.createChannel": "Create new public channel",
   "sidebar.createGroup": "Create new private channel",
-  "sidebar.direct": "Direct Messages",
-  "sidebar.favorite": "Favorites",
+  "sidebar.direct": "DIRECT MESSAGES",
+  "sidebar.favorite": "FAVORITE CHANNELS",
   "sidebar.more": "More",
   "sidebar.moreElips": "More...",
   "sidebar.otherMembers": "Outside this team",
-  "sidebar.pg": "Private Channels",
+  "sidebar.pg": "PRIVATE CHANNELS",
   "sidebar.removeList": "Remove from list",
   "sidebar.tutorialScreen1": "<h4>Channels</h4><p><strong>Channels</strong> organize conversations across different topics. They’re open to everyone on your team. To send private communications use <strong>Direct Messages</strong> for a single person or <strong>Private Channel</strong> for multiple people.</p>",
   "sidebar.tutorialScreen2": "<h4>\"{townsquare}\" and \"{offtopic}\" channels</h4><p>Here are two public channels to start:</p><p><strong>{townsquare}</strong> is a place for team-wide communication. Everyone in your team is a member of this channel.</p><p><strong>{offtopic}</strong> is a place for fun and humor outside of work-related channels. You and your team can decide what other channels to create.</p>",