From 7f3cd97b4475e8723a1f67086950c8d93e78f6a2 Mon Sep 17 00:00:00 2001
From: Darcy Ye <darcyye@silverhand.io>
Date: Wed, 3 Apr 2024 01:45:36 +0800
Subject: [PATCH 1/2] chore(console,toolkit): update custom JWT details page
 code editor action buttons style

---
 .../CopyToClipboard/index.module.scss         | 12 +++++++++++
 .../ds-components/CopyToClipboard/index.tsx   |  7 ++++++-
 .../ActionButton/CodeRestoreButton.tsx        |  6 +++++-
 .../ActionButton/index.module.scss            |  5 +++++
 .../MonacoCodeEditor/index.module.scss        | 20 ++++++++++++++++++-
 .../MainContent/MonacoCodeEditor/index.tsx    |  8 +++++++-
 .../core-kit/scss/_console-themes.scss        |  6 ++++++
 7 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/ActionButton/index.module.scss

diff --git a/packages/console/src/ds-components/CopyToClipboard/index.module.scss b/packages/console/src/ds-components/CopyToClipboard/index.module.scss
index 3440dcf43..be524ab1b 100644
--- a/packages/console/src/ds-components/CopyToClipboard/index.module.scss
+++ b/packages/console/src/ds-components/CopyToClipboard/index.module.scss
@@ -42,6 +42,10 @@
 
     .copyToolTipAnchor {
       margin-left: _.unit(2);
+
+      &.leftMarginIgnored {
+        margin-left: 0;
+      }
     }
   }
 
@@ -49,6 +53,10 @@
     .row {
       .copyToolTipAnchor {
         margin-left: _.unit(3);
+
+        &.leftMarginIgnored {
+          margin-left: 0;
+        }
       }
     }
   }
