convert old tables to new within assignments

Fixes: CNVS-23959

Notes:
- includes assignment dates as well as the quiz attempts tables

Test Plan:
- as a teacher using the old or new UI
- navigate to a course with an assignment or create a new assignment
- upon saving if new or below an existing course is a table that
  contains "Due" "For" "Available For" and "Until" - - upon inspection
  the table class should now be "ic-Table" (which is the new styleguide
  version)
- there is a quiz attempt history that will display a table under the
  assignment dates

Notes:
- a new component has also been created in order to allow action items (in
  this case the + Rubric button) to fall directly under the table giving
  them breathing room top and bottom

Change-Id: Ice3db093f36dd13d00382c549a6f5215ed67e855
Reviewed-on: https://gerrit.instructure.com/65040
Tested-by: Jenkins
Reviewed-by: Chris Hart <chart@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>
QA-Review: Myller de Araujo <myller@instructure.com>

app/stylesheets/bundles/common.scss

@@ -34,3 +34,4 @@
 @import "components/ic-expand-link";
 @import "vendor/mediaelementplayer";
 @import "base/custom_mediaelementplayer";
+

app/stylesheets/components/_tables.scss

@@ -252,6 +252,10 @@ $sp-table: 14px; // Will replace this with global spacing variable, when it hits
     border-bottom-color: $ic-border-dark;
     padding-bottom: $sp-table/2;
     font-weight: bold;
+    // If you need to use headers for the row in order to kick in the bold font for the first cell of the row
+    &.ic-Table--header-row {
+      border-bottom-color: $ic-border-light;
+    }
   }
 
   td {

app/stylesheets/pages/assignments/_assignments.scss

@@ -111,6 +111,7 @@
     margin-bottom: 0;
   }
   .assignment_dates {
+    @if $use_new_styles == false {
       border-collapse: collapse;
       width: 100%;
       margin-bottom: 1em;
@@ -130,6 +131,7 @@
         }
       }
     }
+  }
   .description.student-version {
     min-height: 260px;
   }

app/stylesheets/pages/quizzes/_quizzes.scss

@@ -118,6 +118,7 @@ li.quiz {
     }
   }
   .assignment_dates {
+    @if $use_new_styles == false {
       border-collapse: collapse;
       width: 100%;
       margin-bottom: 1em;
@@ -137,6 +138,7 @@ li.quiz {
         }
       }
     }
+  }
   ul#quiz_student_details {
     list-style: none;
     padding: 0;
@@ -2102,34 +2104,7 @@ ul#quiz_versions {
 #quiz-submission-version-table {
   margin: 30px 0 20px 0;
   @include clearfix;
-  .desc {
-    width: 22%;
-    float: left;
-    margin-right: 2%;
-    text-align: right;
-    font-size: 110%;
-    color: #555;
-  }
-  table {
-    width: 65%;
-    float: left;
-    margin-bottom: 10px;
-    border-color: #a7acb3;
-  }
-  td {
-    padding: 4px 8px;
-    border-color: #a7acb3;
-  }
-  thead td.regraded {
-    color: white;
-    background-color: #f89508;
-    text-shadow: 0 -1px 0 #cf9b47;
-    border-top: none;
-  }
-  td.regraded {
-    border-top: 1px solid #C4AE90;
-    background-color: $warningBackground;
-  }
+
   .submission-pending-review {
     width: 65%;
     float: left;

app/views/assignments/show.html.erb

@@ -160,7 +160,7 @@
       </fieldset>
     </form>
 
-    <table class="table assignment_dates">
+    <table class="ic-Table assignment_dates">
       <thead>
         <tr>
           <th scope="col"><%= t(:due, 'Due') %></th>
@@ -176,12 +176,14 @@
     </table>
 
     <% if can_do(@assignment, @current_user, :update) %>
+      <div class="content-box">
         <a
           href="<%= context_url(@context, :context_rubrics_url) %>"
           class="add_rubric_link btn button-sidebar-wide icon-add"
           style="<%= hidden if @assignment.rubric_association %>"
           role="button"
         ><%= t 'links.add_rubric', "Add Rubric" %></a>
+      </div>
     <% end %>
 
     <div class="course_id" style="display: none;"><%= @context.id if @context && @context.is_a?(Course) %></div>

app/views/quizzes/quizzes/_quiz_show_teacher.html.erb

@@ -217,7 +217,7 @@
   </fieldset>
 </form>
 
-<table class="table assignment_dates">
+<table class="ic-Table assignment_dates">
   <thead>
     <tr>
       <th scope="col"><%= t(:due, 'Due') %></th>

app/views/quizzes/quizzes/_submission_version.html.erb

@@ -1,5 +1,5 @@
 <tr class="<%= 'kept' if kept %>">
-  <th scope="row">
+  <th scope="row" class="ic-Table--header-row">
     <% if kept %>
       <%= t 'kept', 'KEPT' %>
     <% elsif version.version_number == @submission.version_number %>

app/views/quizzes/quizzes/submission_versions.html.erb

@@ -1,10 +1,10 @@
   <div class="desc">
-    <%= t 'attempt_history', 'Attempt History' %>
+    <h3><%= t 'attempt_history', 'Attempt History' %></h3>
   </div>
-  <table class="table table-bordered" summary="<%= t('quiz_attempt_history_description', 'A table that shows your quiz attempt history. Each attempt is on the left side. The attempt, time, and score are across the top.')%>">
+  <table class="ic-Table ic-Table--condensed" summary="<%= t('quiz_attempt_history_description', 'A table that shows your quiz attempt history. Each attempt is on the left side. The attempt, time, and score are across the top.')%>">
     <thead>
       <tr>
-        <td>&nbsp;</td>
+        <th>&nbsp;</th>
         <th scope="col"><%= t 'attempt', 'Attempt' %></th>
         <th  scope="col"><%= t 'time', 'Time' %></th>
         <th scope="col"><%= t 'score', 'Score' %></th>