From 292e6ebc6f1684a9996fcacb698a8bfd5086e34d Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Fri, 26 May 2023 22:19:12 +0800
Subject: [PATCH] refactor(console): update the eye icon of CopyToClipboard
 (#3908)

---
 .../console/src/assets/images/eye-closed.svg  |  5 ++---
 .../src/components/CopyToClipboard/index.tsx  | 20 ++++++++++---------
 .../de/translation/admin-console/general.ts   |  2 ++
 .../en/translation/admin-console/general.ts   |  2 ++
 .../es/translation/admin-console/general.ts   |  2 ++
 .../fr/translation/admin-console/general.ts   |  2 ++
 .../it/translation/admin-console/general.ts   |  2 ++
 .../ja/translation/admin-console/general.ts   |  2 ++
 .../ko/translation/admin-console/general.ts   |  2 ++
 .../translation/admin-console/general.ts      |  2 ++
 .../translation/admin-console/general.ts      |  2 ++
 .../translation/admin-console/general.ts      |  2 ++
 .../ru/translation/admin-console/general.ts   |  2 ++
 .../translation/admin-console/general.ts      |  2 ++
 .../translation/admin-console/general.ts      |  2 ++
 .../translation/admin-console/general.ts      |  2 ++
 .../translation/admin-console/general.ts      |  2 ++
 17 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/packages/console/src/assets/images/eye-closed.svg b/packages/console/src/assets/images/eye-closed.svg
index 000cd9a25..c3a370ca0 100644
--- a/packages/console/src/assets/images/eye-closed.svg
+++ b/packages/console/src/assets/images/eye-closed.svg
@@ -1,5 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fillRule="evenodd" clipRule="evenodd"
-    d="M3.66988 2.79338C3.27935 3.18391 3.27935 3.81707 3.66988 4.2076L5.30804 5.84576C3.10993 7.40492 1.66699 9.55153 1.66699 10.0003C1.66699 10.722 5.39795 15.8337 10.0003 15.8337C11.468 15.8337 12.847 15.3139 14.0447 14.5824L16.3978 16.9355C16.7883 17.326 17.4215 17.326 17.812 16.9355C18.2025 16.545 18.2025 15.9118 17.812 15.5213L5.08409 2.79338C4.69356 2.40286 4.0604 2.40286 3.66988 2.79338ZM12.0732 12.6109L7.38973 7.92745C6.9373 8.4965 6.66699 9.21685 6.66699 10.0003C6.66699 11.8413 8.15938 13.3337 10.0003 13.3337C10.7838 13.3337 11.5042 13.0634 12.0732 12.6109ZM18.3337 10.0003C18.3337 10.2663 17.8268 11.1287 16.9563 12.1117L9.07884 4.23427C9.38142 4.1904 9.68888 4.16699 10.0003 4.16699C14.6027 4.16699 18.3337 9.27866 18.3337 10.0003Z"
-    fill="currentColor" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.08962 1.9107C2.76419 1.58527 2.23655 1.58527 1.91111 1.9107C1.58567 2.23614 1.58567 2.76378 1.91111 3.08922L4.32982 5.50792C2.83446 6.72934 1.81505 8.16468 1.31308 8.9593L1.29284 8.9912C1.19456 9.14586 1.06692 9.3467 1.00255 9.62745C0.950582 9.85408 0.950565 10.1456 1.00251 10.3722C1.06684 10.653 1.19411 10.8533 1.29214 11.0076L1.31221 11.0393C1.80617 11.8214 2.79245 13.2098 4.23099 14.4104C5.67149 15.6127 7.61564 16.6666 10.0004 16.6666C11.6434 16.6666 13.079 16.1656 14.283 15.4611L16.9111 18.0892C17.2365 18.4147 17.7642 18.4147 18.0896 18.0892C18.4151 17.7638 18.4151 17.2361 18.0896 16.9107L15.0678 13.8889C15.0227 13.8301 14.971 13.7789 14.9145 13.7356L6.25533 5.07641C6.21533 5.02612 6.17048 4.98157 6.1219 4.94298L3.08962 1.9107ZM2.72214 9.84942C3.19507 9.10078 4.14928 7.77179 5.51526 6.69336L7.12867 8.30678C6.83561 8.80298 6.66703 9.38214 6.66703 9.99996C6.66703 11.8409 8.15942 13.3333 10.0004 13.3333C10.6182 13.3333 11.1973 13.1647 11.6936 12.8717L13.0562 14.2343C12.1482 14.7011 11.1278 15 10.0004 15C8.13092 15 6.55221 14.1769 5.29893 13.1309C4.04369 12.0832 3.16527 10.8521 2.72138 10.1493C2.69193 10.1027 2.67132 10.07 2.65411 10.0416C2.64275 10.0229 2.63525 10.01 2.63023 10.001L2.63023 9.99994L2.63023 9.99898C2.63531 9.98983 2.64293 9.97669 2.6545 9.95765C2.67183 9.92912 2.69256 9.89625 2.72214 9.84942ZM8.3337 9.99996C8.3337 9.8505 8.35326 9.70578 8.39002 9.56812L10.4322 11.6103C10.2945 11.6471 10.1498 11.6666 10.0004 11.6666C9.07989 11.6666 8.3337 10.9204 8.3337 9.99996Z" fill="currentColor"/>
+<path d="M9.07436 5.06793C9.37351 5.0237 9.68215 4.99996 10.0004 4.99996C11.8698 4.99996 13.4485 5.82304 14.7018 6.86905C15.957 7.91669 16.8355 9.14777 17.2794 9.85062C17.3088 9.89726 17.3294 9.92994 17.3466 9.95829C17.358 9.977 17.3655 9.98995 17.3705 9.99897L17.3705 9.99999L17.3705 10.0009C17.3654 10.0101 17.3577 10.0234 17.346 10.0426C17.3286 10.0713 17.3078 10.1042 17.2782 10.1512C17.0437 10.5222 16.6843 11.0467 16.2082 11.6154C15.9127 11.9682 15.9592 12.4938 16.3121 12.7893C16.665 13.0847 17.1906 13.0382 17.486 12.6853C18.0194 12.0484 18.4219 11.4613 18.6872 11.0414L18.7075 11.0093C18.8059 10.8545 18.9338 10.6533 18.9982 10.3726C19.0501 10.1459 19.0502 9.85437 18.9982 9.62772C18.9339 9.34699 18.8066 9.14663 18.7086 8.99232L18.6885 8.96067C18.1946 8.17853 17.2083 6.79011 15.7697 5.58948C14.3292 4.38723 12.3851 3.33329 10.0004 3.33329C9.5989 3.33329 9.20879 3.36327 8.83059 3.41919C8.3753 3.4865 8.06079 3.91015 8.1281 4.36544C8.19542 4.82073 8.61907 5.13524 9.07436 5.06793Z" fill="#747778"/>
 </svg>
diff --git a/packages/console/src/components/CopyToClipboard/index.tsx b/packages/console/src/components/CopyToClipboard/index.tsx
index 0ceff938d..11cc07f36 100644
--- a/packages/console/src/components/CopyToClipboard/index.tsx
+++ b/packages/console/src/components/CopyToClipboard/index.tsx
@@ -41,7 +41,7 @@ function CopyToClipboard({
       return value;
     }
 
-    return '*'.repeat(value.length);
+    return '•'.repeat(value.length);
   }, [hasVisibilityToggle, showHiddenContent, value]);
 
   useEffect(() => {
@@ -75,14 +75,16 @@ function CopyToClipboard({
       <div className={styles.row}>
         {variant !== 'icon' && <div className={styles.content}>{displayValue}</div>}
         {hasVisibilityToggle && (
-          <IconButton
-            className={styles.iconButton}
-            iconClassName={styles.icon}
-            size="small"
-            onClick={toggleHiddenContent}
-          >
-            {showHiddenContent ? <EyeClosed /> : <Eye />}
-          </IconButton>
+          <Tooltip content={t(showHiddenContent ? 'hide' : 'view')}>
+            <IconButton
+              className={styles.iconButton}
+              iconClassName={styles.icon}
+              size="small"
+              onClick={toggleHiddenContent}
+            >
+              {showHiddenContent ? <EyeClosed /> : <Eye />}
+            </IconButton>
+          </Tooltip>
         )}
         <Tooltip
           isSuccessful={copyState === 'copied'}
diff --git a/packages/phrases/src/locales/de/translation/admin-console/general.ts b/packages/phrases/src/locales/de/translation/admin-console/general.ts
index c28718a02..880d4558c 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/general.ts
@@ -52,6 +52,8 @@ const general = {
   multiple_form_field: '(Mehrere)',
   demo: 'Demo',
   unnamed: 'Unbenannt',
+  view: 'Anzeigen',
+  hide: 'Verbergen',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/en/translation/admin-console/general.ts b/packages/phrases/src/locales/en/translation/admin-console/general.ts
index ad00fb4e0..5290a4455 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/general.ts
@@ -51,6 +51,8 @@ const general = {
   multiple_form_field: '(Multiple)',
   demo: 'Demo',
   unnamed: 'Unnamed',
+  view: 'View',
+  hide: 'Hide',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/es/translation/admin-console/general.ts b/packages/phrases/src/locales/es/translation/admin-console/general.ts
index 2363b044b..f72e552f6 100644
--- a/packages/phrases/src/locales/es/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/general.ts
@@ -52,6 +52,8 @@ const general = {
   multiple_form_field: '(Múltiple)',
   demo: 'Demostración',
   unnamed: 'Sin nombre',
+  view: 'Ver',
+  hide: 'Ocultar',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/general.ts b/packages/phrases/src/locales/fr/translation/admin-console/general.ts
index deb3d2324..b3b398f0b 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/general.ts
@@ -52,6 +52,8 @@ const general = {
   multiple_form_field: '(Multiple)',
   demo: 'Démo',
   unnamed: 'Sans nom',
+  view: 'Vue',
+  hide: 'Cacher',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/it/translation/admin-console/general.ts b/packages/phrases/src/locales/it/translation/admin-console/general.ts
index bf3724346..9a128cd08 100644
--- a/packages/phrases/src/locales/it/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/general.ts
@@ -52,6 +52,8 @@ const general = {
   multiple_form_field: '(Multiplo)',
   demo: 'Demo',
   unnamed: 'Senza nome',
+  view: 'Vista',
+  hide: 'Nascondi',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/ja/translation/admin-console/general.ts b/packages/phrases/src/locales/ja/translation/admin-console/general.ts
index f28f7c80d..43e584cb9 100644
--- a/packages/phrases/src/locales/ja/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/general.ts
@@ -51,6 +51,8 @@ const general = {
   multiple_form_field: '(複数)',
   demo: 'デモ',
   unnamed: '名前がありません',
+  view: '表示',
+  hide: '非表示',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/general.ts b/packages/phrases/src/locales/ko/translation/admin-console/general.ts
index 49918326c..81b38a574 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/general.ts
@@ -51,6 +51,8 @@ const general = {
   multiple_form_field: '(복수 선택)',
   demo: '데모',
   unnamed: '이름없음',
+  view: '보기',
+  hide: '숨기기',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/general.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/general.ts
index d8bb4c907..0b0443415 100644
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/general.ts
@@ -51,6 +51,8 @@ const general = {
   multiple_form_field: '(Wiele)',
   demo: 'Demo',
   unnamed: 'Bez nazwy',
+  view: 'Pokaż',
+  hide: 'Ukryj',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/general.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/general.ts
index 419bc6127..62af97f7a 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/general.ts
@@ -52,6 +52,8 @@ const general = {
   multiple_form_field: '(Multiple)',
   demo: 'Demo',
   unnamed: 'Sem nome',
+  view: 'Visualizar',
+  hide: 'Ocultar',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts
index 749d04ce6..9815c32dd 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts
@@ -51,6 +51,8 @@ const general = {
   multiple_form_field: '(Múltiplo)',
   demo: 'Demonstração',
   unnamed: 'Sem nome',
+  view: 'Ver',
+  hide: 'Esconder',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/ru/translation/admin-console/general.ts b/packages/phrases/src/locales/ru/translation/admin-console/general.ts
index 80127657d..94b1e71f1 100644
--- a/packages/phrases/src/locales/ru/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/general.ts
@@ -51,6 +51,8 @@ const general = {
   multiple_form_field: '(Несколько)',
   demo: 'Демо',
   unnamed: 'Без имени',
+  view: 'Просмотр',
+  hide: 'Скрыть',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts
index a101e8f3a..ad96cf508 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts
@@ -52,6 +52,8 @@ const general = {
   multiple_form_field: '(Çoklu)',
   demo: 'Demo',
   unnamed: 'İsimsiz',
+  view: 'Görünüm',
+  hide: 'Gizle',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts
index 3a3ee7a24..880cd2a6a 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts
@@ -51,6 +51,8 @@ const general = {
   multiple_form_field: '（多选）',
   demo: '演示',
   unnamed: '未命名',
+  view: '查看',
+  hide: '隐藏',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/general.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/general.ts
index 18d39e6de..7fbb3ef3a 100644
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/general.ts
@@ -51,6 +51,8 @@ const general = {
   multiple_form_field: '（多選）',
   demo: '演示',
   unnamed: '未命名',
+  view: '查看',
+  hide: '隱藏',
 };
 
 export default general;
diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/general.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/general.ts
index e23c8f2bc..aca68365c 100644
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/general.ts
@@ -51,6 +51,8 @@ const general = {
   multiple_form_field: '（多選）',
   demo: '演示',
   unnamed: '未命名',
+  view: '查看',
+  hide: '隱藏',
 };
 
 export default general;