782 give every modal a header with title and close button

frontend/src/Theme.css

@@ -65,12 +65,14 @@
 
 	/* general modal overlay */
 	--overlay-background-colour: #8ad5da;
+	--overlay-header-background-colour: #61b5ba;
 	--overlay-tab-colour: #c7e8f4;
 	--overlay-attack-background-colour: #d6d6ff;
 	--overlay-text-colour: #313131;
 
 	/* handbook modal */
 	--handbook-background-colour: #fff;
+	--handbook-header-background-colour: #a7a7a7;
 	--handbook-spine-background-colour: #d3d3d3;
 	--handbook-spine-separator-colour: var(--main-text-colour-inverted);
 	--handbook-tab-selected-colour: #313131;

frontend/src/components/DocumentViewer/DocumentViewBox.css

@@ -1,31 +1,46 @@
+.document-popup-inner header {
+	border-radius: 0;
+	background-color: var(--accent-background-colour);
+	color: var(--main-text-colour);
+}
+
+.document-popup-inner header .overlay-close-button {
+	border-color: var(--main-text-colour);
+	color: var(--main-text-colour);
+}
+
+.document-popup-inner header .overlay-close-icon {
+	border-color: var(--main-text-colour);
+	color: var(--main-text-colour);
+}
+
+.document-popup-inner header .overlay-close-button:hover {
+	background-color: var(--action-button-background-colour-hover);
+}
+
+.document-popup-inner header .overlay-close-button:focus-visible {
+	background-color: var(--action-button-background-colour-hover);
+	outline-color: var(--main-text-colour);
+}
+
 .document-popup-inner {
+	display: flex;
+	flex-direction: column;
+}
+
+.view-documents-main {
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	box-sizing: border-box;
-	height: 85vh;
+	height: 75vh;
+	margin-top: 5rem;
 	padding: 2rem;
 	border: 0.1875rem solid var(--main-border-colour);
 	background: var(--main-background);
 	aspect-ratio: 7/8;
 }
 
