refactor: add styles in messages

openedx · Dec 29, 2023 · fd0b046 · fd0b046
1 parent 6c15716
commit fd0b046
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/src/course-home/outline-tab/Section.jsx b/src/course-home/outline-tab/Section.jsx
@@ -64,17 +64,18 @@ const Section = ({
           />
         )}
       </div>
-      <div className="ml-3 p-0 font-weight-bold text-dark-500">
+      <div className="col-7 ml-3 p-0 font-weight-bold text-dark-500">
         <span className="align-middle col-6">{title}</span>
         <span className="sr-only">
           , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
         </span>
       </div>
-      <div className="col-10 col-sm-8 d-flex align-items-end justify-content-end">
+      <div className="row">
         {hideFromTOC && (
-        <span className="small d-flex align-content-end">
-          <Icon className="mr-2" src={DisabledVisible} />Hidden in Course Outline, accessible via link
-        </span>
+          <span className="small d-flex align-content-end">
+            <Icon className="mr-2" src={DisabledVisible} />
+            Hidden in Course Outline, accessible via link
+          </span>
         )}
       </div>
     </div>

diff --git a/src/course-home/outline-tab/SequenceLink.jsx b/src/course-home/outline-tab/SequenceLink.jsx
@@ -109,20 +109,20 @@ const SequenceLink = ({
               />
             )}
           </div>
-          <div className="col-auto p-0 ml-3 text-break">
+          <div className="col-10 p-0 ml-3 text-break">
             <span className="align-middle">{displayTitle}</span>
             <span className="sr-only">
               , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
             </span>
             <EffortEstimate className="ml-3 align-middle" block={sequence} />
           </div>
-          <div className="col-9">
-            {hideFromTOC && (
-            <span className="small d-flex">
-              <Icon className="mr-2" src={DisabledVisible} />Subsections are not navigable beetwen each other, they can only be accessed through their link.
-            </span>
-            )}
-          </div>
+        </div>
+        <div className="row w-100 my-2 mx-4 pl-3">
+          {hideFromTOC && (
+          <span className="small d-flex">
+            <Icon className="mr-2" src={DisabledVisible} />Subsections are not navigable beetwen each other, they can only be accessed through their link.
+          </span>
+          )}
         </div>
         <div className="row w-100 m-0 ml-3 pl-3">
           <small className="text-body pl-2">