Added search icon to filter search inputs.

components/filters/actors.vue

@@ -6,12 +6,16 @@
 		>Some actors may not be listed, apply a filter or search to narrow down results.</div>
 
 		<div class="filters-sort">
-			<input
+			<label class="filter-search">
-				v-model="search"
+				<input
-				type="search"
+					v-model="search"
-				:placeholder="`Filter ${availableActors.length} actors`"
+					type="search"
-				class="input input-inline filters-search"
+					:placeholder="`Filter ${availableActors.length} actors`"
-			>
+					class="input input-inline filters-search"
+				>
+
+				<Icon icon="search" />
+			</label>
 
 			<div
 				class="filter-sort noselect"

components/filters/channels.vue

@@ -1,12 +1,16 @@
 <template>
 	<div class="filter channels-container">
 		<div class="filters-sort">
-			<input
+			<label class="filter-search">
-				v-model="search"
+				<input
-				type="search"
+					v-model="search"
-				:placeholder="`Filter ${channels.length} channels`"
+					type="search"
-				class="input input-inline filters-search"
+					:placeholder="`Filter ${channels.length} channels`"
-			>
+					class="input input-inline filters-search"
+				>
+
+				<Icon icon="search" />
+			</label>
 
 			<div
 				v-show="order === 'name'"

components/filters/country.vue

@@ -2,13 +2,19 @@
 	<div
 		class="countries-container"
 	>
-		<input
+		<label
 			v-if="!filters.country"
-			v-model="countryQuery"
+			class="filter-search"
-			type="search"
-			placeholder="Filter countries"
-			class="input input-inline countries-search"
 		>
+			<input
+				v-model="countryQuery"
+				type="search"
+				placeholder="Filter countries"
+				class="input input-inline countries-search filters-search"
+			>
+
+			<Icon icon="search" />
+		</label>
 
 		<div
 			v-if="filteredCountries.length > 0"
@@ -28,7 +34,10 @@
 			/>
 		</div>
 
-		<div class="empty">
+		<div
+			v-else
+			class="empty"
+		>
 			No matching countries
 		</div>
 	</div>
@@ -66,13 +75,12 @@ const filteredCountries = computed(() => allCountries.value.filter((country) =>
 <style scoped>
 .countries-container {
 	border-bottom: solid 1px var(--shadow-weak-30);
-	padding: .25rem 0;
+	padding-bottom: .25rem;
 	margin-bottom: .5rem;
 }
 
-.countries-search {
+.filter-search {
-	width: 100%;
+
-	margin-bottom: .25rem;
 	border-bottom: solid 1px var(--shadow-weak-40);
 }
 

components/filters/filters.vue

@@ -272,7 +272,6 @@ function toggleFilters(state) {
 	&.order {
 		padding: 0 .5rem 0 .25rem;
 	}
-
 	.icon {
 		fill: var(--glass);
 	}
@@ -286,6 +285,26 @@ function toggleFilters(state) {
 	}
 }
 
+.filter-search {
+	display: flex;
+	flex-direction: row-reverse;
+	cursor: pointer;
+
+	.icon {
+		padding: .5rem .25rem .5rem .75rem;
+		fill: var(--glass-weak-20);
+
+		&:hover {
+			cursor: pointer;
+			fill: var(--primary);
+		}
+	}
+
+	.input:focus + .icon {
+		fill: var(--primary);
+	}
+}
+
 .filter-details {
 	display: flex;
 	align-items: stretch;

components/filters/tags.vue

@@ -1,12 +1,16 @@
 <template>
 	<div class="filter tags-container">
 		<div class="filters-sort">
-			<input
+			<label class="filter-search">
-				v-model="search"
+				<input
-				type="search"
+					v-model="search"
-				:placeholder="`Filter ${groupedTags.available.length} tags`"
+					type="search"
-				class="input input-inline filters-search"
+					:placeholder="`Filter ${groupedTags.available.length} tags`"
-			>
+					class="input input-inline filters-search"
+				>
+
+				<Icon icon="search" />
+			</label>
 
 			<div
 				v-show="order === 'priority'"