modalheader

frontend/src/app/useManagementModals.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import TagsPanel from '../tags/TagsPanel';
 import CorrespondentsPanel from '../correspondents/CorrespondentsPanel';
+import PanelHeader from '../ui/PanelHeader';
 
 const TAGS_MODAL = 'tags';
 const CORRESPONDENTS_MODAL = 'correspondents';
@@ -63,12 +64,17 @@ export const useManagementModals = ({
           aria-labelledby="tags-modal-title"
           onClick={(event) => event.stopPropagation()}
         >
-          <div className="panel-modal__header">
-            <h3 id="tags-modal-title">Manage Tags</h3>
-            <button type="button" className="secondary" onClick={closeActiveModal}>
-              Close
-            </button>
-          </div>
+          <PanelHeader
+            className="panel-modal__header"
+            title="Manage Tags"
+            titleTag="h3"
+            titleProps={{ id: 'tags-modal-title' }}
+            actions={(
+              <button type="button" className="secondary" onClick={closeActiveModal}>
+                Close
+              </button>
+            )}
+          />
           <div className="panel-modal__body">
             <TagsPanel
               tags={tags}
@@ -110,12 +116,17 @@ export const useManagementModals = ({
           aria-labelledby="correspondents-modal-title"
           onClick={(event) => event.stopPropagation()}
         >
-          <div className="panel-modal__header">
-            <h3 id="correspondents-modal-title">Manage Correspondents</h3>
-            <button type="button" className="secondary" onClick={closeActiveModal}>
-              Close
-            </button>
-          </div>
+          <PanelHeader
+            className="panel-modal__header"
+            title="Manage Correspondents"
+            titleTag="h3"
+            titleProps={{ id: 'correspondents-modal-title' }}
+            actions={(
+              <button type="button" className="secondary" onClick={closeActiveModal}>
+                Close
+              </button>
+            )}
+          />
           <div className="panel-modal__body">
             <CorrespondentsPanel
               correspondents={correspondents}

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>

frontend/src/styles.css

@@ -2828,10 +2828,7 @@ form.inline {
 }
 
 .panel-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.5rem;
+  padding: 1rem 1rem 1rem 0.5rem;
   border-bottom: 1px solid var(--border);
 }