some minimal styling for login and session picker

src/ui/web/css/main.css

@@ -26,3 +26,35 @@ body {
     justify-content: center;
     flex-direction: row;
 }
+
+.SessionPickerView {
+  padding: 0.4em;
+}
+
+.SessionPickerView ul {
+  list-style: none;
+  padding: 0;
+}
+
+.SessionPickerView li {
+  margin: 0.4em 0;
+  font-size: 1.2em;
+  background-color: grey;
+  padding: 0.5em;
+  cursor: pointer;
+}
+
+.LoginView {
+  padding: 0.4em;
+}
+
+.form > div {
+  margin: 0.4em 0;
+}
+
+.form input {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+

src/ui/web/login/LoginView.js

@@ -9,7 +9,8 @@ export default class LoginView extends TemplateView {
         const username = t.input({type: "text", placeholder: vm.usernamePlaceholder});
         const password = t.input({type: "password", placeholder: vm.passwordPlaceholder});
         const homeserver = t.input({type: "text", placeholder: vm.hsPlaceholder, value: vm.defaultHomeServer});
-        return t.div({className: "login form"}, [
+        return t.div({className: "LoginView form"}, [
+            t.h1(["Log in to your homeserver"]),
             t.if(vm => vm.error, t => t.div({className: "error"}, vm => vm.error)),
             t.div(username),
             t.div(password),
@@ -18,7 +19,7 @@ export default class LoginView extends TemplateView {
                 onClick: () => vm.login(username.value, password.value, homeserver.value),
                 disabled: vm => vm.loading
             }, "Log In")),
-            t.div(t.button({onClick: () => vm.cancel()}, ["Cancel"]))
+            t.div(t.button({onClick: () => vm.cancel()}, ["Pick an existing session"]))
         ]);
     }
 }

src/ui/web/login/SessionPickerView.js

@@ -3,7 +3,7 @@ import TemplateView from "../general/TemplateView.js";
 
 class SessionPickerItem extends TemplateView {
     render(t) {
-        return t.li([vm => `${vm.userId}@${vm.homeServer}`]);
+        return t.li([vm => vm.userId]);
     }
 }
 
@@ -22,8 +22,9 @@ export default class SessionPickerView extends TemplateView {
 
     render(t) {
         return t.div({className: "SessionPickerView"}, [
+            t.h1(["Pick a session"]),
             this._sessionList.mount(),
-            t.button({onClick: () => this.viewModel.cancel()}, ["Cancel"])
+            t.button({onClick: () => this.viewModel.cancel()}, ["Log in to a new session instead"])
         ]);
     }