visual cleanup to view and edit certificates page in studio

cms/static/sass/views/_certificates.scss

@@ -33,17 +33,30 @@
       @extend %no-content;
     }
 
-    .wrapper-certificate {
+    .wrapper-certificates {
 
       .title {
         @extend %t-title4;
         @extend %t-strong;
-        margin-bottom: ($baseline/2);
       }
 
       .copy {
         @extend %t-copy-sub1;
       }
+
+      .instructions {
+        @extend %t-copy-sub1;
+        margin-bottom: $baseline;
+      }
+    }
+
+    .certificate-settings {
+      margin-bottom: $baseline;
+    }
+
+    .actual-course-title {
+      @extend %t-strong;
+      margin-bottom: $baseline;
     }
   }
 
@@ -205,6 +218,10 @@
 
       .wrapper-form {
         padding: $baseline ($baseline*1.5);
+
+        label {
+          @extend %t-strong;
+        }
       }
 
       .action-add-signatory {

cms/templates/js/certificate-details.underscore

@@ -13,42 +13,48 @@
         </li>
      <% } %>
      <% if (showDetails) { %>
+         <section class="certificate-settings course-details">
              <header>
-           <span class="title"><%= gettext("Certificate Details") %></span>
+               <h2 class="title title-2"><%= gettext("Certificate Details") %></h2>
              </header>
              <div class='certificate-info-section'>
                  <div class='course-title-section pull-left'>
-                <div class="actual-course-title">
-                        <span class="certificate-label"><b><%= gettext('Course Title') %>: </b> </span>
+                    <p class="actual-course-title">
+                            <span class="certificate-label"><%= gettext('Course Title') %>: </span>
                             <span class="certificate-value"><%= course.get('name') %></span>
-                </div>
+                    </p>
                     <% if (course_title) { %>
-                    <div class="course-title-override">
+                        <p class="course-title-override">
                             <span class="certificate-label"><b><%= gettext('Course Title Override') %>: </b></span>
                             <span class="certificate-value"><%= course_title %></span>
-                    </div>
+                        </p>
                     <% } %>
                  </div>
 
                 <div class='course-number-section pull-left'>
-                <div class="actual-course-number">
+                    <p class="actual-course-number">
                             <span class="certificate-label"><b><%= gettext('Course Number') %>: </b> </span>
                             <span class="certificate-value"><%= course.get('num') %></span>
-                </div>
+                    </p>
 
                     <% if (course.get('display_course_number')) { %>
-                    <div class="course-number-override">
+                        <p class="course-number-override">
                             <span class="certificate-label"><b><%= gettext('Course Number Override') %>: </b></span>
                             <span class="certificate-value"><%= course.get('display_course_number') %></span>
-                    </div>
+                        </p>
                     <% } %>
                 </div>
             </div>
+        </section>
+
 
-         <header style='margin-top: 30px;'>
-           <span class="title"><%= gettext("Certificate Signatories") %></span>
+        <section class="certificate-settings signatories">
+             <header>
+               <h2 class="title title-2"><%= gettext("Certificate Signatories") %></h2>
              </header>
+             <p class="instructions">It is strongly recommended that you include four or fewer signatories. If you include additional signatories, preview the certificate in Print View to ensure the certificate will print correctly on one page.</p>
              <div class="signatory-details-list"></div>
+        </section>
     <% } %>
    </ol>
 

cms/templates/js/certificate-editor.underscore

@@ -19,8 +19,11 @@
                 <textarea id="certificate-description-<%= uniqueId %>" class="certificate-description-input text input-text" name="certificate-description" placeholder="<%= gettext("Description of the certificate") %>" aria-describedby="certificate-description-<%=uniqueId %>-tip"><%= description %></textarea>
                 <span id="certificate-description-<%= uniqueId %>-tip" class="tip tip-stacked"><%= gettext("Description of the certificate") %></span>
             </div>
-            <div class="field text actual-course-title">
-                <label class="actual-course-title"><b><%= gettext("Course Title") %></b></label>
+            <header>
+              <h2 class="title title-2"><%= gettext("Certificate Details") %></h2>
+            </header>
+            <div class="actual-course-title">
+                <span class="actual-course-title"><%= gettext("Course Title") %>: </span>
                 <span class="actual-title"><%= course.get('name') %></span>
             </div>
             <div class="input-wrap field text add-certificate-course-title">
@@ -30,8 +33,9 @@
             </div>
         </fieldset>
          <header>
-            <span class="title"><%= gettext("Certificate Signatories") %></legend>
+            <h2 class="title title-2"><%= gettext("Certificate Signatories") %></h2>
          </header>
+         <p class="instructions">It is strongly recommended that you include four or fewer signatories. If you include additional signatories, preview the certificate in Print View to ensure the certificate will print correctly on one page.</p>
         <div class="signatory-edit-list"> </div>
         <span>
            <button class="action action-add-signatory" type="button"><%= gettext("Add Additional Signatory") %></button>