Add close search button

client/components/Windows/SearchResults.vue

@@ -21,6 +21,12 @@
 					>
 					<span class="topic">{{ $route.query.q }}</span>
 					<MessageSearchForm :network="network" :channel="channel" />
+					<button
+						class="close"
+						aria-label="Close search window"
+						title="Close search window"
+						@click="closeSearch"
+					/>
 				</div>
 				<div class="chat-content">
 					<div ref="chat" class="chat" tabindex="-1">
@@ -174,6 +180,9 @@ export default {
 		setActiveChannel() {
 			this.$store.commit("activeChannel", this.chan);
 		},
+		closeSearch() {
+			this.$root.switchToChannel(this.channel);
+		},
 		shouldDisplayDateMarker(message, id) {
 			const previousMessage = this.messages[id - 1];
 

client/css/style.css

@@ -284,6 +284,7 @@ p {
 #viewport .lt::before,
 #viewport .rt::before,
 #chat button.mentions::before,
+#chat button.close::before,
 #chat button.menu::before,
 #chat button.search::before,
 .channel-list-item::before,
@@ -344,6 +345,7 @@ p {
 #chat button.menu::before { content: "\f142"; /* http://fontawesome.io/icon/ellipsis-v/ */ }
 #chat button.mentions::before { content: "\f1fa"; /* https://fontawesome.com/icons/at?style=solid */ }
 #chat button.search::before { content: "\f002"; /* https://fontawesome.com/icons/search?style=solid */ }
+#chat button.close::before { content: "\f00d"; /* https://fontawesome.com/icons/times?style=solid */ }
 
 .context-menu-join::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
 .context-menu-user::before { content: "\f007"; /* http://fontawesome.io/icon/user/ */ }
@@ -578,7 +580,8 @@ p {
 #viewport .rt,
 #chat button.mentions,
 #chat button.search,
-#chat button.menu {
+#chat button.menu,
+#chat button.close {
 	color: #607992;
 	display: flex;
 	font-size: 14px;
@@ -593,7 +596,8 @@ p {
 #viewport .rt::before,
 #chat button.mentions::before,
 #chat button.search::before,
-#chat button.menu::before {
+#chat button.menu::before,
+#chat button.close::before {
 	width: 36px;
 	line-height: 36px; /* Fix alignment in Microsoft Edge */
 }

client/themes/morning.css

@@ -114,6 +114,7 @@ body {
 #viewport .rt,
 #chat button.mentions,
 #chat button.menu,
+#chat button.close,
 #form #submit {
 	color: #b7c5d1;
 }