Added search icon to filter search inputs.

components/filters/actors.vue

@@ -6,6 +6,7 @@
 		>Some actors may not be listed, apply a filter or search to narrow down results.</div>
 
 		<div class="filters-sort">
+			<label class="filter-search">
 				<input
 					v-model="search"
 					type="search"
@@ -13,6 +14,9 @@
 					class="input input-inline filters-search"
 				>
 
+				<Icon icon="search" />
+			</label>
+
 			<div
 				class="filter-sort noselect"
 				@click="selectGender"

components/filters/channels.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="filter channels-container">
 		<div class="filters-sort">
+			<label class="filter-search">
 				<input
 					v-model="search"
 					type="search"
@@ -8,6 +9,9 @@
 					class="input input-inline filters-search"
 				>
 
+				<Icon icon="search" />
+			</label>
+
 			<div
 				v-show="order === 'name'"
 				class="filter-sort order noselect"

components/filters/country.vue

@@ -2,14 +2,20 @@
 	<div
 		class="countries-container"
 	>
-		<input
+		<label
 			v-if="!filters.country"
+			class="filter-search"
+		>
+			<input
 				v-model="countryQuery"
 				type="search"
 				placeholder="Filter countries"
-			class="input input-inline countries-search"
+				class="input input-inline countries-search filters-search"
 			>
 
+			<Icon icon="search" />
+		</label>
+
 		<div
 			v-if="filteredCountries.length > 0"
 			class="countries-list"
@@ -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 {
-	width: 100%;
-	margin-bottom: .25rem;
+.filter-search {
+
 	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,6 +1,7 @@
 <template>
 	<div class="filter tags-container">
 		<div class="filters-sort">
+			<label class="filter-search">
 				<input
 					v-model="search"
 					type="search"
@@ -8,6 +9,9 @@
 					class="input input-inline filters-search"
 				>
 
+				<Icon icon="search" />
+			</label>
+
 			<div
 				v-show="order === 'priority'"
 				class="filter-sort order noselect"