style(ui): replace the passwordless switch link pos (#2904)

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

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2825 6.71315L13.2825 3.71315C13.2126 3.64322 13.1295 3.58775 13.0382 3.54991C12.9468 3.51206 12.8489 3.49258 12.75 3.49258C12.5503 3.49258 12.3587 3.57192 12.2175 3.71315C12.0763 3.85438 11.9969 4.04592 11.9969 4.24565C11.9969 4.44538 12.0763 4.63692 12.2175 4.77815L13.9425 6.49565H5.24998C5.05107 6.49565 4.86031 6.57467 4.71965 6.71532C4.579 6.85597 4.49998 7.04674 4.49998 7.24565C4.49998 7.44456 4.579 7.63533 4.71965 7.77598C4.86031 7.91663 5.05107 7.99565 5.24998 7.99565H15.75C15.8981 7.99491 16.0426 7.95036 16.1654 7.86761C16.2882 7.78486 16.3837 7.66762 16.44 7.53065C16.4974 7.39407 16.5131 7.24353 16.4851 7.09804C16.457 6.95255 16.3866 6.81862 16.2825 6.71315ZM12.75 10.4957H2.24998C2.10191 10.4964 1.95738 10.5409 1.83459 10.6237C1.7118 10.7064 1.61625 10.8237 1.55998 10.9607C1.50255 11.0972 1.48686 11.2478 1.51489 11.3933C1.54292 11.5388 1.61341 11.6727 1.71748 11.7782L4.71748 14.7782C4.78721 14.8484 4.87016 14.9042 4.96155 14.9423C5.05294 14.9804 5.15097 15 5.24998 15C5.34899 15 5.44702 14.9804 5.53842 14.9423C5.62981 14.9042 5.71276 14.8484 5.78248 14.7782C5.85278 14.7084 5.90858 14.6255 5.94665 14.5341C5.98473 14.4427 6.00433 14.3447 6.00433 14.2457C6.00433 14.1466 5.98473 14.0486 5.94665 13.9572C5.90858 13.8658 5.85278 13.7829 5.78248 13.7132L4.05748 11.9957H12.75C12.9489 11.9957 13.1397 11.9166 13.2803 11.776C13.421 11.6353 13.5 11.4446 13.5 11.2457C13.5 11.0467 13.421 10.856 13.2803 10.7153C13.1397 10.5747 12.9489 10.4957 12.75 10.4957Z" fill="currentcolor"/>
+</svg>

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

@@ -3,7 +3,12 @@
 .link {
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
+  display: inline-flex;
+  justify-content: center;
 
+  > svg {
+    margin-right: _.unit(2);
+  }
 
   &.primary {
     color: var(--color-brand-default);

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

@@ -11,15 +11,17 @@ export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
   className?: string;
   children?: ReactNode;
   text?: TFuncKey;
+  icon?: ReactNode;
   type?: 'primary' | 'secondary';
 } & Partial<LinkProps>;
 
-const TextLink = ({ className, children, text, type = 'primary', to, ...rest }: Props) => {
+const TextLink = ({ className, children, text, icon, type = 'primary', to, ...rest }: Props) => {
   const { t } = useTranslation();
 
   if (to) {
     return (
       <Link className={classNames(styles.link, styles[type], className)} to={to} {...rest}>
+        {icon}
         {children ?? (text ? t(text) : '')}
       </Link>
     );
@@ -27,6 +29,7 @@ const TextLink = ({ className, children, text, type = 'primary', to, ...rest }:
 
   return (
     <a className={classNames(styles.link, styles[type], className)} {...rest} rel="noreferrer">
+      {icon}
       {children ?? (text ? t(text) : '')}
     </a>
   );

packages/ui/src/containers/PasswordSignInForm/PasswordlessSignInLink.tsx

@@ -1,6 +1,7 @@
 import { SignInIdentifier } from '@logto/schemas';
 import { useContext, useEffect } from 'react';
 
+import SwitchIcon from '@/assets/icons/switch-icon.svg';
 import TextLink from '@/components/TextLink';
 import { PageContext } from '@/hooks/use-page-context';
 import useSendVerificationCode from '@/hooks/use-send-verification-code';
@@ -31,6 +32,7 @@ const PasswordlessSignInLink = ({ className, method, value }: Props) => {
     <TextLink
       className={className}
       text="action.sign_in_via_passcode"
+      icon={<SwitchIcon />}
       onClick={() => {
         clearErrorMessage();
         void onSubmit(method === SignInIdentifier.Email ? { email: value } : { phone: value });

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

@@ -9,11 +9,14 @@
 
   .inputField,
   .link,
-  .switch,
   .formErrors {
     margin-bottom: _.unit(4);
   }
 
+  .switch {
+    margin-top: _.unit(4);
+  }
+
   .link,
   .switch {
     align-self: start;

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

@@ -91,12 +91,12 @@ const PasswordSignInForm = ({
         />
       )}
 
+      <Button title="action.continue" onClick={async () => onSubmitHandler()} />
+
       {hasPasswordlessButton && (
         <PasswordlessSignInLink className={styles.switch} method={method} value={value} />
       )}
 
-      <Button title="action.continue" onClick={async () => onSubmitHandler()} />
-
       <input hidden type="submit" />
     </form>
   );

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

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
+import SwitchIcon from '@/assets/icons/switch-icon.svg';
 import TextLink from '@/components/TextLink';
 
 type Props = {
@@ -15,7 +16,12 @@ const PasswordlessSwitch = ({ target, className }: Props) => {
   const targetPathname = pathname.split('/').slice(0, -1).join('/') + `/${target}`;
 
   return (
-    <TextLink replace className={className} to={{ pathname: targetPathname, search }}>
+    <TextLink
+      replace
+      className={className}
+      icon={<SwitchIcon />}
+      to={{ pathname: targetPathname, search }}
+    >
       {t('action.switch_to', {
         method: t(`description.${target === 'email' ? 'email' : 'phone_number'}`),
       })}

packages/ui/src/containers/VerificationCode/PasswordSignInLink.tsx

@@ -1,5 +1,6 @@
 import type { SignInIdentifier } from '@logto/schemas';
 
+import SwitchIcon from '@/assets/icons/switch-icon.svg';
 import TextLink from '@/components/TextLink';
 import { UserFlow } from '@/types';
 
@@ -14,6 +15,7 @@ const PasswordSignInLink = ({ className, method, target }: Props) => {
     <TextLink
       replace
       className={className}
+      icon={<SwitchIcon />}
       text="action.sign_in_via_password"
       to={`/${UserFlow.signIn}/${method}/password`}
       state={{ [method]: target }}