Adding overlay over course rows (#5403)

mitodl · Oct 7, 2024 · 0240b5e · 0240b5e
1 parent 51e86a8
commit 0240b5e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/static/js/components/dashboard/CourseListCard.js b/static/js/components/dashboard/CourseListCard.js
@@ -126,7 +126,10 @@ export default class CourseListCard extends React.Component {
             {showStaffView ? `Courses - ${program.title}` : "Required Courses"}
           </h2>
           {showStaffView ? null : this.renderGradesOutOfDateMessage()}
-          {courseRows}
+          <div className="parent-overlay">
+            <div className="overlay" />
+            {courseRows}
+          </div>
         </CardContent>
       </Card>
     )

diff --git a/static/scss/dashboard/dashboard.scss b/static/scss/dashboard/dashboard.scss
@@ -20,6 +20,22 @@
   font-weight: 600;
 }
 
+.parent-overlay {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.overlay {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  display: block;
+  z-index: 999;
+  background-color: black;
+  opacity: 0.2;
+}
+
 .dashboard {
 
   h2 {