From f611ce8c09d41a9222e298bf0bdcdc60cd24b73e Mon Sep 17 00:00:00 2001
From: Midhun Suresh <midhunr@element.io>
Date: Fri, 14 Jan 2022 13:33:36 +0530
Subject: [PATCH] Add some styling
---
src/style.css | 43 +++++++++++++++++++++++++++++---
src/ui/views/AccountSetupView.ts | 18 +++++++------
2 files changed, 50 insertions(+), 11 deletions(-)
diff --git a/src/style.css b/src/style.css
index 1cad703..d32a46c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,13 +1,18 @@
#chatterbox {
position: absolute;
- bottom: 0;
- right: 0;
+ bottom: 10px;
+ right: 10px;
+ max-width: 375px;
}
#chatterbox .Timeline {
height: 500px;
}
+#chatterbox>div {
+ border-radius: 5px;
+}
+
/*
todo: this style should actually be in hydrogen-web
*/
@@ -27,12 +32,44 @@ todo: this style should actually be in hydrogen-web
cursor: pointer;
}
+.PolicyAgreementView {
+ display: flex;
+ padding: 10px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-evenly;
+ height: 80px;
+ border-radius: 5px;
+}
+.PolicyAgreementView-text {
+ padding-bottom: 10px;
+}
+
+.PolicyAgreementView-next, .PolicyAgreementView-cancel {
+ display: flex;
+ padding: 10px;
+ width: 85px;
+ justify-content: center;
+}
+
+.PolicyAgreementView-btn-collection .PolicyAgreementView-cancel {
+ border: 1px solid #03B381;
+ border-radius: 8px;
+}
+
+.PolicyAgreementView-btn-collection {
+ display: flex;
+ justify-content: space-evenly;
+ flex-direction: row;
+ width: 100%;
+}
+
.hydrogen {
background-color: transparent !important;
}
.hydrogen :not(.StartChat) {
- background-color: white;
+ background-color: rgba(245, 245, 245, 0.90);
}
body {
diff --git a/src/ui/views/AccountSetupView.ts b/src/ui/views/AccountSetupView.ts
index 7ee7414..45224f4 100644
--- a/src/ui/views/AccountSetupView.ts
+++ b/src/ui/views/AccountSetupView.ts
@@ -11,15 +11,17 @@ export class AccountSetupView extends TemplateView<AccountSetupViewModel> {
class PolicyAgreementView extends TemplateView<AccountSetupViewModel> {
render(t: Builder<AccountSetupViewModel>, vm: AccountSetupViewModel) {
return t.div({ className: "PolicyAgreementView" }, [
- t.div([
- "By continuing you agree to the terms and conditions laid out by the following documents:",
- t.a({href: vm.privacyPolicyLink}, "Privacy Policy")
+ t.div({ className: "PolicyAgreementView-text"},
+ [
+ "By continuing you agree to the ",
+ t.a({ href: vm.privacyPolicyLink }, "Privacy Policy"),
]),
- t.div([
- t.input({ type: "checkbox", name: "agree" }),
- t.label({for: "agree"}, "I agree")
- ]),
- t.button({onClick: () => vm.completeRegistration()}, "Next")
+ t.div(
+ { className: "PolicyAgreementView-btn-collection" },
+ [
+ t.button( { onClick: () => vm.dismiss(), className: "button-action secondary PolicyAgreementView-cancel", }, "Cancel"),
+ t.button( { onClick: () => vm.completeRegistration(), className: "PolicyAgreementView-next button-action primary", }, "Next")
+ ]),
]);
}
}
--
GitLab