style(experience): fix the terms of use link style (#5771)

fix the terms of use link style in confirm modal

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

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

packages/experience/src/components/TermsLinks/index.tsx

@@ -1,17 +1,18 @@
 import { useTranslation } from 'react-i18next';
 
-import TextLink from '@/components/TextLink';
+import TextLink, { type Props as TextLinkProps } from '@/components/TextLink';
 
 import * as styles from './index.module.scss';
 
 type Props = {
+  readonly linkType?: TextLinkProps['type'];
   // eslint-disable-next-line react/boolean-prop-naming
   readonly inline?: boolean;
   readonly termsOfUseUrl?: string;
   readonly privacyPolicyUrl?: string;
 };
 
-const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl }: Props) => {
+const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl, linkType = 'secondary' }: Props) => {
   const { t } = useTranslation();
 
   return (
@@ -21,7 +22,7 @@ const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl }: Props) => {
           className={styles.link}
           text="description.terms_of_use"
           href={termsOfUseUrl}
-          type="secondary"
+          type={linkType}
           target="_blank"
           onClick={(event) => {
             event.stopPropagation();
@@ -35,7 +36,7 @@ const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl }: Props) => {
           className={styles.link}
           text="description.privacy_policy"
           href={privacyPolicyUrl}
-          type="secondary"
+          type={linkType}
           target="_blank"
           onClick={(event) => {
             event.stopPropagation();

packages/experience/src/containers/TermsAndPrivacyCheckbox/index.tsx

@@ -13,7 +13,7 @@ type Props = {
   readonly className?: string;
 };
 
-const TermsAndPrivacy = ({ className }: Props) => {
+const TermsAndPrivacyCheckbox = ({ className }: Props) => {
   const { termsAgreement, setTermsAgreement, termsOfUseUrl, privacyPolicyUrl, isTermsDisabled } =
     useTerms();
   const { t } = useTranslation();
@@ -57,4 +57,4 @@ const TermsAndPrivacy = ({ className }: Props) => {
   );
 };
 
-export default TermsAndPrivacy;
+export default TermsAndPrivacyCheckbox;

packages/experience/src/containers/TermsAndPrivacyConfirmModalContent/index.tsx

@@ -1,10 +1,12 @@
 import { conditional } from '@silverhand/essentials';
 import { useContext } from 'react';
-import { useTranslation, Trans } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 
 import PageContext from '@/Providers/PageContextProvider/PageContext';
 import TermsLinks from '@/components/TermsLinks';
 
+// Used by useTerms hook to display the terms and privacy policy confirmation modal
+// This component should be used as the ModalContent prop in the useConfirmModal hook
 const TermsAndPrivacyConfirmModalContent = () => {
   const { experienceSettings } = useContext(PageContext);
   const { termsOfUseUrl, privacyPolicyUrl } = experienceSettings ?? {};
@@ -17,6 +19,7 @@ const TermsAndPrivacyConfirmModalContent = () => {
         link: (
           <TermsLinks
             inline
+            linkType="primary"
             termsOfUseUrl={conditional(termsOfUseUrl)}
             privacyPolicyUrl={conditional(privacyPolicyUrl)}
           />

packages/experience/src/containers/TermsAndPrivacyLinks/index.tsx

@@ -5,6 +5,7 @@ type Props = {
   readonly className?: string;
 };
 
+// For sign-in page displaying terms and privacy links use only. No user interaction is needed.
 const TermsAndPrivacyLinks = ({ className }: Props) => {
   const { termsOfUseUrl, privacyPolicyUrl, isTermsDisabled } = useTerms();
 

packages/experience/src/hooks/use-terms.ts

@@ -1,8 +1,8 @@
 import { conditional } from '@silverhand/essentials';
-import { useContext, useCallback, useMemo } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 
 import PageContext from '@/Providers/PageContextProvider/PageContext';
-import TermsAndPrivacyConfirmModalContent from '@/containers/TermsAndPrivacy/TermsAndPrivacyConfirmModalContent';
+import TermsAndPrivacyConfirmModalContent from '@/containers/TermsAndPrivacyConfirmModalContent';
 
 import { useConfirmModal } from './use-confirm-modal';
 

packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx

@@ -1,7 +1,7 @@
 import type { SignInIdentifier } from '@logto/schemas';
 import classNames from 'classnames';
 import { useCallback, useEffect } from 'react';
-import { useForm, Controller } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import LockIcon from '@/assets/icons/lock.svg';
@@ -9,7 +9,7 @@ import Button from '@/components/Button';
 import ErrorMessage from '@/components/ErrorMessage';
 import { SmartInputField } from '@/components/InputFields';
 import type { IdentifierInputValue } from '@/components/InputFields/SmartInputField';
-import TermsAndPrivacy from '@/containers/TermsAndPrivacy';
+import TermsAndPrivacyCheckbox from '@/containers/TermsAndPrivacyCheckbox';
 import useSingleSignOnWatch from '@/hooks/use-single-sign-on-watch';
 import useTerms from '@/hooks/use-terms';
 import { getGeneralIdentifierErrorMessage, validateIdentifierField } from '@/utils/form';
@@ -130,7 +130,7 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
        * Form rerender will trigger autofill.
        * If the autofill value is SSO enabled, it will always show SSO form.
        */}
-      <TermsAndPrivacy
+      <TermsAndPrivacyCheckbox
         className={classNames(styles.terms, showSingleSignOnForm && styles.hidden)}
       />
 

packages/experience/src/pages/Register/index.tsx

@@ -9,7 +9,7 @@ import SingleSignOnFormModeContext from '@/Providers/SingleSignOnFormModeContext
 import Divider from '@/components/Divider';
 import TextLink from '@/components/TextLink';
 import SocialSignInList from '@/containers/SocialSignInList';
-import TermsAndPrivacy from '@/containers/TermsAndPrivacy';
+import TermsAndPrivacyCheckbox from '@/containers/TermsAndPrivacyCheckbox';
 import { useSieMethods } from '@/hooks/use-sie';
 
 import ErrorPage from '../ErrorPage';
@@ -79,9 +79,10 @@ const Register = () => {
         {signUpMethods.length > 0 && (
           <IdentifierRegisterForm signUpMethods={signUpMethods} className={styles.main} />
         )}
+        {/* Social sign-in methods only */}
         {signUpMethods.length === 0 && socialConnectors.length > 0 && (
           <>
-            <TermsAndPrivacy className={styles.terms} />
+            <TermsAndPrivacyCheckbox className={styles.terms} />
             <SocialSignInList className={styles.main} socialConnectors={socialConnectors} />
           </>
         )}