Merge pull request #5623 from logto-io/yemq-prd-700-prd-701-fix-code-editor-action-button-styles

chore(console,toolkit): update custom JWT details page code editor action buttons style

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 />}

packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/ActionButton/index.module.scss

@@ -0,0 +1,5 @@
+@use '@/scss/underscore' as _;
+
+.actionButton {
+  border-radius: 6px;
+}

packages/console/src/pages/CustomizeJwtDetails/MainContent/MonacoCodeEditor/index.module.scss

@@ -43,8 +43,31 @@
 
     .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);
+        }
+
+        // TODO (LOG-8602): Remove the default left margin of CopyToClipboard copyToolTipAnchor component.
+        div[class*='copyToolTipAnchor'] {
+          margin-left: 0;
+        }
+      }
     }
   }
 

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,11 @@ function MonacoCodeEditor({
             />
           )}
           {enabledActions.includes('copy') && (
-            <CopyToClipboard variant="icon" value={editorRef.current?.getValue() ?? ''} />
+            <CopyToClipboard
+              variant="icon"
+              value={editorRef.current?.getValue() ?? ''}
+              className={styles.iconButton}
+            />
           )}
           {actionButtons}
         </div>

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%);