From ada80e0ff43f23093ad754c6d96bb2cef1abb45d Mon Sep 17 00:00:00 2001
From: Zachary Trabookis <ztraboo@clemson.edu>
Date: Mon, 5 Jun 2023 13:31:54 -0400
Subject: [PATCH] feat: Indent `subsection` sequences on the course outline.

Verified that the instructional design team would like the the `subsection` sequences indented. This will allow for visual separation of the content and provide better nesting.

I tried using bootstrap spacing https://getbootstrap.com/docs/4.3/utilities/spacing/ of `pl-5` but it was too far in for the indent and I needed to specify an exact value to align the checkmark progress with the title of the section name.

Ref: https://github.com/CUCWD/frontend-app-learning/issues/25
---
 src/course-home/outline-tab/SequenceLink.jsx  | 3 ++-
 src/course-home/outline-tab/SequenceLink.scss | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 src/course-home/outline-tab/SequenceLink.scss

diff --git a/src/course-home/outline-tab/SequenceLink.jsx b/src/course-home/outline-tab/SequenceLink.jsx
index b0effb545b..474462684a 100644
--- a/src/course-home/outline-tab/SequenceLink.jsx
+++ b/src/course-home/outline-tab/SequenceLink.jsx
@@ -16,6 +16,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import EffortEstimate from '../../shared/effort-estimate';
 import { useModel } from '../../generic/model-store';
 import messages from './messages';
+import './SequenceLink.scss';
 
 function SequenceLink({
   id,
@@ -52,7 +53,7 @@ function SequenceLink({
   return (
     <li>
       <div className={classNames('', { 'mt-2 pt-2 border-top border-light': !first })}>
-        <div className="row w-100 m-0">
+        <div className="row w-100 m-0 sequence-indent">
           <div className="col-auto p-0">
             {complete ? (
               <FontAwesomeIcon
diff --git a/src/course-home/outline-tab/SequenceLink.scss b/src/course-home/outline-tab/SequenceLink.scss
new file mode 100644
index 0000000000..d11d85cb7d
--- /dev/null
+++ b/src/course-home/outline-tab/SequenceLink.scss
@@ -0,0 +1,3 @@
+.sequence-indent {
+    padding-left: 2.75rem !important 
+}
\ No newline at end of file