PR feedback and receiept template updates

lms/static/sass/views/_shoppingcart.scss

@@ -309,11 +309,16 @@ $light-border: 1px solid $gray-l5;
         color: $light-gray2;
       }
 
-      .course-display-name,
-      .course-display-dates {
-        @extend %t-title4;
-        display: block;
-        color: $dark-gray2;
+      .course-title-info {
+        display: inline-block;
+        width: 60%;
+      }
+
+      .course-meta-info {
+        @include float(right);
+        @include text-align(right);
+        display: inline-block;
+        width: 35%;
       }
 
       .course-registration-title,
@@ -325,20 +330,15 @@ $light-border: 1px solid $gray-l5;
         color: $light-gray2;
       }
 
+      .course-display-name,
       .course-display-dates {
-        @include clearfix();
-      }
-
-      .course-title-info {
-        display: inline-block;
-        width: 60%;
+        @extend %t-title4;
+        display: block;
+        color: $dark-gray2;
       }
 
-      .course-meta-info {
-        @include float(right);
-        @include text-align(right);
-        display: inline-block;
-        width: 35%;
+      .course-display-dates {
+        @include clearfix();
       }
 
       h1 {
@@ -907,6 +907,7 @@ $light-border: 1px solid $gray-l5;
       span {
         @include padding-left($baseline*3);
         text-transform: capitalize;
+        letter-spacing: 0;
 
         .blue-link {
           @extend %t-copy-sub1;
@@ -928,7 +929,7 @@ $light-border: 1px solid $gray-l5;
     color: $dark-gray1;
 
     h2 {
-      font-family: $sans-serif;
+      @extend %t-title5;
     }
   }
 
@@ -1033,7 +1034,7 @@ $light-border: 1px solid $gray-l5;
 
   h2 {
     @include text-align(center);
-    @extend %t-title4;
+    @extend %t-title5;
     @extend %t-strong;
     margin-top: $baseline;
     margin-bottom: ($baseline/4);

lms/templates/shoppingcart/receipt.html

@@ -280,7 +280,7 @@ from courseware.courses import course_image_url, get_course_about_section, get_c
         </div>
       </div>
     % endif
-    <hr class="border"/>
+
     % for item, course in shoppingcart_items:
       % if loop.index > 0 :
         <hr>
@@ -292,8 +292,13 @@ from courseware.courses import course_image_url, get_course_about_section, get_c
                  alt="${course.display_number_with_default | h} ${get_course_about_section(course, 'title')} Image"/>
           </div>
           <div class="data-input">
-            <h3>${_("Registration for")}:
-              <span class="pull-right">
+
+            <h3 class="course-title-info" id="course-title">
+              <span class="course-registration-title">${_('Registration for:')}</span>
+              <span class="course-display-name">${ course.display_name }</span>
+            </h3>
+            <p class="course-meta-info" aria-describedby="course-title">
+              <span class="course-dates-title">
                 <%
                     course_start_time = course.start_datetime_text()
                     course_end_time = course.end_datetime_text()
@@ -302,19 +307,17 @@ from courseware.courses import course_image_url, get_course_about_section, get_c
                   ${_("Course Dates")}:
                 %endif
               </span>
-            </h3>
-
-            <h1>${course.display_name}</h1>
-            <span class="pull-right">
-              % if course_start_time:
-                ${course_start_time}
-              %endif
-              -
-              % if course_end_time:
-                ${course_end_time}
-              %endif
-            </span>
-            <hr/>
+              <span class="course-display-dates">
+                % if course_start_time:
+                  ${course_start_time}
+                %endif
+                -
+                % if course_end_time:
+                  ${course_end_time}
+                %endif
+              </span>
+            </p>
+            <hr>
             <div class="three-col">
               % if item.status == "purchased":
                 <div class="col-1">