diff --git a/packages/ui/src/assets/icons/checkbox-icon.svg b/packages/ui/src/assets/icons/checkbox-icon.svg index 77cf2f475..2d07c5220 100644 --- a/packages/ui/src/assets/icons/checkbox-icon.svg +++ b/packages/ui/src/assets/icons/checkbox-icon.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/ui/src/components/Checkbox/index.module.scss b/packages/ui/src/components/Checkbox/index.module.scss index 944a8e94c..1db103ef5 100644 --- a/packages/ui/src/components/Checkbox/index.module.scss +++ b/packages/ui/src/components/Checkbox/index.module.scss @@ -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; + } + } +} diff --git a/packages/ui/src/components/Checkbox/index.tsx b/packages/ui/src/components/Checkbox/index.tsx index 9ad3f50d3..cda02216f 100644 --- a/packages/ui/src/components/Checkbox/index.tsx +++ b/packages/ui/src/components/Checkbox/index.tsx @@ -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, 'type'>; +type Props = { + size?: 'small' | 'default'; +} & Omit, 'type' | 'size'>; -const Checkbox = ({ disabled, ...rest }: Props, ref: Ref) => { +const Checkbox = ({ disabled, size = 'default', ...rest }: Props, ref: Ref) => { return (
- +
); }; diff --git a/packages/ui/src/components/TermsLinks/index.module.scss b/packages/ui/src/components/TermsLinks/index.module.scss index 1d65dd230..08f065072 100644 --- a/packages/ui/src/components/TermsLinks/index.module.scss +++ b/packages/ui/src/components/TermsLinks/index.module.scss @@ -2,6 +2,7 @@ .link { + color: var(--color-type-primary); display: inline; } diff --git a/packages/ui/src/components/TermsLinks/index.tsx b/packages/ui/src/components/TermsLinks/index.tsx index 1f72237f3..09ff14af7 100644 --- a/packages/ui/src/components/TermsLinks/index.tsx +++ b/packages/ui/src/components/TermsLinks/index.tsx @@ -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(); diff --git a/packages/ui/src/components/TextLink/index.module.scss b/packages/ui/src/components/TextLink/index.module.scss index 755fc5603..c5bfc937b 100644 --- a/packages/ui/src/components/TextLink/index.module.scss +++ b/packages/ui/src/components/TextLink/index.module.scss @@ -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)); } diff --git a/packages/ui/src/components/TextLink/index.tsx b/packages/ui/src/components/TextLink/index.tsx index b0a488adf..0ad0f387d 100644 --- a/packages/ui/src/components/TextLink/index.tsx +++ b/packages/ui/src/components/TextLink/index.tsx @@ -16,7 +16,7 @@ export type Props = AnchorHTMLAttributes & { children?: ReactNode; text?: TFuncKey; icon?: ReactNode; - type?: 'primary' | 'secondary' | 'inlinePrimary'; + type?: 'primary' | 'secondary'; } & Partial; const TextLink = ({ className, children, text, icon, type = 'primary', to, ...rest }: Props) => { diff --git a/packages/ui/src/containers/TermsAndPrivacy/index.module.scss b/packages/ui/src/containers/TermsAndPrivacy/index.module.scss index 88fb22c2f..6849b2073 100644 --- a/packages/ui/src/containers/TermsAndPrivacy/index.module.scss +++ b/packages/ui/src/containers/TermsAndPrivacy/index.module.scss @@ -15,6 +15,7 @@ .content { @include _.text-hint; + font: var(--font-label-3); } .errorMessage { diff --git a/packages/ui/src/containers/TermsAndPrivacy/index.tsx b/packages/ui/src/containers/TermsAndPrivacy/index.tsx index 4c2c88e26..8a8403977 100644 --- a/packages/ui/src/containers/TermsAndPrivacy/index.tsx +++ b/packages/ui/src/containers/TermsAndPrivacy/index.tsx @@ -43,7 +43,12 @@ const TermsAndPrivacy = ({ className }: Props) => { ' ': toggle, })} > - +
{prefix} diff --git a/packages/ui/src/pages/SignIn/index.module.scss b/packages/ui/src/pages/SignIn/index.module.scss index 302a51771..28dc9e7be 100644 --- a/packages/ui/src/pages/SignIn/index.module.scss +++ b/packages/ui/src/pages/SignIn/index.module.scss @@ -7,7 +7,7 @@ } .terms { - margin-top: _.unit(2); + margin-top: _.unit(4); text-align: center; font: var(--font-body-3); }