refactor: move common styles to conditional sortable element

open-craft · Jan 17, 2024 · 652f4ad · 652f4ad
1 parent 828eea3
commit 652f4ad
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 14 deletions.
diff --git a/src/course-outline/drag-helper/ConditionalSortableElement.jsx b/src/course-outline/drag-helper/ConditionalSortableElement.jsx
@@ -9,11 +9,20 @@ const ConditionalSortableElement = ({
   children,
   componentStyle,
 }) => {
+  const style = {
+    background: 'white',
+    padding: '1rem 1.5rem',
+    marginBottom: '1.5rem',
+    borderRadius: '0.35rem',
+    boxShadow: '0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)',
+    ...componentStyle,
+  };
+
   if (draggable) {
     return (
       <SortableItem
         id={id}
-        componentStyle={componentStyle}
+        componentStyle={style}
       >
         <div className="extend-margin">
           {children}
@@ -24,7 +33,7 @@ const ConditionalSortableElement = ({
   return (
     <Row
       data-testid="conditional-sortable-element--no-drag-handle"
-      style={componentStyle}
+      style={style}
       className="mx-0"
     >
       {children}

diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
@@ -120,11 +120,7 @@ const SectionCard = ({
       id={id}
       draggable={actions.draggable}
       componentStyle={{
-        background: 'white',
         padding: '1.75rem',
-        marginBottom: '1.5rem',
-        borderRadius: '0.35rem',
-        boxShadow: '0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)',
         ...borderStyle,
       }}
     >

diff --git a/src/course-outline/subsection-card/SubsectionCard.jsx b/src/course-outline/subsection-card/SubsectionCard.jsx
@@ -108,10 +108,6 @@ const SubsectionCard = ({
       }
       componentStyle={{
         background: '#f8f7f6',
-        padding: '1rem 1.5rem',
-        marginBottom: '1.5rem',
-        borderRadius: '0.35rem',
-        boxShadow: '0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)',
         ...borderStyle,
       }}
     >

diff --git a/src/course-outline/unit-card/UnitCard.jsx b/src/course-outline/unit-card/UnitCard.jsx
@@ -99,10 +99,6 @@ const UnitCard = ({
       draggable={false} // update to {actions.draggable} when unit drag-n-drop is implemented
       componentStyle={{
         background: '#fdfdfd',
-        padding: '1rem 1.5rem',
-        marginBottom: '1.5rem',
-        borderRadius: '0.35rem',
-        boxShadow: '0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)',
         ...borderStyle,
       }}
     >