feat: adjust things as per design

Author: navinkarkera

src/course-outline/CourseOutline.tsx

@@ -267,7 +267,7 @@ const CourseOutline = () => {
 
   if (isLoadingDenied) {
     return (
-      <Container fluid className="px-4 mt-4">
+      <Container fluid className="px-3 mt-4">
         <PageAlerts
           courseId={courseId}
           notificationDismissUrl={notificationDismissUrl}
@@ -290,7 +290,7 @@ const CourseOutline = () => {
       <Helmet>
         <title>{getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle))}</title>
       </Helmet>
-      <Container fluid className="px-4">
+      <Container fluid className="px-3">
         <section className="course-outline-container mb-4 mt-5">
           <PageAlerts
             courseId={courseId}

src/course-outline/header-navigations/HeaderActions.tsx

@@ -79,7 +79,8 @@ const HeaderActions = ({
           <Icon src={ViewSidebar} />
         </Dropdown.Toggle>
         <Dropdown.Menu className="mt-1">
-          {Object.entries(sidebarPages).map(([key, page]: [OutlineSidebarPageKeys, SidebarPage]) => (
+          {Object.entries(sidebarPages).filter(([, page]) => !page.hideFromActionMenu)
+            .map(([key, page]: [OutlineSidebarPageKeys, SidebarPage]) => (
             <Dropdown.Item
               key={key}
               onClick={() => setCurrentPageKey(key)}

src/course-outline/outline-sidebar/AddSidebar.tsx

@@ -213,7 +213,6 @@ const AddTabs = () => {
 
 /** Main Sidebar Component */
 export const AddSidebar = () => {
-  const intl = useIntl();
   const { courseDetails } = useCourseAuthoringContext();
 
   return (

src/course-outline/outline-sidebar/OutlineSidebarContext.tsx

@@ -56,6 +56,7 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       component: AddSidebar,
       icon: Plus,
       title: intl.formatMessage(messages.sidebarButtonAdd),
+      hideFromActionMenu: true,
     },
   } satisfies OutlineSidebarPages;
 

src/generic/sidebar/Sidebar.tsx

@@ -18,6 +18,7 @@ export interface SidebarPage {
   component: React.ComponentType;
   icon: React.ComponentType;
   title: string;
+  hideFromActionMenu?: boolean;
 }
 
 type SidebarPages = Record<string, SidebarPage>;
@@ -88,7 +89,7 @@ export function Sidebar<T extends SidebarPages>({
   const SidebarComponent = pages[currentPageKey].component;
 
   return (
-    <Stack direction="horizontal" className="sidebar align-items-baseline mx-3" gap={2}>
+    <Stack direction="horizontal" className="sidebar align-items-baseline ml-3" gap={2}>
       {isOpen && !!currentPageKey && (
         <div className="sidebar-content p-2 bg-white border-right">
           <Dropdown data-testid="sidebar-dropdown">

src/generic/sidebar/index.scss

@@ -1,8 +1,8 @@
 .sidebar {
   .sidebar-content {
     flex: 0 1 auto;
-    max-width: 660px;
-    min-width: 500px;
+    max-width: 700px;
+    min-width: 550px;
   }
 
   .dropdown-toggle {

src/library-authoring/library-filters/SidebarFilters.tsx

@@ -43,8 +43,8 @@ export const SidebarFilters = ({onlyOneType}: FiltersProps) => {
         />
       </Stack>
       {isOn && <Stack direction="horizontal">
-        <FilterByTags />
         {!(onlyOneType) && <FilterByBlockType />}
+        <FilterByTags />
         <ClearFiltersButton />
         <SearchSortWidget />
       </Stack>}