modalheader

frontend/src/settings/SettingsModal.jsx

@@ -1,4 +1,5 @@
 import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import PanelHeader from '../ui/PanelHeader';
 
 const SECTIONS = [
   {
@@ -407,12 +408,17 @@ const SettingsModal = ({
         aria-labelledby="settings-modal-title"
         onClick={handleInnerClick}
       >
-        <div className="panel-modal__header">
-          <h3 id="settings-modal-title">Settings</h3>
-          <button type="button" className="secondary" onClick={onClose}>
-            Close
-          </button>
-        </div>
+        <PanelHeader
+          className="panel-modal__header"
+          title="Settings"
+          titleTag="h3"
+          titleProps={{ id: 'settings-modal-title' }}
+          actions={(
+            <button type="button" className="secondary" onClick={onClose}>
+              Close
+            </button>
+          )}
+        />
         <div className="settings-modal__body">
           <nav className="settings-modal__sidebar" aria-label="Settings sections">
             <ul>