From 0d36e8a3fc384e7d895ba31ff8837bfe8ef3132f Mon Sep 17 00:00:00 2001
From: Simon Ser <contact@emersion.fr>
Date: Tue, 22 Jun 2021 16:02:55 +0200
Subject: [PATCH] Turn dialog close button into a <button>

This is semantically more correct.
---
 components/dialog.js |  2 +-
 style.css            | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/components/dialog.js b/components/dialog.js
index 8ad4cd2..28eff1d 100644
--- a/components/dialog.js
+++ b/components/dialog.js
@@ -50,8 +50,8 @@ export default class Dialog extends Component {
 			<div class="dialog" onClick=${this.handleBackdropClick}>
 				<div class="dialog-body" ref=${this.body}>
 					<div class="dialog-header">
-						<a href="#" class="dialog-close" onClick=${this.handleCloseClick}>×</span>
 						<h2>${this.props.title}</h2>
+						<button class="dialog-close" onClick=${this.handleCloseClick}>×</button>
 					</div>
 					${this.props.children}
 				</div>
diff --git a/style.css b/style.css
index 30818b7..7b71fa6 100644
--- a/style.css
+++ b/style.css
@@ -460,7 +460,7 @@ details summary[role="button"] {
 	margin: 0.5rem;
 }
 
-#error-msg button {
+#error-msg button, .dialog button.dialog-close {
 	border: none;
 	background: transparent;
 	color: inherit;
@@ -489,11 +489,19 @@ details summary[role="button"] {
 	padding: 15px;
 	border: 1px solid rgba(0, 0, 0, 0.6);
 }
-.dialog a.dialog-close {
-	float: right;
-	text-decoration: none;
+.dialog .dialog-header {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	margin-bottom: 1em;
+}
+.dialog .dialog-header h2 {
+	flex-grow: 1;
+	margin: 0;
+}
+.dialog .dialog-header button.dialog-close {
 	font-size: 1.5em;
-	color: inherit;
+	padding: 0 5px;
 }
 .dialog h2 {
 	margin-top: 0;