refactor(console,phrases): polish css editor (#3508)

packages/console/src/components/CodeEditor/index.module.scss

@@ -7,13 +7,21 @@
   background: #34353f;
   position: relative;
 
+  .placeholder {
+    position: absolute;
+    inset: _.unit(6);
+    right: _.unit(8);
+    color: #95969f;
+    font: var(--font-body-2);
+  }
+
   .copy {
     display: flex;
     align-items: center;
     justify-content: right;
     position: absolute;
-    top: 24px;
+    top: _.unit(3);
-    right: 24px;
+    right: _.unit(3);
     opacity: 0%;
     transition: opacity 0.2s ease-in-out;
     z-index: 1;
@@ -31,7 +39,6 @@
 
     textarea {
       width: 100%;
-      height: 100%;
       margin: 0;
       padding: 0;
       border: none;
@@ -53,7 +60,7 @@
     textarea,
     pre {
       display: flex;
-      min-height: 20px;
+      min-height: 80px;
     }
   }
 }

packages/console/src/components/CodeEditor/index.tsx

@@ -1,4 +1,3 @@
-import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
 import type { ChangeEvent, KeyboardEvent } from 'react';
 import { useMemo, useRef } from 'react';
@@ -69,6 +68,7 @@ const CodeEditor = ({
   return (
     <>
       <div className={classNames(styles.container, className)}>
+        {!value && <div className={styles.placeholder}>{placeholder}</div>}
         <CopyToClipboard value={value ?? ''} variant="icon" className={styles.copy} />
         <div className={styles.editor}>
           {/* SyntaxHighlighter is a readonly component, so a transparent <textarea> layer is needed
@@ -82,7 +82,6 @@ const CodeEditor = ({
             readOnly={isReadonly}
             spellCheck="false"
             value={value}
-            placeholder={placeholder}
             onChange={handleChange}
             onKeyDown={handleKeydown}
           />
@@ -108,7 +107,7 @@ const CodeEditor = ({
             language={language}
             style={theme}
           >
-            {conditional(Boolean(value) && value) ?? placeholder ?? ''}
+            {value ?? ''}
           </SyntaxHighlighter>
         </div>
       </div>

packages/console/src/pages/SignInExperience/tabs/Branding/CustomCssForm.module.scss

@@ -1,5 +1,5 @@
 .customCssCodeEditor {
   max-height: calc(100vh - 260px);
-  min-height: 111px; // min-height to show three lines of code
+  min-height: 132px; // min-height to show three lines of code
   overflow-y: auto;
 }

packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts

@@ -101,7 +101,7 @@ const sign_in_exp = {
     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
+      'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
   },
   others: {
     terms_of_use: {

packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts

@@ -44,7 +44,7 @@ const sign_in_exp = {
     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.',
+      'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.',
   },
   sign_up_and_sign_in: {
     identifiers_email: 'Email address',

packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts

@@ -47,7 +47,7 @@ const sign_in_exp = {
 
     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
+      'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
   },
   sign_up_and_sign_in: {
     identifiers_email: 'Email address', // UNTRANSLATED

packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts

@@ -43,7 +43,7 @@ const sign_in_exp = {
 
     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
+      'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
   },
   sign_up_and_sign_in: {
     identifiers_email: '이메일 주소',

packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts

@@ -46,7 +46,7 @@ const sign_in_exp = {
 
     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
+      'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
   },
   sign_up_and_sign_in: {
     identifiers_email: 'Endereço de e-mail',

packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts

@@ -45,7 +45,7 @@ const sign_in_exp = {
 
     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
+      'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
   },
   sign_up_and_sign_in: {
     identifiers_email: 'Email address', // UNTRANSLATED

packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts

@@ -46,7 +46,7 @@ const sign_in_exp = {
 
     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
+      'Enter your custom CSS to tailor the styles of anything to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED
   },
   sign_up_and_sign_in: {
     identifiers_email: 'Email address', // UNTRANSLATED

packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts

@@ -43,7 +43,7 @@ const sign_in_exp = {
     css_code_editor_description2: '<a>{{link}}</a>',
     css_code_editor_description_link_content: '了解更多',
     css_code_editor_content_placeholder:
-      '// 输入自定义 CSS 代码，从颜色、字体、组件样式和布局等，定制你的登录、注册、忘记密码和其他页面。充分发挥创造力，让你的用户界面脱颖而出。',
+      '输入自定义 CSS 以根据你的需求定制任何内容的样式。发挥创造力，让你的用户界面脱颖而出。',
   },
   sign_up_and_sign_in: {
     identifiers_email: '邮件地址',