From 4b1be30dc0ef076c11c55520be08b210bf6d2283 Mon Sep 17 00:00:00 2001
From: Bruno Windels <bruno@windels.cloud>
Date: Wed, 9 Feb 2022 19:01:35 +0100
Subject: [PATCH] improve form-row classes so they can work with create room
 form

---
 src/platform/web/ui/css/form.css               |  2 +-
 src/platform/web/ui/css/layout.css             | 11 +++++++++++
 .../web/ui/css/themes/element/theme.css        | 18 ++++++++++++++++--
 src/platform/web/ui/login/PasswordLoginView.js |  4 ++--
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/platform/web/ui/css/form.css b/src/platform/web/ui/css/form.css
index bdb47bec..f5452c65 100644
--- a/src/platform/web/ui/css/form.css
+++ b/src/platform/web/ui/css/form.css
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.form input {
+.form .form-row.text > input, .form .form-row.text > textarea {
   display: block;
   width: 100%;
   min-width: 0;
diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css
index a85ab109..2b3a04ae 100644
--- a/src/platform/web/ui/css/layout.css
+++ b/src/platform/web/ui/css/layout.css
@@ -216,3 +216,14 @@ the layout viewport up without resizing it when the keyboard shows */
     justify-content: center;
     align-items: center;
 }
+
+.vertical-layout {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+}
+
+.vertical-layout > .stretch {
+    flex: 1 0 0;
+}
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index 5ed8b4c9..eae02ee8 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -80,11 +80,19 @@ limitations under the License.
     flex: 1 0 auto;
 }
 
+.form textarea {
+    font-family: "Inter", sans-serif;
+}
+
+.form-group {
+    margin: 24px 0;
+}
+
 .form-row {
     margin: 12px 0;
 }
 
-.form-row input {
+.form-row.text > input, .form-row.text > textarea {
     padding: 12px;
     border: 1px solid rgba(141, 151, 165, 0.15);
     border-radius: 8px;
@@ -92,7 +100,13 @@ limitations under the License.
     font-size: 1em;
 }
 
-.form-row label, .form-row input {
+.form-row.check {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+}
+
+.form-row.text > label, .form-row.text > input {
     display: block;
 }
 
diff --git a/src/platform/web/ui/login/PasswordLoginView.js b/src/platform/web/ui/login/PasswordLoginView.js
index 4360cc0f..6f47555d 100644
--- a/src/platform/web/ui/login/PasswordLoginView.js
+++ b/src/platform/web/ui/login/PasswordLoginView.js
@@ -41,8 +41,8 @@ export class PasswordLoginView extends TemplateView {
                 }
             }, [
                 t.if(vm => vm.errorMessage, (t, vm) => t.p({className: "error"}, vm.i18n(vm.errorMessage))),
-                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 text" }, [t.label({ for: "username" }, vm.i18n`Username`), username]),
+                t.div({ className: "form-row text" }, [t.label({ for: "password" }, vm.i18n`Password`), password]),
                 t.div({ className: "button-row" }, [
                     t.button({
                         className: "button-action primary",