From ac985864259e5d03abb1e6379dc282a53ede366c Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Mon, 9 Mar 2026 18:04:28 +0000
Subject: [PATCH] Move mosquito icon to tiny mosquito

---
 html/template/sync/communication-root.html | 38 ++++++++++++----------
 scss/custom.scss                           |  5 +++
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/html/template/sync/communication-root.html b/html/template/sync/communication-root.html
index 521be2d4..f24b7f02 100644
--- a/html/template/sync/communication-root.html
+++ b/html/template/sync/communication-root.html
@@ -313,7 +313,7 @@
 								:class="typeFilter === 'nuisance' ? 'btn-danger' : 'btn-outline-secondary'"
 								@click="typeFilter = 'nuisance'"
 							>
-								<i class="bi bi-exclamation-triangle"></i> Nuisance
+								<i class="bi">{{ template "mosquito.svg" }}</i> Nuisance
 							</button>
 							<button
 								class="btn btn-sm"
@@ -338,9 +338,7 @@
 								>
 									<div class="d-flex align-items-center">
 										<template x-if="comm.type === 'nuisance'">
-											<i
-												class="bi bi-exclamation-triangle-fill icon-nuisance fs-4 me-2"
-											></i>
+											<i class="bi fs-4 me-2">{{ template "mosquito.svg" }}</i>
 										</template>
 										<template x-if="comm.type === 'standing_water'">
 											<i
@@ -411,7 +409,7 @@
 					</div>
 					<template x-if="!selectedCommunication">
 						<div
-							class="h-100 d-flex flex-column align-items-center justify-content-center text-muted"
+							class="d-flex flex-column align-items-center justify-content-center text-muted"
 						>
 							<i class="bi bi-hand-index fs-1"></i>
 							<p class="mt-2">Select a report to view details</p>
@@ -431,9 +429,9 @@
 												x-if="selectedCommunication.type === 'nuisance'"
 											>
 												<span
-													><i
-														class="bi bi-exclamation-triangle-fill icon-nuisance"
-													></i>
+													><i class="bi icon-nuisance"
+														>{{ template "mosquito.svg" }}</i
+													>
 													Nuisance Report</span
 												>
 											</template>
@@ -482,16 +480,22 @@
 													class="fw-medium"
 													x-text="selectedCommunication.public_report.reporter.name"
 												></div>
+												<template
+													x-if="selectedCommunication.public_report.reporter.has_email"
+												>
+													<label class="form-label text-muted small mb-0">
+														<i class="bi bi-envelope"></i>
+													</label>
+												</template>
+												<template
+													x-if="selectedCommunication.public_report.reporter.has_phone"
+												>
+													<label class="form-label text-muted small mb-0">
+														<i class="bi bi-phone"></i>
+													</label>
+												</template>
 											</div>
-											<div class="col-md-6">
-												<label class="form-label text-muted small mb-0">
-													<i class="bi bi-envelope"></i> Contact
-												</label>
-												<div
-													class="fw-medium"
-													x-text="selectedCommunication.public_report.reporter.has_email"
-												></div>
-											</div>
+											<div class="col-md-6"></div>
 										</div>
 									</div>
 								</div>
diff --git a/scss/custom.scss b/scss/custom.scss
index c815bae8..8ef44f2b 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -44,6 +44,11 @@ $theme-colors: map-merge(
   100% { transform: rotate(360deg); }
 }
 
+// Make custom SVG icons about the same size as other icons
+i.bi svg {
+	height: 18px;
+	width: 18px;
+}
 @import "./bootstrap/scss/bootstrap";
 
 @import "./sidebar.scss";