Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-10 22:22:45 -05:00
Code Issues Activity

style(ui): update text link styling

Browse source 
update text link styling
This commit is contained in:
simeng-li 2022-11-10 16:28:56 +08:00
parent 55ca9e5a92
commit b2a3f2fbdf
No known key found for this signature in database
GPG key ID: 14EA7BB1541E8075
3 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/ui/src/components/TextLink/index.module.scss
View file

@ -9,11 +9,9 @@
color: var(--color-brand-default); color: var(--color-brand-default);
text-decoration: none; text-decoration: none;
font: var(--font-label-2); font: var(--font-label-2);
border-radius: _.unit(1);
padding: _.unit(1) _.unit(0.5);
&:active { &:active {
background: var(--color-overlay-brand-pressed); color: var(--color-brand-hover);
} }
} }
@ -27,7 +25,7 @@
:global(body.desktop) { :global(body.desktop) {
.link { .link {
&.primary:hover { &.primary:hover {
background: var(--color-overlay-brand-hover); color: var(--color-brand-hover);
} }
&.primary:focus-visible { &.primary:focus-visible {

9
packages/ui/src/containers/PasscodeValidation/index.module.scss
View file

@ -23,11 +23,16 @@
} }
} }
.link { .message,
margin-top: _.unit(3); .link,
.switch {
width: auto; width: auto;
align-self: start; align-self: start;
} }
.switch {
margin-top: _.unit(3);
}
} }
:global(body.mobile) { :global(body.mobile) {

3
packages/ui/src/containers/PasscodeValidation/index.tsx
View file

@ -59,6 +59,7 @@ const PasscodeValidation = ({ type, method, className, hasPasswordButton, target
</div> </div>
) : ( ) : (
<TextLink <TextLink
className={styles.link}
text="description.resend_passcode" text="description.resend_passcode"
onClick={() => { onClick={() => {
clearErrorMessage(); clearErrorMessage();
@ -67,7 +68,7 @@ const PasscodeValidation = ({ type, method, className, hasPasswordButton, target
/> />
)} )}
{type === UserFlow.signIn && hasPasswordButton && ( {type === UserFlow.signIn && hasPasswordButton && (
<PasswordSignInLink method={method} target={target} className={styles.link} /> <PasswordSignInLink method={method} target={target} className={styles.switch} />
)} )}
</form> </form>
); );