From 6705f638c0d825964ca69705eb8e40a8413c97de Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Wed, 18 Oct 2023 20:42:44 +0300
Subject: [PATCH] fix: fixed sidebar margin top (#73) (#593)

---
 src/advanced-settings/AdvancedSettings.jsx    | 12 +++---
 .../scss/AdvancedSettings.scss                | 38 +++++++++++--------
 src/course-team/CourseTeam.jsx                |  2 +-
 src/course-team/CourseTeam.scss               | 28 ++++++++------
 src/grading-settings/GradingSettings.jsx      |  2 +-
 .../scss/GradingSettings.scss                 | 20 ++++++----
 .../ScheduleAndDetails.scss                   | 25 ++++++++++--
 src/schedule-and-details/index.jsx            |  2 +-
 8 files changed, 83 insertions(+), 46 deletions(-)

diff --git a/src/advanced-settings/AdvancedSettings.jsx b/src/advanced-settings/AdvancedSettings.jsx
index ea6f0e9a8..654a33441 100644
--- a/src/advanced-settings/AdvancedSettings.jsx
+++ b/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">
diff --git a/src/advanced-settings/scss/AdvancedSettings.scss b/src/advanced-settings/scss/AdvancedSettings.scss
index a8e0d0434..c4252d614 100644
--- a/src/advanced-settings/scss/AdvancedSettings.scss
+++ b/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;
+    }
   }
 }
 
diff --git a/src/course-team/CourseTeam.jsx b/src/course-team/CourseTeam.jsx
index e7b96bdf8..e22b1721b 100644
--- a/src/course-team/CourseTeam.jsx
+++ b/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 }]}
diff --git a/src/course-team/CourseTeam.scss b/src/course-team/CourseTeam.scss
index e6c973ff1..02598367b 100644
--- a/src/course-team/CourseTeam.scss
+++ b/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;
+    }
   }
 }
diff --git a/src/grading-settings/GradingSettings.jsx b/src/grading-settings/GradingSettings.jsx
index 5aeaf240a..827486e58 100644
--- a/src/grading-settings/GradingSettings.jsx
+++ b/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}
diff --git a/src/grading-settings/scss/GradingSettings.scss b/src/grading-settings/scss/GradingSettings.scss
index bd78a39b0..0de779090 100644
--- a/src/grading-settings/scss/GradingSettings.scss
+++ b/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;
+  }
 }
diff --git a/src/schedule-and-details/ScheduleAndDetails.scss b/src/schedule-and-details/ScheduleAndDetails.scss
index 3e9fdee1a..bbaed92e7 100644
--- a/src/schedule-and-details/ScheduleAndDetails.scss
+++ b/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;
+      }
+    }
   }
 }
diff --git a/src/schedule-and-details/index.jsx b/src/schedule-and-details/index.jsx
index a7d24419d..a3db018ca 100644
--- a/src/schedule-and-details/index.jsx
+++ b/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}