UI updates/ Launch Lessons page

services/QuillLMS/app/assets/stylesheets/pages/my_lessons.scss

@@ -2,58 +2,30 @@
   section:last-of-type {
     padding-bottom: 5px;
   }
-  .my-lessons-header {
-    margin-top: 30px;
-    margin-bottom: 30px;
-    h1 {
-      font-weight: 600;
-      font-size: 30px;
-      margin-bottom: 10px;
-    }
-    p {
-      margin: 7px 0px;
-      font-size: 16px;
-    }
-    span {
-      font-weight: 600;
+  .top-section {
+    display: flex;
+    margin: 32px 0px 64px 0px;
+    .my-lessons-header {
+      h1 {
+        @include display-xl;
+        margin-bottom: 10px;
+      }
+      p {
+        margin: 7px 0px;
+        @include text-s;
+      }
+      span {
+        font-weight: 600;
+      }
+      a {
+        color: $quill-green-dark;
+        text-decoration: underline;
+      }
     }
-    a {
-      color: #027360;
-      font-weight: 600;
-      text-decoration: underline;
+    .dropdown-container {
+      min-width: 190px;
     }
   }
-  #launch-lesson {
-    height: 40px;
-    color: white;
-    font-size: 14px;
-    font-weight: bold;
-    width: 145px;
-    border-radius: 3px;
-    background-color: #00c2a2;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .lesson-completed {
-    margin-right: 8px;
-    color: #82bf3c;
-    font-weight: 600;
-    width: 160px;
-  }
-  .resume-lesson {
-    width: 145px;
-    height: 40px;
-    border-radius: 3px;
-    background-color: $quill-white;
-    border: solid 1px #00c2a2;
-    font-weight: bold;
-    color: #00c2a2 !important;
-    margin-right: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
   .customized-editions-tag {
     width: 90px;
     height: 23px;
@@ -71,6 +43,130 @@
       display: none;
     }
   }
+  .lesson-unit-container {
+    border-radius: 8px;
+    border: 1px solid $quill-grey-15 !important;
+    padding: 32px !important;
+    margin-bottom: 32px;
+    .unit-header-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 24px;
+      .unit-name {
+        @include display-l;
+      }
+      .assigned-student-info {
+        display: flex;
+        color: $quill-grey-90;
+        @include text-s;
+        .locked-info {
+          display: flex;
+          border-right: 1px solid $quill-grey-15;
+          padding-right: 16px;
+          img {
+            margin-right: 4px;
+          }
+        }
+        .assigned-to {
+          display: flex;
+          @include text-s;
+          color: $quill-grey-90;
+          span:first-of-type {
+            margin: 0px 2px;
+          }
+          span:last-of-type {
+            margin-left: 2px;
+          }
+          span {
+            font-weight: 700;
+          }
+        }
+      }
+      .assigned-student-info:has(.locked-info) {
+        .assigned-to {
+          padding-left: 16px;
+        }
+      }
+    }
+    .table {
+      &.assigned-activities {
+        margin-bottom: 0px;
+      }
+    }
+    .lesson-activities-table {
+      .data-table-headers .data-table-header {
+        &.lesson-activity-header span {
+          margin-left: 8px;
+        }
+        &.launch-lesson-header span {
+          margin-left: 18px;
+        }
+      }
+      .data-table-body .data-table-row .data-table-row-section {
+        .customize-link, .download-link {
+          margin-left: 22px;
+        }
+        &.launch-lesson, &.lesson-activity {
+          a, .activity-cell-container {
+            margin-left: 8px;
+          }
+        }
+      }
+      .activity-cell-container {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        .data-table-chip {
+          max-width: 480px;
+          width: max-content;
+          span {
+            text-overflow: unset;
+            white-space: break-spaces;
+            text-align: left;
+          }
+        }
+        .lesson-complete {
+          display: flex;
+          align-items: center;
+          p {
+            color: $quill-green-vibrant;
+            font-size: 13px;
+            font-weight: 700;
+            margin-right: 8px;
+          }
+        }
+      }
+      a {
+        color: $quill-white;
+      }
+    }
+  }
+  .empty-lessons-content {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 128px 0px;
+
+    h2 {
+      font-size: 20px;
+      font-weight: 700;
+      line-height: normal;
+    }
+
+    p {
+      @include text-s;
+      margin-top: 8px;
+      line-height: normal;
+      color: $quill-grey-50;
+    }
+    .buttons {
+      margin-top: 24px;
+      .quill-button:first-of-type {
+        margin-right: 8px;
+      }
+    }
+  }
 }
 
 .empty-lessons {

services/QuillLMS/app/assets/stylesheets/shared/feedback-note.scss

@@ -1,9 +1,7 @@
 .feedback-note {
-  border-top: solid 1px #c0c0c0;
-  padding-top: 20px;
+  color: $quill-grey-50;
   a {
     color: #027360;
-    font-weight: 600;
     text-decoration: underline;
   }
 }

services/QuillLMS/app/assets/stylesheets/shared/table/react-table.scss

@@ -26,11 +26,11 @@
       &.grey {
         background-color: $quill-grey-1;
         border: 1px solid $quill-grey-15;
-        p {
+        span {
           color: $quill-grey-90;
         }
       }
-      p {
+      span {
         @include display-xs;
         color: $quill-green;
         margin-left: 4px;

services/QuillLMS/client/app/bundles/Shared/components/shared/__tests__/__snapshots__/dataTableChip.test.tsx.snap

@@ -5,9 +5,9 @@ exports[`DataTableChip it should render 1`] = `
   <div
     class="data-table-chip undefined"
   >
-    <p>
+    <span>
       test label
-    </p>
+    </span>
   </div>
 </DocumentFragment>
 `;

services/QuillLMS/client/app/bundles/Shared/components/shared/dataTableChip.tsx

@@ -7,22 +7,31 @@ interface DataTableChipProps {
     src: string
   },
   label: string,
-  link?: string
+  link?: string,
+  onClick?: (e: any) => void
 }
 
-export const DataTableChip = ({ color, icon, label, link }: DataTableChipProps) => {
+export const DataTableChip = ({ color, icon, label, link, onClick }: DataTableChipProps) => {
   if(link) {
     return(
       <a className={`data-table-chip ${color} focus-on-light`} href={link}>
         {icon && <img alt={icon.alt} src={icon.src} />}
-        <p>{label}</p>
+        <span>{label}</span>
       </a>
     )
   }
+  if (onClick) {
+    return (
+      <button className={`data-table-chip ${color} focus-on-light`} onClick={onClick} type="submit">
+        {icon && <img alt={icon.alt} src={icon.src} />}
+        <span>{label}</span>
+      </button>
+    )
+  }
   return (
     <div className={`data-table-chip ${color}`}>
       {icon && <img alt={icon.alt} src={icon.src} />}
-      <p>{label}</p>
+      <span>{label}</span>
     </div>
   )
 }

services/QuillLMS/client/app/bundles/Shared/styles/data_table.scss

@@ -162,12 +162,12 @@ table.data-table {
           background-color: $quill-grey-1;
           border: 1px solid $quill-grey-15;
 
-          p {
+          span {
             color: $quill-grey-90;
           }
         }
 
-        p {
+        span {
           @include display-xs;
           color: $quill-green;
           margin-left: 4px;

services/QuillLMS/client/app/bundles/Teacher/components/assignment_flow/classroom_lessons.jsx

@@ -187,20 +187,26 @@ export default class ClassroomLessons extends React.Component {
   }
 
   renderEmptyState() {
-    const assignLessonsLink = <a className="bg-quillgreen text-white" href="/assign/activity-library?activityClassificationFilters[]=lessons" target="_blank">Assign Lessons</a>  // eslint-disable-line react/jsx-no-target-blank
-    const learnMoreLink = <a className="bg-white text-quillgreen" href="/tools/lessons" target="_blank">Learn More</a> // eslint-disable-line react/jsx-no-target-blank
+    const assignLessonsLink = <a className="quill-button medium contained green focus-on-light" href="/assign/activity-library?activityClassificationFilters[]=lessons" rel="noopener noreferrer" target="_blank">Assign Lessons</a>
+    const learnMoreLink = <a className="quill-button medium outlined green focus-on-light" href="/tools/lessons" rel="noopener noreferrer" target="_blank">Learn More</a>
     return (
-      <div className="empty-lessons manage-units gray-background-accommodate-footer">
-        <div className="content">
-          <h1>You have no lessons assigned!</h1>
-          <p>In order to launch a lesson, you need to assign a lesson to one of your classes.</p>
-          <p>With Quill Lessons, teachers can use Quill to lead whole-class lessons and to see and display student responses in real-time.</p>
-          <div className="buttons">
-            {assignLessonsLink}
-            {learnMoreLink}
+      <div className="gray-background-accommodate-footer">
+        <div className="container my-lessons manage-units">
+          <div className="top-section">
+            <div className="my-lessons-header">
+              <h1>Launch Lessons</h1>
+            </div>
+          </div>
+          <div className="empty-lessons-content">
+            <h2>You have no lessons assigned</h2>
+            <p>In order to launch a lesson, you need to assign a lesson to one of your classes.</p>
+            <p>With Quill Lessons, teachers can use Quill to lead whole-class lessons and to see and display student responses in real-time.</p>
+            <div className="buttons">
+              {assignLessonsLink}
+              {learnMoreLink}
+            </div>
           </div>
         </div>
-        <img alt="cartoon of a teacher gesturing at a projector screen showing Quill Lessons content" src={`${process.env.CDN_URL}/images/illustrations/empty_state_illustration_lessons.svg`} />
       </div>
     );
   }
@@ -235,12 +241,15 @@ export default class ClassroomLessons extends React.Component {
       return (
         <div className="gray-background-accommodate-footer" id="lesson_planner">
           <div className="container my-lessons manage-units">
-            {this.renderHeader()}
-            <ItemDropdown
-              callback={this.switchClassrooms}
-              items={classrooms}
-              selectedItem={classrooms.find(classy => classy.id === selectedClassroomId)}
-            />
+            <div className="top-section">
+              {this.renderHeader()}
+              <ItemDropdown
+                callback={this.switchClassrooms}
+                className="bordered medium"
+                items={classrooms}
+                selectedItem={classrooms.find(classy => classy.id === selectedClassroomId)}
+              />
+            </div>
             <Units
               data={this.parseUnits(lessons)}
               lesson