cleanup of button toggle

BinaryDad.Coding/Pages/Shared/_Layout.cshtml

@@ -18,7 +18,7 @@
             <div class="collapse navbar-collapse right">
                 <ul class="navbar-nav ml-auto">
                     <li class="nav-item">
-                        <span class="navbar-text btn" id="live-mode-status"></span>
+                        <div class="navbar-text btn font-italic" id="live-mode-status">With <strong>Live Mode</strong> enabled, anything the teacher types will show in your editor</div>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link btn" id="live-mode-link" href="#live">Live Mode</a>

BinaryDad.Coding/wwwroot/css/site.css

@@ -6,6 +6,14 @@
     height: 600px;
 }
 
-textarea {
+textarea, .navbar-brand {
     font-family: 'Roboto Mono', monospace;
-}
+}
+
+.navbar-brand {
+    font-size: 26px;
+}
+
+#live-mode-status {
+    display: none;
+}

BinaryDad.Coding/wwwroot/js/hub.js

@@ -6,15 +6,20 @@
     let isLive = false;
 
     let isLiveMode = function () {
+
         isLive = window.location.hash === '#live';
 
         $liveModeLink
             .toggleClass('btn-success text-white', isLive)
             .attr('href', isLive ? '#' : '#live');
 
-        $liveModeStatus.html(isLive ? 'Anything the teacher types will show in your editor' : 'You can mess around all you like!');
+        if (isLive) {
+            $liveModeStatus.fadeIn();
+        } else {
+            $liveModeStatus.fadeOut();
+        }
 
-        console.log('live mode: ' + isLive);
+        
     };
 
     let isTeacher = window.location.hash === '#teacher';
@@ -29,7 +34,6 @@
         //window.location.hash = '#';
         $liveModeLink.hide();
         $liveModeStatus.hide();
-        console.log('teacher mode active');
     }
 
     let $editors = $('.ace_editor');