From 223540bc06a1da56ad158bb7b4d89ea9cc547cbe Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Mon, 18 Mar 2024 15:50:01 +0200
Subject: [PATCH] fix: [AXIMST-656] Course unit - Fixed space between xblocks
 (#206)

* fix: [AXIMST-656] fixed space between xblocks

* refactor: styles for copy-paste alerts
---
 src/course-unit/CourseUnit.jsx                         | 4 +++-
 src/course-unit/CourseUnit.scss                        | 4 ++++
 src/course-unit/clipboard/paste-notification/index.jsx | 3 +++
 src/course-unit/course-xblock/CourseXBlock.jsx         | 9 +++++++--
 src/course-unit/course-xblock/CourseXBlock.scss        | 4 ++++
 5 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx
index f1f65fad27..80885a61d2 100644
--- 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
index cb4cfe99ab..b673aaf90f 100644
--- 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
index 1670ab78da..b92334c717 100644
--- 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
index 6ce6a06cf2..a3472465d5 100644
--- 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
index 262d19d653..4ae9f6dab1 100644
--- 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;