Style the reconnect banner, clean up apply usage

css/glowingbear.css

@@ -267,11 +267,13 @@ td.time {
     top: 35px;
     position: fixed;
     z-index: 9999;
-    background-color: #eee;
-    color: #333;
-    width: 100%;
+    width: 80%;
     margin: 0;
     padding: 5px;
+    left: 10%;
+}
+#reconnect a {
+    color: white;
 }
 
 .footer {

index.html

@@ -289,15 +289,17 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
             </tr>
           </tbody>
         </table><span id="end-of-buffer"></span>
-        <div id="reconnect" ng-if="reconnecting">
-          <i class="glyphicon glyphicon-refresh"></i> Reconnecting... <a ng-click="reconnect()">Try now</a>
-        </div>
       </div>
       <div class="footer" ng-class="{'withnicklist': showNicklist}">
         <div input-bar input-id="sendMessage" command="command"></div>
       </div>
     </div>
     <div id="soundNotification"></div>
+    <div id="reconnect" class="alert alert-danger" ng-click="reconnect()" ng-show="reconnecting">
+        <p><strong>Connection to WeeChat lost</strong></p>
+        <i class="glyphicon glyphicon-refresh"></i>
+        Reconnecting... <a class="btn btn-tiny" ng-click="reconnect()">Click to try to reconnect now</a>
+    </div>
     <div id="settingsModal" class="gb-modal" data-state="hidden">
       <div class="backdrop" ng-click="closeModal($event)"></div>
       <div class="modal-dialog">

js/connection.js

@@ -184,10 +184,10 @@ weechat.factory('connection',
         $log.info('Attempting to reconnect...');
         var d = connectionData;
         connect(d[0], d[1], d[2], d[3], d[4], function() {
+            $rootScope.reconnecting = false;
             // on success, update active buffer
             models.setActiveBuffer(bufferId);
             $log.info('Sucessfully reconnected to relay');
-            $rootScope.reconnecting = false;
         }, function() {
             // on failure, schedule another attempt
             if (timeout >= 600000) {
@@ -217,6 +217,8 @@ weechat.factory('connection',
         }
 
         $rootScope.reconnecting = true;
+        // Have to do this to get the reconnect banner to show
+        $rootScope.$apply();
 
         var bufferId = models.getActiveBuffer().id,
             timeout = 3000;  // start with a three-second timeout

js/websockets.js

@@ -110,7 +110,6 @@ function($rootScope, $q) {
             $rootScope.$emit('onMessage', message);
         }
 
-        $rootScope.$apply();
     };
 
     var connect = function(url,