refactor: update figure and phrase

packages/console/src/components/ConnectorForm/GoogleOneTapCard/index.tsx

@@ -1,4 +1,5 @@
 import { type GoogleConnectorConfig } from '@logto/connector-kit';
+import { Theme } from '@logto/schemas';
 import { Controller, useFormContext } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -7,12 +8,19 @@ import Checkbox from '@/ds-components/Checkbox';
 import FormField from '@/ds-components/FormField';
 import Switch from '@/ds-components/Switch';
 import TextLink from '@/ds-components/TextLink';
+import useTheme from '@/hooks/use-theme';
 
-import figure from './figure.webp';
+import figureDark from './figure-dark.webp';
+import figureLight from './figure-light.webp';
 import * as styles from './index.module.scss';
 
 type FormContext = { rawConfig: { oneTap: GoogleConnectorConfig['oneTap'] } };
 
+const themeToFigure = Object.freeze({
+ [Theme.Light]: figureLight,
+ [Theme.Dark]: figureDark,
+} satisfies Record<Theme, string>);
+
 /**
  * A card for configuring Google One Tap. It requires the `rawConfig.oneTap` field in the form
  * context which can usually be obtained from the connector configuration context.
@@ -23,6 +31,7 @@ function GoogleOneTapCard() {
  });
  const { register, control, watch } = useFormContext<FormContext>();
  const isEnabled = watch('rawConfig.oneTap.isEnabled');
+ const theme = useTheme();
 
  return (
  <FormCard
@@ -33,7 +42,11 @@ function GoogleOneTapCard() {
  <Switch
  description={
  <>
- <img className={styles.figure} src={figure} alt="Google One Tap figure" />
+ <img
+ className={styles.figure}
+ src={themeToFigure[theme]}
+ alt="Google One Tap figure"
+ />
  {t('enable_google_one_tap_description')}
  </>
  }

packages/phrases/src/locales/en/translation/admin-console/connector-details.ts

@@ -59,7 +59,7 @@ const connector_details = {
  description: 'Google One Tap is a secure and easy way for users to sign in to your website.',
  enable_google_one_tap: 'Enable Google One Tap',
  enable_google_one_tap_description:
- 'Enable Google One Tap in your sign-in experience. Users can sign in with their Google account with a single tap.',
+ "Enable Google One Tap in your sign-in experience: Let users quickly sign up or sign in with their Google account if they're already signed in on their device.",
  configure_google_one_tap: 'Configure Google One Tap',
  auto_select: 'Auto-select credential if possible',
  close_on_tap_outside: 'Cancel the prompt if user click/tap outside',