Fix alignment and spacing of SSO providers

This commit is contained in:
Andrew Kingston 2021-09-13 16:05:26 +01:00
parent 29e34d16be
commit 4209d3a1cc
1 changed files with 16 additions and 7 deletions

View File

@ -272,7 +272,7 @@
}) })
</script> </script>
<Layout> <Layout noPadding>
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Heading size="M">Authentication</Heading> <Heading size="M">Authentication</Heading>
<Body> <Body>
@ -285,9 +285,9 @@
<Divider /> <Divider />
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Heading size="S"> <Heading size="S">
<div> <div class="provider-title">
<GoogleLogo /> <GoogleLogo />
Google <span>Google</span>
<div class="google-save-button"> <div class="google-save-button">
<div> <div>
<Button <Button
@ -330,9 +330,9 @@
<Divider /> <Divider />
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Heading size="S"> <Heading size="S">
<div> <div class="provider-title">
<OidcLogo /> <OidcLogo />
OpenID Connect <span>OpenID Connect</span>
<div class="oidc-save-button"> <div class="oidc-save-button">
<div> <div>
<Button <Button
@ -426,11 +426,20 @@
.google-save-button { .google-save-button {
display: inline-block; display: inline-block;
margin-left: 400px;
} }
.oidc-save-button { .oidc-save-button {
display: inline-block; display: inline-block;
margin-left: 320px; }
.provider-title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: var(--spacing-m);
}
.provider-title span {
flex: 1 1 auto;
} }
</style> </style>