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

packages/ui/src/assets/icons/checkbox-icon.svg

@@ -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"/>

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;
+    }
+  }
+}

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<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>
   );
 };

packages/ui/src/components/TermsLinks/index.module.scss

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

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();

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));
     }
 

packages/ui/src/components/TextLink/index.tsx

@@ -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) => {

packages/ui/src/containers/TermsAndPrivacy/index.module.scss

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

packages/ui/src/containers/TermsAndPrivacy/index.tsx

@@ -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} />

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);
 }