css changes for status bar

src/ui/web/css/main.css

@@ -14,19 +14,32 @@
     color: white;
 }
 
-.hidden {
+.hiddenWithLayout {
     visibility: hidden;
 }
 
-.SyncStatusBar {
-    background-color: #555;
-    display: none;
+.hidden {
+    display: none !important;
 }
 
-.SyncStatusBar_shown {
-    display: unset;
+.SessionStatusView {
+    display: flex;
+    padding: 5px;
+    background-color: #555;
 }
 
+.SessionStatusView p {
+    margin: 0 10px;
+}
+
+.SessionStatusView button {
+    border: none;
+    background: none;
+    color: currentcolor;
+    text-decoration: underline;
+}
+
+
 .RoomPlaceholderView {
     display: flex;
     align-items: center;

src/ui/web/login/SessionLoadView.js

@@ -4,7 +4,7 @@ import {spinner} from "../common.js";
 export class SessionLoadView extends TemplateView {
     render(t) {
         return t.div({className: "SessionLoadView"}, [
-            spinner(t, {hidden: vm => !vm.loading}),
+            spinner(t, {hiddenWithLayout: vm => !vm.loading}),
             t.p(vm => vm.loadLabel)
         ]);
     }