From e45dad88d831ab3d36070993428909fcda8b7973 Mon Sep 17 00:00:00 2001
From: Mehak Nasir <mehaknasir94@gmail.com>
Date: Thu, 6 Jan 2022 16:08:05 +0500
Subject: [PATCH] fix: header fixes done as required in tnl-9441

---
 src/studio-header/DesktopHeader.jsx   |  2 +-
 src/studio-header/Header.jsx          | 29 ++++++++++++++-------------
 src/studio-header/Header.messages.jsx |  2 +-
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/studio-header/DesktopHeader.jsx b/src/studio-header/DesktopHeader.jsx
index ec7b9fbcf..f542fd25c 100644
--- a/src/studio-header/DesktopHeader.jsx
+++ b/src/studio-header/DesktopHeader.jsx
@@ -92,7 +92,7 @@ class DesktopHeader extends React.Component {
 
     return (
       <header className="site-header-desktop">
-        <div className="container-fluid">
+        <div className="px-5">
           <div className="nav-container position-relative d-flex align-items-center">
             {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
             {/* This lockup HTML was copied from edx/frontend-app-learning/src/course-header/Header.jsx. */}
diff --git a/src/studio-header/Header.jsx b/src/studio-header/Header.jsx
index d4a9f4d85..add0c57f5 100644
--- a/src/studio-header/Header.jsx
+++ b/src/studio-header/Header.jsx
@@ -33,12 +33,12 @@ function Header({
       content: intl.formatMessage(messages['header.links.content']),
       submenuContent: (
         <>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/course/${courseId}`}>{intl.formatMessage(messages['header.links.outline'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/course_info/${courseId}`}>{intl.formatMessage(messages['header.links.updates'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/tabs/${courseId}`}>{intl.formatMessage(messages['header.links.pages'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/assets/${courseId}`}>{intl.formatMessage(messages['header.links.filesAndUploads'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/textbooks/${courseId}`}>{intl.formatMessage(messages['header.links.textbooks'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/videos/${courseId}`}>{intl.formatMessage(messages['header.links.videoUploads'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/course/${courseId}`}>{intl.formatMessage(messages['header.links.outline'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/course_info/${courseId}`}>{intl.formatMessage(messages['header.links.updates'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/tabs/${courseId}`}>{intl.formatMessage(messages['header.links.pages'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/assets/${courseId}`}>{intl.formatMessage(messages['header.links.filesAndUploads'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/textbooks/${courseId}`}>{intl.formatMessage(messages['header.links.textbooks'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/videos/${courseId}`}>{intl.formatMessage(messages['header.links.videoUploads'])}</a></div>
         </>
       ),
     },
@@ -47,11 +47,12 @@ function Header({
       content: intl.formatMessage(messages['header.links.settings']),
       submenuContent: (
         <>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/details/${courseId}`}>{intl.formatMessage(messages['header.links.scheduleAndDetails'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/grading/${courseId}`}>{intl.formatMessage(messages['header.links.grading'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/course_team/${courseId}`}>{intl.formatMessage(messages['header.links.courseTeam'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/group_configurations/${courseId}`}>{intl.formatMessage(messages['header.links.groupConfigurations'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/advanced/${courseId}`}>{intl.formatMessage(messages['header.links.advancedSettings'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/details/${courseId}`}>{intl.formatMessage(messages['header.links.scheduleAndDetails'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/grading/${courseId}`}>{intl.formatMessage(messages['header.links.grading'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/course_team/${courseId}`}>{intl.formatMessage(messages['header.links.courseTeam'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/group_configurations/${courseId}`}>{intl.formatMessage(messages['header.links.groupConfigurations'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/advanced/${courseId}`}>{intl.formatMessage(messages['header.links.advancedSettings'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/certificates/${courseId}`}>{intl.formatMessage(messages['header.links.certificates'])}</a></div>
         </>
       ),
     },
@@ -60,9 +61,9 @@ function Header({
       content: intl.formatMessage(messages['header.links.tools']),
       submenuContent: (
         <>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/import/${courseId}`}>{intl.formatMessage(messages['header.links.import'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/export/${courseId}`}>{intl.formatMessage(messages['header.links.export'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/checklists/${courseId}`}>{intl.formatMessage(messages['header.links.checklists'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/import/${courseId}`}>{intl.formatMessage(messages['header.links.import'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/export/${courseId}`}>{intl.formatMessage(messages['header.links.export'])}</a></div>
+          <div className="mb-1 small"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/checklists/${courseId}`}>{intl.formatMessage(messages['header.links.checklists'])}</a></div>
         </>
       ),
     },
diff --git a/src/studio-header/Header.messages.jsx b/src/studio-header/Header.messages.jsx
index 25d961829..576b93cd4 100644
--- a/src/studio-header/Header.messages.jsx
+++ b/src/studio-header/Header.messages.jsx
@@ -28,7 +28,7 @@ const messages = defineMessages({
   },
   'header.links.pages': {
     id: 'header.links.pages',
-    defaultMessage: 'Pages',
+    defaultMessage: 'Pages & Resources',
     description: 'Link to Studio Pages page',
   },
   'header.links.filesAndUploads': {