jsonwebtoken · javiert-okta · Aug 22, 2025 · Aug 22, 2025 · Aug 22, 2025 · Aug 22, 2025
diff --git a/src/features/common/components/card-message/card-message.module.scss b/src/features/common/components/card-message/card-message.module.scss
@@ -4,7 +4,7 @@
 .span,
 .p,
 .code {
-  font-size: 0.75rem;
+  font-size: .875rem;
   line-height: 1.125rem;
 }
 

diff --git a/src/features/common/components/card-toolbar-button/card-toolbar-button.component.tsx b/src/features/common/components/card-toolbar-button/card-toolbar-button.component.tsx
@@ -7,12 +7,13 @@ import { MonoFont } from "@/libs/theme/fonts";
 export interface CardToolbarButtonComponentProps
   extends AriaButtonOptions<"span"> {
   variant: "standard" | "icon";
+  tooltipText?: string;
 }
 
 export const CardToolbarButtonComponent: React.FC<
   PropsWithChildren<CardToolbarButtonComponentProps>
 > = (props) => {
-  const { variant, children } = props;
+  const { variant, tooltipText, children } = props;
 
   const ref = useRef<HTMLButtonElement | null>(null);
 
@@ -22,20 +23,25 @@ export const CardToolbarButtonComponent: React.FC<
       elementType: "span",
       preventFocusOnPress: true,
     },
-    ref,
+    ref
   );
 
   return (
-    <button
-      {...buttonProps}
-      type="button"
-      className={clsx(
-        variant === "icon" ? styles.button__icon : styles.button__standard,
-        MonoFont.className,
+    <div className={styles.button__tooltipContainer}>
+      <button
+        {...buttonProps}
+        type="button"
+        className={clsx(
+          variant === "icon" ? styles.button__icon : styles.button__standard,
+          MonoFont.className
+        )}
+        data-style="compact"
+      >
+        {children}
+      </button>
+      {tooltipText && (
+        <span className={styles.button__tooltip}>{tooltipText}</span>
       )}
-      data-style="compact"
-    >
-      {children}
-    </button>
+    </div>
   );
 };
diff --git a/src/features/common/components/card-toolbar-button/card-toolbar-button.module.scss b/src/features/common/components/card-toolbar-button/card-toolbar-button.module.scss
@@ -1,7 +1,16 @@
+.button__tooltipContainer {
+    position: relative;
+    display: inline-block;
+    &:hover {
+      .button__tooltip {
+        opacity: 1;
+      }
+    }
+}
 .button__standard {
   gap: 0.75rem;
+  border: none;
   border-radius: 0.25rem;
-  border: 1px solid var(--color_border_button);
   color: var(--color_fg_on_button_subtle);
   font-variant-numeric: slashed-zero;
   font-feature-settings:
@@ -20,6 +29,12 @@
     cursor: not-allowed;
   }
 
+   &:hover {
+    background-color: var(--color_bg_layer);
+    border: 1px solid var(--color_border_default);
+    transition: all .2s ease-out;
+  }
+
   padding: 0 0.75rem;
   width: 5rem;
   height: 2rem;
@@ -46,6 +61,25 @@
   }
 }
 
