WIP: Add toggle timer functionality

JavaScript needs to be moved to edx-proctoring repo

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

@@ -88,9 +88,6 @@
       }
       .pull-right {
         color: $gray-l3;
-        b {
-          color: $white;
-        }
 
         .exam-button-turn-in-exam {
           background-color: transparent;
@@ -103,6 +100,27 @@
             color: $action-primary-bg;
           }
         }
+        .exam-timer-clock {
+          background-color: transparent;
+          border: 1px solid $white;
+          a, b {
+            color: $white;
+          }
+          a {
+            // Overrides:
+            border-top: none;
+            border-right: none;
+            border-bottom: none;
+            border-top-right-radius: 2px;
+            border-bottom-right-radius: 2px;
+            &:hover {
+              // Overrides:
+              border-top: none;
+              border-right: none;
+              border-bottom: none;
+            }
+          }
+        }
       }
     }
     &.warning {
@@ -128,5 +146,24 @@
         border: 0;
       }
     }
+    .exam-timer-clock {
+      display: inline-block;
+      padding: 0 0 0 ($baseline/3);
+      background-color: $gray-l3;
+      border-radius: 3px;
+
+      a {
+        @extend .exam-button-turn-in-exam;
+
+        //Overrides:
+        padding: ($baseline/5) ($baseline/3);
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        margin-right: 0;
+      }
+      b {
+        padding-right: ($baseline/5);
+      }
+    }
   }
 }

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

@@ -19,9 +19,26 @@
             <% } %>
         </span>
         <span class="sr timer-announce" aria-live="assertive"></span>
-        <span id="time_remaining_id">
-            <b>
-            </b>
+        <span class="exam-timer-clock">
+            <span id="time_remaining_id" style="visibility: visible;">
+                <b>
+                </b>
+            </span>
+            <a id="toggle_timer" href="#" title="<%- gettext("Hide Timer") %>"><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
+            <script type="text/javascript">
+                $("#toggle_timer").click(function() {
+                    if ($("#time_remaining_id").css("visibility") === "visible") {
+                        $("#time_remaining_id").css("visibility", "hidden");
+                        $(this).attr("title", "<%- gettext("Show Timer") %>");
+                        $(this).find("i").removeClass("fa-eye-slash").addClass("fa-eye");
+                    } else {
+                        $("#time_remaining_id").css("visibility", "visible");
+                        $(this).attr("title", "<%- gettext("Hide Timer") %>");
+                        $(this).find("i").removeClass("fa-eye").addClass("fa-eye-slash");
+                    }
+                    return false; // prevents the window from scrolling up on click
+                });
+            </script>
         </span>
     </div>
 </div>