~emersion/gamja

0d36e8a3fc384e7d895ba31ff8837bfe8ef3132f — Simon Ser 5 months ago 1ea3180
Turn dialog close button into a <button>

This is semantically more correct.
2 files changed, 14 insertions(+), 6 deletions(-)

M components/dialog.js
M style.css
M components/dialog.js => components/dialog.js +1 -1
@@ 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>

M style.css => style.css +13 -5
@@ 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;