Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

style(ui): update the social button style (#1253)

Browse source 
update the social button style
This commit is contained in:
simeng-li 2022-06-27 13:52:54 +08:00 committed by GitHub
parent 6865efff27
commit b39ea63065
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
packages/ui/src/components/Button/SocialLinkButton.module.scss
View file

@ -1,15 +1,33 @@
@use '@/scss/underscore' as _;
.socialButton {
justify-content: normal;
padding: _.unit(3) _.unit(16);
padding: 0 _.unit(4);
}
.icon {
width: _.unit(6);
height: _.unit(6);
@include _.image-align-center;
margin-right: _.unit(4);
overflow: hidden;
}
.name {
flex: 1;
overflow: hidden;
margin-left: _.unit(-6);
@include _.flex-row;
span {
overflow: hidden;
text-overflow: ellipsis;
}
.placeHolder {
flex: 1;
&:first-child {
min-width: _.unit(10);
}
}
}

6
packages/ui/src/components/Button/SocialLinkButton.tsx
View file

@ -40,7 +40,11 @@ const SocialLinkButton = ({ isDisabled, className, connector, onClick }: Props)
onClick={onClick}
>
{logo && <img src={logo} alt={target} className={socialLinkButtonStyles.icon} />}
{t('action.sign_in_with', { name: localName })}
<div className={socialLinkButtonStyles.name}>
<div className={socialLinkButtonStyles.placeHolder} />
<span>{t('action.sign_in_with', { name: localName })}</span>
<div className={socialLinkButtonStyles.placeHolder} />
</div>
</button>
);
};

2
packages/ui/src/components/Button/index.module.scss
View file

@ -4,7 +4,7 @@
@include _.flex-row;
justify-content: center;
height: 44px;
padding: 0 _.unit(3);
padding: 0 _.unit(4);
border-radius: var(--radius);
font: var(--font-body-bold);
cursor: pointer;