fix: [AXIMST-656] Course unit - Fixed space between xblocks (#206)

* fix: [AXIMST-656] fixed space between xblocks * refactor: styles for copy-paste alerts
openedx · Mar 20, 2024 · 223540b · 223540b
1 parent a68fc60
commit 223540b
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx
@@ -133,6 +133,7 @@ const CourseUnit = ({ courseId }) => {
             <Layout.Element>
               {currentlyVisibleToStudents && (
                 <AlertMessage
+                  className="course-unit__alert"
                   title={intl.formatMessage(messages.alertUnpublishedVersion)}
                   variant="warning"
                   icon={WarningIcon}
@@ -144,7 +145,7 @@ const CourseUnit = ({ courseId }) => {
                   courseId={courseId}
                 />
               )}
-              <Stack gap={4} className="mb-4 course-unit__xblocks">
+              <Stack className="mb-4 course-unit__xblocks">
                 <DraggableList
                   itemList={unitXBlocks}
                   setState={setUnitXBlocks}
@@ -161,6 +162,7 @@ const CourseUnit = ({ courseId }) => {
                       shouldScroll={shouldScroll}
                       unitXBlockActions={unitXBlockActions}
                       data-testid="course-xblock"
+                      className="course-unit__xblock"
                       userPartitionInfo={userPartitionInfo}
                     />
                   ))}

diff --git a/src/course-unit/CourseUnit.scss b/src/course-unit/CourseUnit.scss
@@ -4,3 +4,7 @@
 @import "./course-xblock/CourseXBlock";
 @import "./sidebar/Sidebar";
 @import "./clipboard/paste-component/PasteComponent";
+
+.course-unit__alert {
+  margin-bottom: 1.75rem;
+}
diff --git a/src/course-unit/clipboard/paste-notification/index.jsx b/src/course-unit/clipboard/paste-notification/index.jsx
@@ -34,6 +34,7 @@ const PastNotificationAlert = ({ staticFileNotices, courseId }) => {
       {hasConflictingErrors && (
         <AlertMessage
           data-testid="has-conflicting-errors-alert"
+          className="course-unit__alert"
           title={intl.formatMessage(messages.hasConflictingErrorsTitle)}
           onClose={() => handleCloseNotificationAlert('conflictingFilesAlert')}
           description={(
@@ -56,6 +57,7 @@ const PastNotificationAlert = ({ staticFileNotices, courseId }) => {
       {hasErrorFiles && (
         <AlertMessage
           data-testid="has-error-files-alert"
+          className="course-unit__alert"
           title={intl.formatMessage(messages.hasErrorsTitle)}
           onClose={() => handleCloseNotificationAlert('errorFilesAlert')}
           description={(
@@ -72,6 +74,7 @@ const PastNotificationAlert = ({ staticFileNotices, courseId }) => {
       {hasNewFiles && (
         <AlertMessage
           data-testid="has-new-files-alert"
+          className="course-unit__alert"
           title={intl.formatMessage(messages.hasNewFilesTitle)}
           onClose={() => handleCloseNotificationAlert('newFilesAlert')}
           description={(

diff --git a/src/course-unit/course-xblock/CourseXBlock.jsx b/src/course-unit/course-xblock/CourseXBlock.jsx
@@ -38,11 +38,16 @@ const CourseXBlock = ({
 
   return (
     <div ref={courseXBlockElementRef} {...props}>
-      <Card as={ConditionalSortableElement} id={id} draggable className="mb-1">
+      <Card
+        as={ConditionalSortableElement}
+        id={id}
+        draggable
+        componentStyle={{ marginBottom: 0 }}
+      >
         <Card.Header
           title={title}
           actions={(
-            <ActionRow>
+            <ActionRow className="mr-2">
               <IconButton
                 alt={intl.formatMessage(messages.blockAltButtonEdit)}
                 iconAs={EditIcon}

diff --git a/src/course-unit/course-xblock/CourseXBlock.scss b/src/course-unit/course-xblock/CourseXBlock.scss
@@ -1,5 +1,9 @@
 .course-unit {
   .course-unit__xblocks {
+    .course-unit__xblock:not(:first-child) {
+      margin-top: 1.75rem;
+    }
+
     .pgn__card-header {
       display: flex;
       justify-content: space-between;