Login page: Fix button width (#86680)

* Fix login buttons width

* Login page: Fix button width

* Add todo
This commit is contained in:
Alex Khomenko 2024-04-22 14:31:11 +02:00 committed by GitHub
parent 7caa30bc2e
commit cad9e23e54
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -149,24 +149,27 @@ export const LoginServiceButtons = () => {
if (hasServices) {
return (
<Stack direction="column">
<LoginDivider />
{Object.entries(enabledServices).map(([key, service]) => {
const serviceName = service.name;
return (
<LinkButton
key={key}
className={getButtonStyleFor(service, styles, theme)}
href={`login/${service.hrefName ? service.hrefName : key}`}
target="_self"
fullWidth
>
<Icon className={styles.buttonIcon} name={service.icon} />
<Trans i18nKey="login.services.sing-in-with-prefix">Sign in with {{ serviceName }}</Trans>
</LinkButton>
);
})}
</Stack>
// TODO: Remove extra div when Stack supports width
<div style={{ width: '100%' }}>
<Stack direction={'column'}>
<LoginDivider />
{Object.entries(enabledServices).map(([key, service]) => {
const serviceName = service.name;
return (
<LinkButton
key={key}
className={getButtonStyleFor(service, styles, theme)}
href={`login/${service.hrefName ? service.hrefName : key}`}
target="_self"
fullWidth
>
<Icon className={styles.buttonIcon} name={service.icon} />
<Trans i18nKey="login.services.sing-in-with-prefix">Sign in with {{ serviceName }}</Trans>
</LinkButton>
);
})}
</Stack>
</div>
);
}