fix(frontend): unify modal close button and title styling

src/components/features/backends/backend-form-modal.tsx

@@ -1,15 +1,14 @@
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { ServerClient } from "@openhands/typescript-client/clients";
 import OpenHandsLogoWhite from "#/assets/branding/openhands-logo-white.svg?react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import {
   MODAL_MAX_WIDTH_VIEWPORT,
   modalWidthClassName,
 } from "#/components/shared/modals/modal-body";
-import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { SettingsInput } from "#/components/features/settings/settings-input";
 import { useActiveBackendContext } from "#/contexts/active-backend-context";
@@ -22,9 +21,6 @@ import { cn } from "#/utils/utils";
 import { BackendStatusDot } from "./backend-status-dot";
 import { DeviceFlowAuth } from "./device-flow-auth";
 
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer";
-
 export type BackendFormMode = "add" | "edit";
 
 interface BackendFormModalProps {
@@ -606,23 +602,17 @@ export function BackendFormModal({
         <div
           data-testid="add-backend-modal"
           className={cn(
-            "rounded-xl border border-[var(--oh-border)] bg-base-secondary",
+            "relative rounded-xl border border-[var(--oh-border)] bg-base-secondary",
             modalWidthClassName("xl"),
             MODAL_MAX_WIDTH_VIEWPORT,
           )}
         >
+          <ModalCloseButton onClose={onClose} testId="add-backend-close" />
           {/* Header */}
-          <div className="flex items-start justify-between gap-4 px-6 pt-6 pb-2">
-            <BaseModalTitle title={t(I18nKey.BACKEND$ADD_TITLE)} />
-            <button
-              type="button"
-              onClick={onClose}
-              className={cn(ICON_BUTTON_CLASS, "shrink-0")}
-              data-testid="add-backend-close"
-              aria-label={t(I18nKey.BUTTON$CLOSE)}
-            >
-              <X size={20} aria-hidden />
-            </button>
+          <div className="px-6 pt-6 pb-2 pr-12">
+            <h2 className="text-lg font-semibold">
+              {t(I18nKey.BACKEND$ADD_TITLE)}
+            </h2>
           </div>
 
           {/* Two-column body */}
@@ -662,22 +652,14 @@ export function BackendFormModal({
       <div
         data-testid={`${testIdRoot}-modal`}
         className={cn(
-          "bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]",
+          "relative bg-base-secondary p-6 rounded-xl flex flex-col gap-4 border border-[var(--oh-border)]",
           modalWidthClassName("md"),
         )}
       >
-        <div className="flex items-start justify-between gap-4">
-          <BaseModalTitle title={t(I18nKey.BACKEND$EDIT_TITLE)} />
-          <button
-            type="button"
-            onClick={onClose}
-            className={cn(ICON_BUTTON_CLASS, "shrink-0")}
-            data-testid={`${testIdRoot}-close`}
-            aria-label={t(I18nKey.BUTTON$CLOSE)}
-          >
-            <X size={20} aria-hidden />
-          </button>
-        </div>
+        <ModalCloseButton onClose={onClose} testId={`${testIdRoot}-close`} />
+        <h2 className="pr-6 text-lg font-semibold">
+          {t(I18nKey.BACKEND$EDIT_TITLE)}
+        </h2>
         <BackendForm
           mode="edit"
           backend={backend}

src/components/features/backends/manage-backends-modal.tsx

@@ -1,19 +1,19 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@tanstack/react-query";
-import { Pencil, Plus, Trash2, X } from "lucide-react";
+import { Pencil, Plus, Trash2 } from "lucide-react";
 
 import { ServerClient } from "@openhands/typescript-client/clients";
 import { type Backend } from "#/api/backend-registry/types";
 import { getAgentServerClientOptions } from "#/api/agent-server-client-options";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { ConfirmationModal } from "#/components/shared/modals/confirmation-modal";
-import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import {
   MODAL_MAX_WIDTH_VIEWPORT,
   modalWidthClassName,
 } from "#/components/shared/modals/modal-body";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { useActiveBackendContext } from "#/contexts/active-backend-context";
 import {
   useBackendsHealth,
@@ -24,9 +24,6 @@ import { cn } from "#/utils/utils";
 import { BackendFormModal } from "./backend-form-modal";
 import { BackendStatusDot } from "./backend-status-dot";
 
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer";
-
 const ROW_ACTION_BUTTON_CLASS =
   "inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-muted transition-colors hover:bg-interactive-hover hover:text-white";
 
@@ -152,26 +149,20 @@ export function ManageBackendsModal({ onClose }: ManageBackendsModalProps) {
         <div
           data-testid="manage-backends-modal"
           className={cn(
-            "flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl",
+            "relative flex flex-col bg-[var(--oh-surface)] border border-[var(--oh-border)] rounded-xl",
             modalWidthClassName("lg"),
             MODAL_MAX_WIDTH_VIEWPORT,
             "max-h-[70vh]",
           )}
         >
-          <div className="flex items-start justify-between gap-4 p-5">
-            <BaseModalTitle
-              title={t(I18nKey.BACKEND$MANAGE_TITLE)}
-              className="text-white"
-            />
-            <button
-              type="button"
-              onClick={onClose}
-              className={ICON_BUTTON_CLASS}
-              aria-label={t(I18nKey.BUTTON$CLOSE)}
-              data-testid="close-manage-backends-modal"
-            >
-              <X size={20} aria-hidden />
-            </button>
+          <ModalCloseButton
+            onClose={onClose}
+            testId="close-manage-backends-modal"
+          />
+          <div className="p-5 pr-12">
+            <h2 className="text-lg font-semibold">
+              {t(I18nKey.BACKEND$MANAGE_TITLE)}
+            </h2>
           </div>
 
           <div className="flex min-h-0 flex-1 flex-col px-5">

src/components/features/chat/open-repository-modal.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop";
 import { ModalBody } from "#/components/shared/modals/modal-body";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { BrandButton } from "#/components/features/settings/brand-button";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
 import { I18nKey } from "#/i18n/declaration";
@@ -12,10 +12,6 @@ import { GitRepoDropdown } from "#/components/features/home/git-repo-dropdown/gi
 import { GitBranchDropdown } from "#/components/features/home/git-branch-dropdown/git-branch-dropdown";
 import { GitProviderDropdown } from "#/components/features/home/git-provider-dropdown/git-provider-dropdown";
 import { useUserProviders } from "#/hooks/use-user-providers";
-import { cn } from "#/utils/utils";
-
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed";
 
 interface OpenRepositoryModalProps {
   isOpen: boolean;
@@ -101,19 +97,14 @@ export function OpenRepositoryModal({
     <ModalBackdrop onClose={handleClose}>
       <ModalBody
         width="sm"
-        className="items-start border border-[var(--oh-border)] !gap-4"
+        className="relative items-start border border-[var(--oh-border)] !gap-4"
       >
-        <div className="flex w-full items-start justify-between gap-4">
+        <ModalCloseButton
+          onClose={handleClose}
+          testId="close-open-repository-modal"
+        />
+        <div className="w-full pr-6">
           <BaseModalTitle title={t(I18nKey.CONVERSATION$OPEN_REPOSITORY)} />
-          <button
-            type="button"
-            onClick={handleClose}
-            className={cn(ICON_BUTTON_CLASS, "shrink-0")}
-            data-testid="close-open-repository-modal"
-            aria-label={t(I18nKey.BUTTON$CLOSE)}
-          >
-            <X size={20} aria-hidden />
-          </button>
         </div>
 
         <div className="flex flex-col gap-4 w-full">

src/components/features/conversation-panel/hooks-modal-header.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
-import { RefreshCw, X } from "lucide-react";
+import { RefreshCw } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { StyledTooltip } from "#/components/shared/buttons/styled-tooltip";
 import { I18nKey } from "#/i18n/declaration";
 import { Typography } from "#/ui/typography";
@@ -26,14 +27,15 @@ export function HooksModalHeader({
   const refreshLabel = t(I18nKey.BUTTON$REFRESH);
 
   return (
-    <div className="flex w-full items-start justify-between gap-4">
-      <div className="flex min-w-0 flex-1 flex-col gap-2">
-        <BaseModalTitle title={t(I18nKey.HOOKS_MODAL$TITLE)} />
-        <Typography.Text className="text-sm text-[var(--oh-muted)]">
-          {t(I18nKey.HOOKS_MODAL$WARNING)}
-        </Typography.Text>
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
+    <>
+      <ModalCloseButton onClose={onClose} testId="close-hooks-modal" />
+      <div className="flex w-full items-start justify-between gap-4 pr-10">
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
+          <BaseModalTitle title={t(I18nKey.HOOKS_MODAL$TITLE)} />
+          <Typography.Text className="text-sm text-[var(--oh-muted)]">
+            {t(I18nKey.HOOKS_MODAL$WARNING)}
+          </Typography.Text>
+        </div>
         <StyledTooltip content={refreshLabel} placement="bottom">
           <button
             type="button"
@@ -50,16 +52,7 @@ export function HooksModalHeader({
             />
           </button>
         </StyledTooltip>
-        <button
-          type="button"
-          onClick={onClose}
-          className={ICON_BUTTON_CLASS}
-          aria-label={t(I18nKey.BUTTON$CLOSE)}
-          data-testid="close-hooks-modal"
-        >
-          <X size={20} aria-hidden />
-        </button>
       </div>
-    </div>
+    </>
   );
 }

src/components/features/conversation-panel/hooks-modal.tsx

@@ -42,7 +42,7 @@ export function HooksModal({ onClose }: HooksModalProps) {
     <ModalBackdrop onClose={onClose}>
       <ModalBody
         width="lg"
-        className="max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]"
+        className="relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]"
         testID="hooks-modal"
       >
         <HooksModalHeader

src/components/features/conversation-panel/skills-modal-header.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
-import { RefreshCw, X } from "lucide-react";
+import { RefreshCw } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { StyledTooltip } from "#/components/shared/buttons/styled-tooltip";
 import { I18nKey } from "#/i18n/declaration";
 import { Typography } from "#/ui/typography";
@@ -26,14 +27,15 @@ export function SkillsModalHeader({
   const refreshLabel = t(I18nKey.BUTTON$REFRESH);
 
   return (
-    <div className="flex w-full items-start justify-between gap-4">
-      <div className="flex min-w-0 flex-1 flex-col gap-2">
-        <BaseModalTitle title={t(I18nKey.SKILLS_MODAL$TITLE)} />
-        <Typography.Text className="text-sm text-[var(--oh-muted)]">
-          {t(I18nKey.SKILLS_MODAL$WARNING)}
-        </Typography.Text>
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
+    <>
+      <ModalCloseButton onClose={onClose} testId="close-skills-modal" />
+      <div className="flex w-full items-start justify-between gap-4 pr-10">
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
+          <BaseModalTitle title={t(I18nKey.SKILLS_MODAL$TITLE)} />
+          <Typography.Text className="text-sm text-[var(--oh-muted)]">
+            {t(I18nKey.SKILLS_MODAL$WARNING)}
+          </Typography.Text>
+        </div>
         <StyledTooltip content={refreshLabel} placement="bottom">
           <button
             type="button"
@@ -50,16 +52,7 @@ export function SkillsModalHeader({
             />
           </button>
         </StyledTooltip>
-        <button
-          type="button"
-          onClick={onClose}
-          className={ICON_BUTTON_CLASS}
-          aria-label={t(I18nKey.BUTTON$CLOSE)}
-          data-testid="close-skills-modal"
-        >
-          <X size={20} aria-hidden />
-        </button>
       </div>
-    </div>
+    </>
   );
 }

src/components/features/conversation-panel/skills-modal.tsx

@@ -64,7 +64,7 @@ export function SkillsModal({ onClose }: SkillsModalProps) {
     <ModalBackdrop onClose={onClose}>
       <ModalBody
         width="lg"
-        className="max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]"
+        className="relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]"
         testID="skills-modal"
       >
         <SkillsModalHeader

src/components/features/conversation-panel/system-message-modal.tsx

@@ -38,7 +38,7 @@ export function SystemMessageModal({
       <ModalBackdrop onClose={onClose}>
         <ModalBody
           width="lg"
-          className="max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]"
+          className="relative max-h-[80vh] flex flex-col items-start border border-[var(--oh-border)]"
           testID="system-message-modal"
         >
           <SystemMessageHeader

src/components/features/conversation-panel/system-message-modal/system-message-header.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "react-i18next";
-import { X } from "lucide-react";
 import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal";
+import { ModalCloseButton } from "#/components/shared/modals/modal-close-button";
 import { Typography } from "#/ui/typography";
 import { I18nKey } from "#/i18n/declaration";
 
@@ -10,9 +10,6 @@ interface SystemMessageHeaderProps {
   onClose: () => void;
 }
 
-const ICON_BUTTON_CLASS =
-  "rounded-md p-1 text-white hover:bg-tertiary cursor-pointer";
-
 export function SystemMessageHeader({
   agentClass,
   openhandsVersion,
@@ -21,8 +18,9 @@ export function SystemMessageHeader({
   const { t } = useTranslation("openhands");
 
   return (
-    <div className="flex w-full items-start justify-between gap-4">
-      <div className="flex min-w-0 flex-1 flex-col gap-2">
+    <>
+      <ModalCloseButton onClose={onClose} testId="close-system-message-modal" />
+      <div className="flex w-full min-w-0 flex-col gap-2 pr-6">
         <BaseModalTitle title={t(I18nKey.SYSTEM_MESSAGE_MODAL$TITLE)} />
         {(agentClass || openhandsVersion) && (
           <div className="flex flex-col gap-2">
@@ -49,15 +47,6 @@ export function SystemMessageHeader({
           </div>
         )}
       </div>
-      <button
-        type="button"
-        onClick={onClose}
-        className={ICON_BUTTON_CLASS}
-        aria-label={t(I18nKey.BUTTON$CLOSE)}
-        data-testid="close-system-message-modal"
-      >
-        <X size={20} aria-hidden />
-      </button>
-    </div>
+    </>
   );
 }