PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Iterate SSO auth ux styling

Browse source
This commit is contained in:
Michael Telatynski 2021-01-29 13:04:05 +00:00
parent 1eb88c988c
commit 0167c3cefb
3 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/views/auth/_AuthBody.scss
View file

@ -34,7 +34,7 @@ limitations under the License.
h3 {
font-size: $font-14px;
font-weight: 600;
color: $authpage-primary-color;
color: $authpage-secondary-color;
}
h3.mx_AuthBody_centered {

20
res/css/views/elements/_SSOButtons.scss
View file

@ -28,9 +28,13 @@ limitations under the License.
.mx_SSOButton {
position: relative;
width: 100%;
padding-left: 32px;
padding-right: 32px;
border-color: $input-border-color;
padding: 7px 32px;
text-align: center;
border-radius: 8px;
display: inline-block;
font-size: $font-14px;
font-weight: $font-semi-bold;
border: 1px solid $input-border-color;
color: $primary-fg-color;
> img {
@ -41,6 +45,16 @@ limitations under the License.
}
}
.mx_SSOButton_default {
color: $button-primary-bg-color;
background-color: $button-secondary-bg-color;
border-color: $button-primary-bg-color;
}
.mx_SSOButton_default.mx_SSOButton_primary {
color: $button-primary-fg-color;
background-color: $button-primary-bg-color;
}
.mx_SSOButton_mini {
box-sizing: border-box;
width: 50px; // 48px + 1px border on all sides

7
src/components/views/elements/SSOButtons.tsx
View file

@ -58,7 +58,6 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
mini,
...props
}) => {
const kind = primary ? "primary" : "primary_outline";
const label = idp ? _t("Continue with %(provider)s", { provider: idp.name }) : _t("Sign in with single sign-on");
const onClick = () => {
@ -80,19 +79,21 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
const classes = classNames("mx_SSOButton", {
[brandClass]: brandClass,
mx_SSOButton_mini: mini,
mx_SSOButton_default: !idp,
mx_SSOButton_primary: primary,
});
if (mini) {
// TODO fallback icon
return (
<AccessibleTooltipButton {...props} title={label} className={classes} kind={kind} onClick={onClick}>
<AccessibleTooltipButton {...props} title={label} className={classes} onClick={onClick}>
{ icon }
</AccessibleTooltipButton>
);
}
return (
<AccessibleButton {...props} className={classes} kind={kind} onClick={onClick}>
<AccessibleButton {...props} className={classes} onClick={onClick}>
{ icon }
{ label }
</AccessibleButton>