fix: fixed sidebar margin top (#73) (#593)

src/advanced-settings/AdvancedSettings.jsx

@@ -130,7 +130,7 @@ const AdvancedSettings = ({ intl, courseId }) => {
 
   return (
     <>
-      <Container size="xl" className="px-4">
+      <Container size="xl" className="advanced-settings px-4">
         <div className="setting-header mt-5">
           {(proctoringErrors?.length > 0) && (
             <AlertProctoringError
@@ -157,11 +157,6 @@ const AdvancedSettings = ({ intl, courseId }) => {
             ) : null}
           </TransitionReplace>
         </div>
-        <SubHeader
-          subtitle={intl.formatMessage(messages.headingSubtitle)}
-          title={intl.formatMessage(messages.headingTitle)}
-          contentTitle={intl.formatMessage(messages.policy)}
-        />
         <section className="setting-items mb-4">
           <Layout
             lg={[{ span: 9 }, { span: 3 }]}
@@ -171,6 +166,11 @@ const AdvancedSettings = ({ intl, courseId }) => {
             xl={[{ span: 9 }, { span: 3 }]}
           >
             <Layout.Element>
+              <SubHeader
+                subtitle={intl.formatMessage(messages.headingSubtitle)}
+                title={intl.formatMessage(messages.headingTitle)}
+                contentTitle={intl.formatMessage(messages.policy)}
+              />
               <article>
                 <div>
                   <section className="setting-items-policies">

src/advanced-settings/scss/AdvancedSettings.scss

@@ -1,23 +1,29 @@
 @import "variables";
 
-.setting-items-policies {
-  .setting-items-deprecated-setting {
-    float: right;
+.advanced-settings {
+  .help-sidebar {
+    margin-top: 8.75rem;
+  }
+
+  .setting-items-policies {
+    .setting-items-deprecated-setting {
+      float: right;
+      margin-bottom: 1.75rem;
+    }
+
+    .instructions,
+    strong {
+      color: $text-color-base;
+      font-weight: 400;
+    }
+  }
+
+  .setting-card {
     margin-bottom: 1.75rem;
-  }
 
-  .instructions,
-  strong {
-    color: $text-color-base;
-    font-weight: 400;
-  }
-}
-
-.setting-card {
-  margin-bottom: 1.75rem;
-
-  .pgn__card-header .pgn__card-header-title-md {
-    font-size: 1.125rem;
+    .pgn__card-header .pgn__card-header-title-md {
+      font-size: 1.125rem;
+    }
   }
 }
 

src/course-team/CourseTeam.jsx

@@ -62,7 +62,7 @@ const CourseTeam = ({ courseId }) => {
 
   return (
     <>
-      <Container size="xl" className="px-4">
+      <Container size="xl" className="course-team px-4">
         <section className="course-team-container mb-4">
           <Layout
             lg={[{ span: 9 }, { span: 3 }]}

src/course-team/CourseTeam.scss

@@ -3,21 +3,27 @@
 @import "./add-team-member/AddTeamMember";
 @import "./course-team-member/CourseTeamMember";
 
-.course-team-section {
-  .sidebar-container {
-    width: 30%;
+.course-team {
+  .help-sidebar {
+    margin-top: 6.563rem;
+  }
 
-    .help-sidebar {
-      margin-top: 0;
+  .course-team-section {
+    .sidebar-container {
+      width: 30%;
 
-      hr {
-        display: none;
+      .help-sidebar {
+        margin-top: 0;
+
+        hr {
+          display: none;
+        }
       }
     }
-  }
 
-  .members-container {
-    flex-grow: 1;
-    padding-top: 1.25rem;
+    .members-container {
+      flex-grow: 1;
+      padding-top: 1.25rem;
+    }
   }
 }

src/grading-settings/GradingSettings.jsx

@@ -115,7 +115,7 @@ const GradingSettings = ({ intl, courseId }) => {
 
   return (
     <>
-      <Container size="xl" className="px-4">
+      <Container size="xl" className="grading px-4">
         <div className="mt-5">
           <AlertMessage
             show={showSuccessAlert}

src/grading-settings/scss/GradingSettings.scss

@@ -2,12 +2,18 @@
 @import "../assignment-section/AssignmentSection.scss";
 @import "../grading-scale/GradingScale.scss";
 
-.grading-label {
-  font: normal $font-weight-bold .75rem/1.25rem $font-family-base;
-  color: $gray-500;
-}
+.grading {
+  .help-sidebar {
+    margin-top: 8.75rem;
+  }
 
-.grading-description {
-  font: normal .75rem/1.5rem $font-family-base;
-  color: $gray-700;
+  .grading-label {
+    font: normal $font-weight-bold .75rem/1.25rem $font-family-base;
+    color: $gray-500;
+  }
+
+  .grading-description {
+    font: normal .75rem/1.5rem $font-family-base;
+    color: $gray-700;
+  }
 }

src/schedule-and-details/ScheduleAndDetails.scss

@@ -10,8 +10,27 @@
 @import "./requirements-section/RequirementsSection";
 @import "./license-section/LicenseSection";
 
-.section-container {
-  &:not(:last-child) {
-    margin-bottom: 1.75rem;
+.schedule-and-details {
+  .help-sidebar {
+    margin-top: 3.438rem;
+  }
+
+  .section-container {
+    &:not(:last-child) {
+      margin-bottom: 1.75rem;
+    }
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: .75rem;
+      border-bottom: $border-width solid $light-400;
+
+      h2 {
+        color: $black;
+        margin-bottom: .75rem;
+      }
+    }
   }
 }

src/schedule-and-details/index.jsx

@@ -161,7 +161,7 @@ const ScheduleAndDetails = ({ intl, courseId }) => {
 
   return (
     <>
-      <Container size="xl" className="px-4">
+      <Container size="xl" className="schedule-and-details px-4">
         <div className="mt-5">
           <AlertMessage
             show={showSuccessfulAlert}