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

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 {

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

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,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);
+        }
+      }
     }
   }
 

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>

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