-.document-popup-inner .close-button {
-	position: absolute;
-	top: 1rem;
-	right: 1rem;
-	padding: 0.25rem 0.75rem;
-	color: var(--main-text-colour);
-	font-weight: bold;
-	font-size: 1.75rem;
-	text-decoration: none;
-}
-
-.document-popup-inner .close-button:hover {
-	border-color: var(--accent-border-colour);
-	color: var(--accent-border-colour);
-}
-
 .document-viewer-container {
 	flex-grow: 1;
 	overflow-y: auto;

frontend/src/components/DocumentViewer/DocumentViewBox.test.tsx

@@ -126,7 +126,7 @@ describe('DocumentViewBox component tests', () => {
 			const { user } = renderDocumentViewBox();
 
 			const closeButton = screen.getByRole('button', {
-				name: 'close document viewer',
+				name: 'close',
 			});
 			await user.click(closeButton);
 

frontend/src/components/DocumentViewer/DocumentViewBox.tsx

@@ -1,10 +1,11 @@
 import DocViewer, { DocViewerRenderers } from '@cyntler/react-doc-viewer';
 import { useEffect, useState } from 'react';
 
+import OverlayHeader from '@src/components/Overlay/OverlayHeader';
 import { DocumentMeta } from '@src/models/document';
 import { getDocumentMetas } from '@src/service/documentService';
 
-import DocumentViewBoxHeader from './DocumentViewBoxHeader';
+import DocumentViewBoxNav from './DocumentViewBoxNav';
 
 import './DocumentViewBox.css';
 
@@ -31,44 +32,43 @@ function DocumentViewBox({ closeOverlay }: { closeOverlay: () => void }) {
 
 	return (
 		<div className="document-popup-inner">
-			<button
-				className="prompt-injection-min-button close-button"
-				onClick={closeOverlay}
-				aria-label="close document viewer"
-				title="close document viewer"
-			>
-				X
-			</button>
-			<DocumentViewBoxHeader
-				documentIndex={documentIndex}
-				documentName={documentMetas[documentIndex]?.filename ?? ''}
-				numberOfDocuments={documentMetas.length}
-				onPrevious={() => {
-					if (documentIndex > 0) {
-						setDocumentIndex(documentIndex - 1);
-					}
-				}}
-				onNext={() => {
-					if (documentIndex < documentMetas.length - 1) {
-						setDocumentIndex(documentIndex + 1);
-					}
-				}}
+			<OverlayHeader
+				closeOverlay={closeOverlay}
+				heading="View Documents"
+				iconColor="#FFF"
 			/>
-			<div
-				className="document-viewer-container"
-				// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-				tabIndex={0}
-			>
-				<DocViewer
-					documents={documentMetas}
-					activeDocument={documentMetas[documentIndex]}
-					pluginRenderers={DocViewerRenderers}
-					config={{
-						header: {
-							disableHeader: true,
-						},
+			<div className="view-documents-main">
+				<DocumentViewBoxNav
+					documentIndex={documentIndex}
+					documentName={documentMetas[documentIndex]?.filename ?? ''}
+					numberOfDocuments={documentMetas.length}
+					onPrevious={() => {
+						if (documentIndex > 0) {
+							setDocumentIndex(documentIndex - 1);
+						}
+					}}
+					onNext={() => {
+						if (documentIndex < documentMetas.length - 1) {
+							setDocumentIndex(documentIndex + 1);
+						}
 					}}
 				/>
+				<div
+					className="document-viewer-container"
+					// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+					tabIndex={0}
+				>
+					<DocViewer
+						documents={documentMetas}
+						activeDocument={documentMetas[documentIndex]}
+						pluginRenderers={DocViewerRenderers}
+						config={{
+							header: {
+								disableHeader: true,
+							},
+						}}
+					/>
+				</div>
 			</div>
 		</div>
 	);

frontend/src/components/DocumentViewer/DocumentViewBoxNav.css

@@ -0,0 +1,47 @@
+.view-documents-nav {
+	display: flex;
+	flex-direction: column;
+	gap: 1.25rem;
+	align-items: stretch;
+	padding-bottom: 0.25rem;
+	color: var(--main-text-colour);
+}
+
+.view-documents-nav .nav {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+}
+
+.view-documents-nav .info {
+	margin: 0;
+	padding: 0;
+	font-size: 1.25rem;
+}
+
+.view-documents-nav .button-container {
+	display: flex;
+	gap: 1rem;
+	justify-content: space-between;
+	align-items: center;
+	align-self: stretch;
+}
+
+.view-documents-nav .button-container button {
+	flex: 0 0 30%;
+	white-space: nowrap;
+}
+
+.view-documents-nav .button-container button:focus-visible {
+	background-color: var(--action-button-background-colour-hover);
+	outline-color: var(--main-text-colour);
+}
+
+.view-documents-nav
+	.button-container
+	button[aria-disabled='true']:focus-visible {
+	background-color: var(--action-button-disabled-background-colour);
+}

frontend/src/components/DocumentViewer/DocumentViewBoxHeader.tsx → frontend/src/components/DocumentViewer/DocumentViewBoxNav.tsx

@@ -1,29 +1,28 @@
 import ThemedButton from '@src/components/ThemedButtons/ThemedButton';
 
-import './DocumentViewBoxHeader.css';
+import './DocumentViewBoxNav.css';
 
-interface DocumentViewBoxHeaderProps {
+interface DocumentViewBoxNavProps {
 	documentIndex: number;
 	documentName: string;
 	numberOfDocuments: number;
 	onPrevious: () => void;
 	onNext: () => void;
 }
 
-function DocumentViewBoxHeader({
+function DocumentViewBoxNav({
 	documentIndex,
 	documentName,
 	numberOfDocuments,
 	onPrevious,
 	onNext,
-}: DocumentViewBoxHeaderProps) {
+}: DocumentViewBoxNavProps) {
 	const documentNumber = `${documentIndex + 1} out of ${numberOfDocuments}`;
 
 	return (
-		<div className="view-documents-header">
-			<h2>View documents</h2>
+		<div className="view-documents-nav">
 			<div className="nav">
-				<div className="button-container">
+				<nav className="button-container">
 					<ThemedButton onClick={onPrevious} ariaDisabled={documentIndex <= 0}>
 						<i aria-hidden>◄</i>&nbsp;previous document
 					</ThemedButton>
@@ -34,12 +33,12 @@ function DocumentViewBoxHeader({
 					>
 						next document&nbsp;<i aria-hidden>►</i>
 					</ThemedButton>
-				</div>
+				</nav>
 			</div>
 			<p className="info">{documentName}</p>
 		</div>
 	);
 }
 
-export default DocumentViewBoxHeader;
-export type { DocumentViewBoxHeaderProps };
+export default DocumentViewBoxNav;
+export type { DocumentViewBoxNavProps };

frontend/src/components/HandbookOverlay/HandbookAttacks.tsx

@@ -22,10 +22,10 @@ function HandbookAttacks({ currentLevel }: { currentLevel: LEVEL_NAMES }) {
 
 	return (
 		<article className="handbook-page">
-			<header>
-				<h1>Attacks</h1>
+			<div>
+				<h2>Attacks</h2>
 				<p>{getHeaderText(currentLevel)}</p>
-			</header>
+			</div>
 			{currentLevel > LEVEL_NAMES.LEVEL_1 && (
 				<dl className="handbook-terms">
 					{attacks.map((attack) => (

frontend/src/components/HandbookOverlay/HandbookGlossary.tsx

@@ -11,10 +11,10 @@ function HandbookGlossary({ currentLevel }: { currentLevel: LEVEL_NAMES }) {
 	}
 	return (
 		<article className="handbook-page">
-			<header>
-				<h1>Glossary</h1>
+			<div>
+				<h2>Glossary</h2>
 				<p>{getHeaderText(currentLevel)}</p>
-			</header>
+			</div>
 			{currentLevel > LEVEL_NAMES.LEVEL_1 && (
 				<dl className="handbook-terms">
 					{GLOSSARY.map(({ term, definition }) => (