Style sso button

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>
This commit is contained in:
RMidhunSuresh 2021-08-15 17:37:53 +05:30
parent b8f0361157
commit 93720f6025
3 changed files with 32 additions and 1 deletions

View File

@ -70,3 +70,19 @@ limitations under the License.
.SessionLoadStatusView .spinner {
--size: 20px;
}
.SSOLoginView {
display: flex;
flex-direction: column;
}
.SSOLoginView_button {
flex: 1;
margin-top: 10px;
}
.SSOLoginView_separator {
justify-content: center;
display: flex;
margin: 8px;
}

View File

@ -223,6 +223,16 @@ a.button-action {
padding-top: 16px;
}
.SSOLoginView_button {
border: 1px solid #03B381;
border-radius: 8px;
}
.SSOLoginView_separator {
font-weight: 500;
font-size: 1.5rem;
}
@media screen and (min-width: 600px) {
.PreSessionScreen {
box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.1);

View File

@ -41,6 +41,11 @@ export class LoginView extends TemplateView {
class SSOLoginView extends TemplateView {
render(t, vm) {
return t.button({className: "SSO", type: "button", onClick: () => vm.startSSOLogin()}, "Login with SSO");
return t.div({ className: "SSOLoginView" },
[
t.p({ className: "SSOLoginView_separator" }, "or"),
t.button({ className: "SSOLoginView_button button-action secondary", type: "button", onClick: () => vm.startSSOLogin() }, "Log in with SSO")
]
);
}
}