Fix styling for proctoring banner inside + outside bootstrap

also a11y update: up contrast on proctored exam interstitials to be
WCAG2AAA compliant

JIRA:EDUCATOR-3871

lms/static/sass/course/courseware/_courseware.scss

@@ -152,6 +152,12 @@ html.video-fullscreen {
     }
 
     div.timed-exam {
+      color: #555353;
+
+      strong {
+        font-weight: 600;
+      }
+
       h3 {
         margin-bottom: 12px;
         font-size: 22px;
@@ -181,14 +187,6 @@ html.video-fullscreen {
         }
       }
 
-      p {
-        color: #666666;
-
-        strong {
-          font-weight: 600;
-        }
-      }
-
       button.gated-sequence {
         background: $transparent;
         color: theme-color("primary");

lms/static/sass/course/layout/_courseware_preview.scss

@@ -67,8 +67,7 @@
   }
 
   .exam-timer {
-    @include font-size(14);
-
+    font-size: 14px;
     background-color: rgb(229, 234, 236);
     padding: $baseline ($baseline*2);
     border-left: 4px solid theme-color("primary");
@@ -128,7 +127,8 @@
           background-color: transparent;
           border: 1px solid $white;
 
-          #toggle_timer, b {
+          #toggle_timer,
+          b {
             color: $white;
           }
 

lms/templates/courseware/proctored-exam-status.underscore

@@ -7,13 +7,14 @@
         }
     %>
     <div class='exam-text'>
+        <% // xss-lint: disable=underscore-not-escaped %>
         <%= interpolate_text('You are taking "{exam_link}" as a {exam_type} exam. The timer on the right shows the time remaining in the exam.', {exam_link: "<a href='" + exam_url_path + "'>"+gtLtEscape(exam_display_name)+"</a>", exam_type: (!_.isUndefined(arguments[0].exam_type)) ? exam_type : gettext('timed')}) %>
         <%- gettext('To receive credit for problems, you must select "Submit" for each problem before you select "End My Exam".') %>
     </div>
     <div id="turn_in_exam_id" class="pull-right turn_in_exam">
         <span>
             <% if(attempt_status !== 'ready_to_submit') {%>
-                <button class="exam-button-turn-in-exam btn btn-pl-primary">
+                <button class="exam-button-turn-in-exam btn btn-pl-primary btn-primary">
                     <%- gettext("End My Exam") %>
                 </button>
             <% } %>
@@ -24,7 +25,7 @@
                 <b>
                 </b>
             </span>
-            <button role="button" id="toggle_timer" aria-label="<%- gettext("Hide Timer") %>" aria-pressed="false">
+            <button role="button" id="toggle_timer" class="btn btn-primary" aria-label="<%- gettext("Hide Timer") %>" aria-pressed="false">
                 <i class="fa fa-eye-slash" aria-hidden="true"></i>
             </button>
         </span>