From fc734efa34ff12290d9db9cb8b1829cb97be8881 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Sun, 19 Mar 2023 19:32:49 +0800
Subject: [PATCH] refactor(console,phrases): polish css editor (#3508)

---
 .../src/components/CodeEditor/index.module.scss   | 15 +++++++++++----
 .../console/src/components/CodeEditor/index.tsx   |  5 ++---
 .../tabs/Branding/CustomCssForm.module.scss       |  2 +-
 .../de/translation/admin-console/sign-in-exp.ts   |  2 +-
 .../en/translation/admin-console/sign-in-exp.ts   |  2 +-
 .../fr/translation/admin-console/sign-in-exp.ts   |  2 +-
 .../ko/translation/admin-console/sign-in-exp.ts   |  2 +-
 .../translation/admin-console/sign-in-exp.ts      |  2 +-
 .../translation/admin-console/sign-in-exp.ts      |  2 +-
 .../translation/admin-console/sign-in-exp.ts      |  2 +-
 .../translation/admin-console/sign-in-exp.ts      |  2 +-
 11 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/console/src/components/CodeEditor/index.module.scss b/packages/console/src/components/CodeEditor/index.module.scss
index 521df7df3..22aa851fd 100644
--- a/packages/console/src/components/CodeEditor/index.module.scss
+++ b/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;
-    right: 24px;
+    top: _.unit(3);
+    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;
     }
   }
 }
diff --git a/packages/console/src/components/CodeEditor/index.tsx b/packages/console/src/components/CodeEditor/index.tsx
index 571c43723..8218d011e 100644
--- a/packages/console/src/components/CodeEditor/index.tsx
+++ b/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>
diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/CustomCssForm.module.scss b/packages/console/src/pages/SignInExperience/tabs/Branding/CustomCssForm.module.scss
index c9966d410..7f0f0e21e 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Branding/CustomCssForm.module.scss
+++ b/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;
 }
diff --git 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
index 9dd4efb9c..89241fada 100644
--- 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,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: {
diff --git 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
index 3622b2d47..953e3ffa7 100644
--- 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,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',
diff --git 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
index 999d22278..9a5b3e92c 100644
--- 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
@@ -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
diff --git 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
index 00b58f664..ddaa5fb06 100644
--- 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
@@ -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: '이메일 주소',
diff --git 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
index 01f025731..9f6caa9d4 100644
--- 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
@@ -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',
diff --git 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
index 130bc65c5..395761eae 100644
--- 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
@@ -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
diff --git 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
index ffbb4bb2a..f71e2b081 100644
--- 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
@@ -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
diff --git 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
index b232f2e01..9274561dc 100644
--- 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,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: '邮件地址',