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

style(ui): adjust terms styling (#3453)

This commit is contained in:
simeng-li 2023-03-17 13:35:13 +08:00 committed by GitHub
parent 35caddfb0a
commit d570c3f1c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 44 additions and 21 deletions

View file

@ -1,4 +1,4 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2463 2.20996H3.75244C2.90015 2.20996 2.20923 2.90088 2.20923 3.75317V14.247C2.20923 15.0993 2.90015 15.7902 3.75244 15.7902H14.2463C15.0986 15.7902 15.7895 15.0993 15.7895 14.247V3.75317C15.7895 2.90088 15.0986 2.20996 14.2463 2.20996ZM3.75244 0.666748C2.04785 0.666748 0.666016 2.04859 0.666016 3.75317V14.247C0.666016 15.9516 2.04786 17.3334 3.75244 17.3334H14.2463C15.9508 17.3334 17.3327 15.9516 17.3327 14.247V3.75317C17.3327 2.04859 15.9508 0.666748 14.2463 0.666748H3.75244Z" fill="currentcolor"/>
<rect width="18" height="18" rx="4" fill="currentcolor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.31476 12.858L4.13295 9.441C3.95568 9.253 3.95568 8.947 4.13295 8.757L4.77568 8.074C4.95295 7.886 5.24113 7.886 5.4184 8.074L7.63657 10.466L12.5811 5.141C12.7584 4.953 13.0465 4.953 13.2238 5.141L13.8665 5.825C14.0438 6.013 14.0438 6.32 13.8665 6.507L7.95748 12.858C7.78021 13.046 7.49203 13.046 7.31476 12.858Z" fill="white"/>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -7,6 +7,13 @@
.icon {
margin-right: _.unit(2);
width: 18px;
height: 18px;
&.small {
width: 16px;
height: 16px;
}
> * {
display: none;
@ -23,8 +30,8 @@
input {
position: absolute;
width: 18px;
height: 18px;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin: 0;
@ -37,3 +44,13 @@
display: block;
}
}
:global(body.mobile) {
.checkbox {
.icon,
.icon.small {
width: 18px;
height: 18px;
}
}
}

View file

@ -1,3 +1,4 @@
import classNames from 'classnames';
import type { InputHTMLAttributes, Ref } from 'react';
import { forwardRef } from 'react';
@ -5,13 +6,15 @@ import CheckBox from '@/assets/icons/checkbox-icon.svg';
import * as styles from './index.module.scss';
type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
type Props = {
size?: 'small' | 'default';
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>;
const Checkbox = ({ disabled, ...rest }: Props, ref: Ref<HTMLInputElement>) => {
const Checkbox = ({ disabled, size = 'default', ...rest }: Props, ref: Ref<HTMLInputElement>) => {
return (
<div className={styles.checkbox}>
<input type="checkbox" disabled={disabled} {...rest} ref={ref} readOnly />
<CheckBox className={styles.icon} />
<CheckBox className={classNames(styles.icon, size === 'small' && styles.small)} />
</div>
);
};

View file

@ -2,6 +2,7 @@
.link {
color: var(--color-type-primary);
display: inline;
}

View file

@ -21,7 +21,7 @@ const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl }: Props) => {
className={styles.link}
text="description.terms_of_use"
href={termsOfUseUrl}
type="inlinePrimary"
type="secondary"
target="_blank"
onClick={(event) => {
event.stopPropagation();
@ -35,7 +35,7 @@ const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl }: Props) => {
className={styles.link}
text="description.privacy_policy"
href={privacyPolicyUrl}
type="inlinePrimary"
type="secondary"
target="_blank"
onClick={(event) => {
event.stopPropagation();

View file

@ -12,10 +12,6 @@
&.primary {
font: var(--font-label-2);
}
&.primary,
&.inlinePrimary {
color: var(--color-brand-default);
text-decoration: none;
@ -24,22 +20,22 @@
}
}
&.secondary {
color: var(--color-type-secondary);
text-decoration: underline;
color: var(--color-type-primary);
font: inherit;
text-decoration: none;
}
}
:global(body.desktop) {
.link {
&.primary:hover,
&.inlinePrimary:hover {
&.primary:hover {
color: var(--color-brand-hover);
}
&.primary:focus-visible,
&.inlinePrimary:focus-visible {
&.primary:focus-visible {
outline: _.border(var(--color-overlay-brand-focused));
}

View file

@ -16,7 +16,7 @@ export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
children?: ReactNode;
text?: TFuncKey;
icon?: ReactNode;
type?: 'primary' | 'secondary' | 'inlinePrimary';
type?: 'primary' | 'secondary';
} & Partial<LinkProps>;
const TextLink = ({ className, children, text, icon, type = 'primary', to, ...rest }: Props) => {

View file

@ -15,6 +15,7 @@
.content {
@include _.text-hint;
font: var(--font-label-3);
}
.errorMessage {

View file

@ -43,7 +43,12 @@ const TermsAndPrivacy = ({ className }: Props) => {
' ': toggle,
})}
>
<Checkbox name="termsAgreement" checked={termsAgreement} className={styles.checkbox} />
<Checkbox
name="termsAgreement"
checked={termsAgreement}
className={styles.checkbox}
size="small"
/>
<div className={styles.content}>
<span>{prefix}</span>
<TermsLinks inline termsOfUseUrl={termsOfUseUrl} privacyPolicyUrl={privacyPolicyUrl} />

View file

@ -7,7 +7,7 @@
}
.terms {
margin-top: _.unit(2);
margin-top: _.unit(4);
text-align: center;
font: var(--font-body-3);
}