@@ -57,6 +65,10 @@
     .row {
       .copyToolTipAnchor {
         margin-left: _.unit(1);
+
+        &.leftMarginIgnored {
+          margin-left: 0;
+        }
       }
 
       .iconButton {
diff --git a/packages/console/src/ds-components/CopyToClipboard/index.tsx b/packages/console/src/ds-components/CopyToClipboard/index.tsx
index 20ccc7f53..2ebe8d3b8 100644
--- a/packages/console/src/ds-components/CopyToClipboard/index.tsx
+++ b/packages/console/src/ds-components/CopyToClipboard/index.tsx
@@ -32,6 +32,7 @@ type Props = {
   size?: 'default' | 'small';
   isWordWrapAllowed?: boolean;
   isFullWidth?: boolean;
+  isLeftMarginIgnored?: boolean;
 };
 
 type CopyState = TFuncKey<'translation', 'admin_console.general'>;
@@ -47,6 +48,7 @@ function CopyToClipboard(
     size = 'default',
     isWordWrapAllowed = false,
     isFullWidth = false,
+    isLeftMarginIgnored = false,
   }: Props,
   ref: ForwardedRef<HTMLDivElement>
 ) {
@@ -126,7 +128,10 @@ function CopyToClipboard(
         )}
         <Tooltip
           isSuccessful={copyState === 'copied'}
-          anchorClassName={styles.copyToolTipAnchor}
+          anchorClassName={classNames(
+            styles.copyToolTipAnchor,
+            isLeftMarginIgnored && styles.leftMarginIgnored
+          )}
           content={t(copyState)}
         >
           <IconButton
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/ActionButton/CodeRestoreButton.tsx b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/ActionButton/CodeRestoreButton.tsx
index f3bb2af8a..05505757d 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/ActionButton/CodeRestoreButton.tsx
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/ActionButton/CodeRestoreButton.tsx
@@ -1,18 +1,22 @@
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
 import RedoIcon from '@/assets/icons/redo.svg';
 
 import ActionButton from './index';
+import * as styles from './index.module.scss';
 
 type Props = {
+  className?: string;
   onClick: () => void;
 };
 
-function CodeRestoreButton({ onClick }: Props) {
+function CodeRestoreButton({ className, onClick }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
     <ActionButton
+      className={classNames(className, styles.actionButton)}
       actionTip={t('jwt_claims.restore')}
       actionSuccessTip={t('jwt_claims.restored')}
       icon={<RedoIcon />}
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/ActionButton/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/ActionButton/index.module.scss
new file mode 100644
index 000000000..70be358e0
--- /dev/null
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/ActionButton/index.module.scss
@@ -0,0 +1,5 @@
+@use '@/scss/underscore' as _;
+
+.actionButton {
+  border-radius: 6px;
+}
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
index b53083ef8..60525dfe0 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
@@ -43,8 +43,26 @@
 
     .actionButtons {
       display: flex;
-      gap: _.unit(2);
+      gap: _.unit(3);
       align-items: center;
+      background: none;
+
+      svg {
+        color: var(--color-code-grey);
+      }
+
+      .iconButton {
+        transition: background 0.2s ease-in-out;
+        cursor: pointer;
+
+        &:hover {
+          background: var(--color-overlay-dark-bg-hover);
+        }
+
+        &:active {
+          background: var(--color-overlay-dark-bg-pressed);
+        }
+      }
     }
   }
 
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx
index 2f0bd1793..f7a98e39a 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx
@@ -158,6 +158,7 @@ function MonacoCodeEditor({
         <div className={styles.actionButtons}>
           {enabledActions.includes('restore') && (
             <CodeRestoreButton
+              className={styles.iconButton}
               onClick={() => {
                 if (activeModel && value !== activeModel.defaultValue) {
                   onChange?.(activeModel.defaultValue);
@@ -166,7 +167,12 @@ function MonacoCodeEditor({
             />
           )}
           {enabledActions.includes('copy') && (
-            <CopyToClipboard variant="icon" value={editorRef.current?.getValue() ?? ''} />
+            <CopyToClipboard
+              isLeftMarginIgnored
+              variant="icon"
+              value={editorRef.current?.getValue() ?? ''}
+              className={styles.iconButton}
+            />
           )}
           {actionButtons}
         </div>
diff --git a/packages/toolkit/core-kit/scss/_console-themes.scss b/packages/toolkit/core-kit/scss/_console-themes.scss
index f5132f2fe..19d9ae98d 100644
--- a/packages/toolkit/core-kit/scss/_console-themes.scss
+++ b/packages/toolkit/core-kit/scss/_console-themes.scss
@@ -170,6 +170,9 @@
   --color-overlay-primary-pressed: rgba(93, 52, 242, 12%); // 12% Primary-40
   --color-function-n-overlay-primary-focused: rgba(93, 52, 242, 16%); // 16% Primary-40
   --color-overlay-danger-hover: rgba(186, 27, 27, 8%); // 8% Error-40
+  --color-overlay-dark-bg-hover: rgba(255, 255, 255, 12%); // 12% static white
+  --color-overlay-dark-bg-pressed: rgba(255, 255, 255, 18%); // 18% static white
+  --color-overlay-dark-bg-focused: rgba(255, 255, 255, 24%); // 24% static white
 
   // Shadows
   --shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
@@ -391,6 +394,9 @@
   --color-overlay-primary-pressed: rgba(202, 190, 255, 12%); // 12% Primary-40
   --color-function-n-overlay-primary-focused: rgba(202, 190, 255, 16%); // 16% Primary-40
   --color-overlay-danger-hover: rgba(186, 27, 27, 8%); // 8% Error-40
+  --color-overlay-dark-bg-hover: rgba(255, 255, 255, 12%); // 12% static white
+  --color-overlay-dark-bg-pressed: rgba(255, 255, 255, 18%); // 18% static white
+  --color-overlay-dark-bg-focused: rgba(255, 255, 255, 24%); // 24% static white
 
   // Shadows
   --shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);

From 4a60bf40e8b1b732a4af11586dcbccc1c20c1d36 Mon Sep 17 00:00:00 2001
From: Darcy Ye <darcyye@silverhand.io>
Date: Wed, 3 Apr 2024 11:25:58 +0800
Subject: [PATCH 2/2] chore(console,toolkit): update custom JWT details page
 code editor action buttons style

---
 .../ds-components/CopyToClipboard/index.module.scss  | 12 ------------
 .../src/ds-components/CopyToClipboard/index.tsx      |  7 +------
 .../MainContent/MonacoCodeEditor/index.module.scss   |  5 +++++
 .../MainContent/MonacoCodeEditor/index.tsx           |  1 -
 4 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/packages/console/src/ds-components/CopyToClipboard/index.module.scss b/packages/console/src/ds-components/CopyToClipboard/index.module.scss
index be524ab1b..3440dcf43 100644
--- a/packages/console/src/ds-components/CopyToClipboard/index.module.scss
+++ b/packages/console/src/ds-components/CopyToClipboard/index.module.scss
@@ -42,10 +42,6 @@
 
     .copyToolTipAnchor {
       margin-left: _.unit(2);
-
-      &.leftMarginIgnored {
-        margin-left: 0;
-      }
     }
   }
 
@@ -53,10 +49,6 @@
     .row {
       .copyToolTipAnchor {
         margin-left: _.unit(3);
-
-        &.leftMarginIgnored {
-          margin-left: 0;
-        }
       }
     }
   }
@@ -65,10 +57,6 @@
     .row {
       .copyToolTipAnchor {
         margin-left: _.unit(1);
-
-        &.leftMarginIgnored {
-          margin-left: 0;
-        }
       }
 
       .iconButton {
diff --git a/packages/console/src/ds-components/CopyToClipboard/index.tsx b/packages/console/src/ds-components/CopyToClipboard/index.tsx
index 2ebe8d3b8..20ccc7f53 100644
--- a/packages/console/src/ds-components/CopyToClipboard/index.tsx
+++ b/packages/console/src/ds-components/CopyToClipboard/index.tsx
@@ -32,7 +32,6 @@ type Props = {
   size?: 'default' | 'small';
   isWordWrapAllowed?: boolean;
   isFullWidth?: boolean;
-  isLeftMarginIgnored?: boolean;
 };
 
 type CopyState = TFuncKey<'translation', 'admin_console.general'>;
@@ -48,7 +47,6 @@ function CopyToClipboard(
     size = 'default',
     isWordWrapAllowed = false,
     isFullWidth = false,
-    isLeftMarginIgnored = false,
   }: Props,
   ref: ForwardedRef<HTMLDivElement>
 ) {
@@ -128,10 +126,7 @@ function CopyToClipboard(
         )}
         <Tooltip
           isSuccessful={copyState === 'copied'}
-          anchorClassName={classNames(
-            styles.copyToolTipAnchor,
-            isLeftMarginIgnored && styles.leftMarginIgnored
-          )}
+          anchorClassName={styles.copyToolTipAnchor}
           content={t(copyState)}
         >
           <IconButton
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
index 60525dfe0..9e6bbb691 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss
@@ -62,6 +62,11 @@
         &:active {
           background: var(--color-overlay-dark-bg-pressed);
         }
+
+        // TODO (LOG-8602): Remove the default left margin of CopyToClipboard copyToolTipAnchor component.
+        div[class*='copyToolTipAnchor'] {
+          margin-left: 0;
+        }
       }
     }
   }
diff --git a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx
index f7a98e39a..a8b6993ac 100644
--- a/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx
+++ b/packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.tsx
@@ -168,7 +168,6 @@ function MonacoCodeEditor({
           )}
           {enabledActions.includes('copy') && (
             <CopyToClipboard
-              isLeftMarginIgnored
               variant="icon"
               value={editorRef.current?.getValue() ?? ''}
               className={styles.iconButton}