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",