fix(console): correct display format (#3438)

2025-01-06 20:40:08 -05:00 · 2023-03-16 18:42:52 +08:00 · 2023-03-16 18:42:52 +08:00 · 28098cda1f
commit 28098cda1f
parent cdeff0028d
9 changed files with 42 additions and 24 deletions
--- a/packages/console/src/pages/SignInExperience/tabs/Branding/CustomCssForm.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Branding/CustomCssForm.tsx
@ -22,22 +22,27 @@ const CustomCssForm = () => {
      <FormField
        title="sign_in_exp.custom_css.css_code_editor_title"
        tip={(closeTipHandler) => (
-          <Trans
-            components={{
-              a: (
-                <TextLink
-                  // TODO: update the link when Custom CSS docs are ready
-                  to={getDocumentationUrl('/docs/recipes/customize-sie/configure-branding')}
-                  target="_blank"
-                  onClick={closeTipHandler}
-                />
-              ),
-            }}
-          >
-            {t('sign_in_exp.custom_css.css_code_editor_description', {
-              link: t('sign_in_exp.custom_css.css_code_editor_description_link_content'),
-            })}
-          </Trans>
+          <>
+            <div>{t('sign_in_exp.custom_css.css_code_editor_description1')}</div>
+            <div>
+              <Trans
+                components={{
+                  a: (
+                    <TextLink
+                      // TODO: update the link when Custom CSS docs are ready
+                      to={getDocumentationUrl('/docs/recipes/customize-sie/configure-branding')}
+                      target="_blank"
+                      onClick={closeTipHandler}
+                    />
+                  ),
+                }}
+              >
+                {t('sign_in_exp.custom_css.css_code_editor_description2', {
+                  link: t('sign_in_exp.custom_css.css_code_editor_description_link_content'),
+                })}
+              </Trans>
+            </div>
+          </>
        )}
      >
        <Controller
--- a/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts
@ -101,7 +101,8 @@ const sign_in_exp = {
  custom_css: {
    title: 'CUSTOM CSS', // UNTRANSLATED
    css_code_editor_title: 'Personalize your UI with Custom CSS', // UNTRANSLATED
-    css_code_editor_description: 'See the example of Custom CSS. <a>{{link}}</a>', // UNTRANSLATED
+    css_code_editor_description1: 'See the example of Custom CSS.', // UNTRANSLATED
+    css_code_editor_description2: '<a>{{link}}</a>', // UNTRANSLATED
    css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED
    css_code_editor_content_placeholder:
      '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
--- a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
@ -44,7 +44,8 @@ const sign_in_exp = {
  custom_css: {
    title: 'CUSTOM CSS',
    css_code_editor_title: 'Personalize your UI with Custom CSS',
-    css_code_editor_description: 'See the example of Custom CSS. <a>{{link}}</a>',
+    css_code_editor_description1: 'See the example of Custom CSS.',
+    css_code_editor_description2: '<a>{{link}}</a>',
    css_code_editor_description_link_content: 'Learn more',
    css_code_editor_content_placeholder:
      '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.',
--- a/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
@ -46,7 +46,9 @@ const sign_in_exp = {
  custom_css: {
    title: 'CUSTOM CSS', // UNTRANSLATED
    css_code_editor_title: 'Personalize your UI with Custom CSS', // UNTRANSLATED
-    css_code_editor_description: 'See the example of Custom CSS. <a>{{link}}</a>', // UNTRANSLATED
+    css_code_editor_description1: 'See the example of Custom CSS.', // UNTRANSLATED
+    css_code_editor_description2: '<a>{{link}}</a>', // UNTRANSLATED
+
    css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED
    css_code_editor_content_placeholder:
      '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
--- a/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
@ -42,7 +42,9 @@ const sign_in_exp = {
  custom_css: {
    title: 'CUSTOM CSS', // UNTRANSLATED
    css_code_editor_title: 'Personalize your UI with Custom CSS', // UNTRANSLATED
-    css_code_editor_description: 'See the example of Custom CSS. <a>{{link}}</a>', // UNTRANSLATED
+    css_code_editor_description1: 'See the example of Custom CSS.', // UNTRANSLATED
+    css_code_editor_description2: '<a>{{link}}</a>', // UNTRANSLATED
+
    css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED
    css_code_editor_content_placeholder:
      '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts
@ -45,7 +45,9 @@ const sign_in_exp = {
  custom_css: {
    title: 'CUSTOM CSS', // UNTRANSLATED
    css_code_editor_title: 'Personalize your UI with Custom CSS', // UNTRANSLATED
-    css_code_editor_description: 'See the example of Custom CSS. <a>{{link}}</a>', // UNTRANSLATED
+    css_code_editor_description1: 'See the example of Custom CSS.', // UNTRANSLATED
+    css_code_editor_description2: '<a>{{link}}</a>', // UNTRANSLATED
+
    css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED
    css_code_editor_content_placeholder:
      '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
@ -44,7 +44,9 @@ const sign_in_exp = {
  custom_css: {
    title: 'CUSTOM CSS', // UNTRANSLATED
    css_code_editor_title: 'Personalize your UI with Custom CSS', // UNTRANSLATED
-    css_code_editor_description: 'See the example of Custom CSS. <a>{{link}}</a>', // UNTRANSLATED
+    css_code_editor_description1: 'See the example of Custom CSS.', // UNTRANSLATED
+    css_code_editor_description2: '<a>{{link}}</a>', // UNTRANSLATED
+
    css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED
    css_code_editor_content_placeholder:
      '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
@ -45,7 +45,9 @@ const sign_in_exp = {
  custom_css: {
    title: 'CUSTOM CSS', // UNTRANSLATED
    css_code_editor_title: 'Personalize your UI with Custom CSS', // UNTRANSLATED
-    css_code_editor_description: 'See the example of Custom CSS. <a>{{link}}</a>', // UNTRANSLATED
+    css_code_editor_description1: 'See the example of Custom CSS.', // UNTRANSLATED
+    css_code_editor_description2: '<a>{{link}}</a>', // UNTRANSLATED
+
    css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED
    css_code_editor_content_placeholder:
      '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
@ -43,7 +43,8 @@ const sign_in_exp = {
  custom_css: {
    title: '自定义 CSS',
    css_code_editor_title: '自定义 CSS 个性化你的用户界面',
-    css_code_editor_description: '查看自定义 CSS 的例子。 <a>{{link}}</a>',
+    css_code_editor_description1: '查看自定义 CSS 的例子。',
+    css_code_editor_description2: '<a>{{link}}</a>',
    css_code_editor_description_link_content: '了解更多',
    css_code_editor_content_placeholder:
      '// 输入自定义 CSS 代码，从颜色、字体、组件样式和布局等，定制你的登录、注册、忘记密码和其他页面。充分发挥创造力，让你的用户界面脱颖而出。',