style login page

src/ui/web/css/form.css

@@ -15,10 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.form > div {
-  margin: 0.4em 0;
-}
-
 .form input {
   display: block;
   width: 100%;

src/ui/web/css/login.css

@@ -28,7 +28,6 @@ limitations under the License.
 
 .SessionPickerView li {
     margin: 0.4em 0;
-    padding: 0.5em;
 }
 
 .SessionPickerView .session-info {

src/ui/web/css/themes/element/theme.css

@@ -72,6 +72,22 @@ limitations under the License.
     flex: 1 0 auto;
 }
 
+.form-row {
+    margin: 12px 0;
+}
+
+.form-row input {
+    padding: 12px;
+    border: 1px solid rgba(141, 151, 165, 0.15);
+    border-radius: 8px;
+    margin-top: 5px;
+    font-size: 1em;
+}
+
+.form-row label, .form-row input {
+    display: block;
+}
+
 button.styled.secondary {
     color: #03B381;
 }

src/ui/web/general/html.js

@@ -94,7 +94,7 @@ export const TAG_NAMES = {
     [HTML_NS]: [
         "a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6",
         "p", "strong", "em", "span", "img", "section", "main", "article", "aside",
-        "pre", "button", "time", "input", "textarea"],
+        "pre", "button", "time", "input", "textarea", "label"],
     [SVG_NS]: ["svg", "circle"]
 };
 

src/ui/web/login/LoginView.js

@@ -21,23 +21,49 @@ import {SessionLoadView} from "./SessionLoadView.js";
 export class LoginView extends TemplateView {
     render(t, vm) {
         const disabled = vm => !!vm.isBusy;
-        const username = t.input({type: "text", placeholder: vm.i18n`Username`, disabled});
+        const username = t.input({
-        const password = t.input({type: "password", placeholder: vm.i18n`Password`, disabled});
+            id: "username",
-        const homeserver = t.input({type: "text", placeholder: vm.i18n`Your matrix homeserver`, value: vm.defaultHomeServer, disabled});
+            type: "text",
-        return t.div({className: "LoginView form"}, [
+            placeholder: vm.i18n`Username`,
-            t.h1([vm.i18n`Log in to your homeserver`]),
+            disabled
-            t.if(vm => vm.error, t.createTemplate(t => t.div({className: "error"}, vm => vm.error))),
+        });
-            t.div(username),
+        const password = t.input({
-            t.div(password),
+            id: "password",
-            t.div(homeserver),
+            type: "password",
-            t.div(t.button({
+            placeholder: vm.i18n`Password`,
-                onClick: () => vm.login(username.value, password.value, homeserver.value),
+            disabled
-                disabled
+        });
-            }, vm.i18n`Log In`)),
+        const homeserver = t.input({
-            t.div(t.button({onClick: () => vm.cancel(), disabled}, [vm.i18n`Pick an existing session`])),
+            id: "homeserver",
-            // use t.mapView rather than t.if to create a new view when the view model changes too
+            type: "text",
-            t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadView(loadViewModel) : null),
+            placeholder: vm.i18n`Your matrix homeserver`,
-            t.p(hydrogenGithubLink(t))
+            value: vm.defaultHomeServer, 
+            disabled
+        });
+        
+        return t.div({className: "PreSessionScreen"}, [
+            t.div({className: "logo"}),
+            t.div({className: "LoginView form"}, [
+                t.h1([vm.i18n`Sign In`]),
+                t.if(vm => vm.error, t.createTemplate(t => t.div({className: "error"}, vm => vm.error))),
+                t.div({className: "form-row"}, [t.label({for: "username"}, vm.i18n`Username`), username]),
+                t.div({className: "form-row"}, [t.label({for: "password"}, vm.i18n`Password`), password]),
+                t.div({className: "form-row"}, [t.label({for: "homeserver"}, vm.i18n`Homeserver`), homeserver]),
+                t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadView(loadViewModel) : null),
+                t.div({className: "button-row"}, [
+                    t.button({
+                        className: "styled secondary",
+                        onClick: () => vm.cancel(), disabled
+                    }, [vm.i18n`Go Back`]),
+                    t.button({
+                        className: "styled primary",
+                        onClick: () => vm.login(username.value, password.value, homeserver.value),
+                        disabled
+                    }, vm.i18n`Log In`),
+                ]),
+                // use t.mapView rather than t.if to create a new view when the view model changes too
+                t.p(hydrogenGithubLink(t))
+            ])
         ]);
     }
 }