+.button__tooltip {
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 4px 8px;
+    color: var(--color_fg_bold);
+    background-color: var(--color_bg_layer);
+    border: 1px solid var(--color_border_default);
+    border-radius: .5rem;
+    font-size: .75rem;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .2s ease-in-out;
+    box-shadow: 0 2px 4px rgba(0,0,0,.1);
+    z-index: 1000;
+}
+
 .button__icon {
   gap: 0.75rem;
   border-radius: 0.25rem;
@@ -72,10 +106,9 @@
   }
 
   &:hover {
-    background-color: var(--color_bg_layer_alternate-bold);
-    svg {
-      stroke: var(--color_fg_selected);
-    }
+    background-color: var(--color_bg_layer);
+    border: 1px solid var(--color_border_default);
+    transition: all .2s ease-out;
   }
 
   &:focus-visible {

diff --git a/...ts/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component.tsx b/...ts/card-toolbar-buttons/card-toolbar-clear-button/card-toolbar-clear-button.component.tsx
@@ -4,6 +4,7 @@ import {
   CardToolbarButtonComponent,
   CardToolbarButtonComponentProps,
 } from "@/features/common/components/card-toolbar-button/card-toolbar-button.component";
+import { ClearIcon } from "../../icons/clear/clear-icon";
 
 interface CardToolbarClearButtonComponentProps
   extends Omit<CardToolbarButtonComponentProps, "variant"> {
@@ -16,8 +17,12 @@ export const CardToolbarClearButtonComponent: React.FC<
   const dictionary = getButtonsUiDictionary(languageCode);
 
   return (
-    <CardToolbarButtonComponent {...props} variant="standard">
-      {dictionary.clearButton.label}
+    <CardToolbarButtonComponent
+      {...props}
+      variant="standard"
+      tooltipText={dictionary.clearButton.label}
+    >
+      <ClearIcon />
     </CardToolbarButtonComponent>
   );
 };
diff --git a/...ents/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component.tsx b/...ents/card-toolbar-buttons/card-toolbar-copy-button/card-toolbar-copy-button.component.tsx
@@ -4,6 +4,8 @@ import {
   CardToolbarButtonComponentProps,
 } from "@/features/common/components/card-toolbar-button/card-toolbar-button.component";
 import { getButtonsUiDictionary } from "@/features/localization/services/ui-language-dictionary.service";
+import { CopyIcon } from "../../icons/copy/copy-icon";
+import { CheckIcon } from "../../icons/check/check-icon";
 
 interface CardToolbarCopyButtonComponentProps
   extends Omit<PropsWithChildren<CardToolbarButtonComponentProps>, "variant"> {
@@ -15,7 +17,6 @@ export const CardToolbarCopyButtonComponent: React.FC<
   CardToolbarCopyButtonComponentProps
 > = ({ languageCode, value, isDisabled, ...props }) => {
   const dictionary = getButtonsUiDictionary(languageCode);
-
   const [isCopied, setIsCopied] = useState(false);
 
   const resetCopy = () => {
@@ -36,10 +37,13 @@ export const CardToolbarCopyButtonComponent: React.FC<
       onPress={copyValue}
       onBlur={resetCopy}
       variant="standard"
+      tooltipText={
+        isCopied
+          ? dictionary.copyButton.done.label
+          : dictionary.copyButton.idle.label
+      }
     >
-      {isCopied
-        ? dictionary.copyButton.done.label
-        : dictionary.copyButton.idle.label}
+      {isCopied ? <CheckIcon /> : <CopyIcon />}
     </CardToolbarButtonComponent>
   );
 };
diff --git a/src/features/common/components/card/card.component.tsx b/src/features/common/components/card/card.component.tsx
@@ -3,12 +3,14 @@ import styles from "./card.module.scss";
 import { clsx } from "clsx";
 import { getLocalizedSecondaryFont, MonoFont } from "@/libs/theme/fonts";
 import { CardMessageComponent } from "@/features/common/components/card-message/card-message.component";
+import { HeaderIcon } from "../icons/header/header-icon";
 
 export interface CardComponentProps extends PropsWithChildren {
   id: string;
   languageCode: string;
   title: string;
   compactTitle: string;
+  hasHeaderIcon?: boolean;
   options: Partial<{
     noPadding: boolean;
     fullWidth: boolean;
@@ -44,6 +46,7 @@ export const CardComponent: React.FC<CardComponentProps> = (props) => {
     },
     messages,
     slots,
+    hasHeaderIcon = false,
   } = props;
 
   const cardId = useId();
@@ -64,7 +67,7 @@ export const CardComponent: React.FC<CardComponentProps> = (props) => {
         MonoFont.className,
         styles.card,
         options && options.fullWidth && styles.card__hasFullWidth,
-        options && options.fullHeight && styles.card__hasFullHeight,
+        options && options.fullHeight && styles.card__hasFullHeight
       )}
       data-type={options && options.isOutput ? "output" : "input"}
       data-frameless={options && options.frameless}
@@ -74,21 +77,9 @@ export const CardComponent: React.FC<CardComponentProps> = (props) => {
           {titleKey && (
             <div className={styles.card__headline}>
               {titleKey && !compactTitle && (
-                <h4 id={cardId}>
-                  <span className={styles.card__titleKey}>
-                    {titleKey}
-                    {titleValue && `: `}
-                  </span>
-                  {titleValue && (
-                    <span className={styles.card__titleValue}>
-                      {titleValue}
-                    </span>
-                  )}
-                </h4>
-              )}
-              {titleKey && compactTitle && (
-                <>
-                  <h4 id={cardId} className={styles.card__fullTitle}>
+                <div className={styles.card__heading_title_container}>
+                  {hasHeaderIcon && <HeaderIcon />}
+                  <h4 id={cardId}>
                     <span className={styles.card__titleKey}>
                       {titleKey}
                       {titleValue && `: `}
@@ -99,6 +90,24 @@ export const CardComponent: React.FC<CardComponentProps> = (props) => {
                       </span>
                     )}
                   </h4>
+                </div>
+              )}
+              {titleKey && compactTitle && (
+                <>
+                  <div className={styles.card__heading_title_container}>
+                    {hasHeaderIcon && <HeaderIcon />}
+                    <h4 id={cardId} className={styles.card__fullTitle}>
+                      <span className={styles.card__titleKey}>
+                        {titleKey}
+                        {titleValue && `: `}
+                      </span>
+                      {titleValue && (
+                        <span className={styles.card__titleValue}>
+                          {titleValue}
+                        </span>
+                      )}
+                    </h4>
+                  </div>
                   <h4 id={cardId} className={styles.card__compactTitle}>
                     <span className={styles.card__titleKey}>
                       {compactTitle}
@@ -111,6 +120,16 @@ export const CardComponent: React.FC<CardComponentProps> = (props) => {
           )}
         </>
       )}
+      <div className={styles.card__content}>
+        <div
+          className={styles.card__body}
+          data-no-padding={
+            options && options.noPadding ? options.noPadding : undefined
+          }
+        >
+          {children}
+        </div>
+      </div>
       {messages && messages.errors && messages.errors.length > 0 ? (
         <div
           data-testid={`${id}___statusBar__error`}
@@ -136,6 +155,7 @@ export const CardComponent: React.FC<CardComponentProps> = (props) => {
           })}
         </div>
       ) : null}
+      {slots?.notification}
       {messages && messages.warnings && messages.warnings.length > 0 && (
         <div
           data-testid={`${id}___statusBar__warning`}
@@ -149,15 +169,6 @@ export const CardComponent: React.FC<CardComponentProps> = (props) => {
           })}
         </div>
       )}
-      {slots?.notification}
-      <div
-        className={styles.card__body}
-        data-no-padding={
-          options && options.noPadding ? options.noPadding : undefined
-        }
-      >
-        {children}
-      </div>
       {slots?.footer && (
         <div className={styles.card__action}>{slots.footer}</div>
       )}
@@ -192,7 +203,7 @@ export const CardWithHeadlineComponent: React.FC<
             id={regionId}
             className={clsx(
               styles.cardHeadline__title,
-              getLocalizedSecondaryFont(languageCode),
+              getLocalizedSecondaryFont(languageCode)
             )}
           >
             {sectionHeadline.title}
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ @@
     .span,
     .p,
     .code {
-      font-size: 0.75rem;
+      font-size: .875rem;
       line-height: 1.125rem;
     }
@@ Expand Down @@