782 give every modal a header with title and close button (#829)

frontend/src/App.css

@@ -46,6 +46,7 @@
 	position: fixed;
 	top: 50%;
 	left: 50%;
+	overflow: hidden;
 	margin: 0;
 	padding: 0;
 	border: none;

frontend/src/Theme.css

@@ -66,12 +66,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,45 @@
+.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;
 	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 { documentService } from '@src/service';
 
-import DocumentViewBoxHeader from './DocumentViewBoxHeader';
+import DocumentViewBoxNav from './DocumentViewBoxNav';
 
 import './DocumentViewBox.css';
 
@@ -32,44 +33,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,38 @@
+.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 .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/DocumentViewBoxNav.tsx

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

frontend/src/components/HandbookOverlay/HandbookAttacks.tsx

@@ -23,7 +23,7 @@ function HandbookAttacks({ currentLevel }: { currentLevel: LEVEL_NAMES }) {
 	return (
 		<article className="handbook-page">
 			<header>
-				<h1>Attacks</h1>
+				<h2>Attacks</h2>
 				<p>{getHeaderText(currentLevel)}</p>
 			</header>
 			{currentLevel > LEVEL_NAMES.LEVEL_1 && (