From cc7ce44f47cfb614e12b748d46b9bb44a96083d3 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@gleipnir.technology>
Date: Tue, 7 Apr 2026 16:05:30 +0000
Subject: [PATCH] Finish porting styles of compliance flow

---
 .../rmo/district-compliance-concern.html      |  50 ----
 .../rmo/district-compliance-permission.html   | 254 ------------------
 ts/rmo/content/compliance/Concern.vue         |  41 +++
 ts/rmo/content/compliance/Contact.vue         |  14 +
 4 files changed, 55 insertions(+), 304 deletions(-)

diff --git a/html/template/rmo/district-compliance-concern.html b/html/template/rmo/district-compliance-concern.html
index bd9e5c22..92f71cbc 100644
--- a/html/template/rmo/district-compliance-concern.html
+++ b/html/template/rmo/district-compliance-concern.html
@@ -2,56 +2,6 @@
 
 {{ define "title" }}District Concerns{{ end }}
 {{ define "extraheader" }}
-	<style>
-		body {
-			background-color: #f8f9fa;
-		}
-
-		.progress-bar {
-			background-color: #0d6efd;
-			transition: width 0.3s ease;
-		}
-
-		.observation-image {
-			width: 100%;
-			height: 200px;
-			background-color: #e9ecef;
-			border: 1px solid #dee2e6;
-			border-radius: 8px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			color: #6c757d;
-			cursor: pointer;
-			transition: all 0.2s ease;
-			position: relative;
-			overflow: hidden;
-		}
-
-		.observation-image:hover {
-			border-color: #0d6efd;
-			box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
-		}
-
-		.observation-image .overlay {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			background: rgba(0, 0, 0, 0.7);
-			color: white;
-			padding: 8px;
-			font-size: 12px;
-			text-align: center;
-		}
-
-		.inspector-notes {
-			background-color: #fff;
-			border-left: 4px solid #0d6efd;
-			padding: 16px;
-			border-radius: 4px;
-		}
-	</style>
 {{ end }}
 {{ define "content" }}
 {{ end }}
diff --git a/html/template/rmo/district-compliance-permission.html b/html/template/rmo/district-compliance-permission.html
index 897d43ce..8308d315 100644
--- a/html/template/rmo/district-compliance-permission.html
+++ b/html/template/rmo/district-compliance-permission.html
@@ -4,258 +4,4 @@
 {{ define "extraheader" }}
 {{ end }}
 {{ define "content" }}
-	<div class="container-fluid px-3 py-3">
-		<main>
-			<h2 class="h4 mb-3">Property access permission</h2>
-
-			<p class="text-muted mb-4">
-				Granting access allows our technicians to inspect and potentially treat
-				mosquito sources more quickly, helping protect you and your neighbors.
-			</p>
-
-			<form id="access-form" method="POST" action="/compliance/access">
-				<!-- Access Options -->
-				<div class="mb-4">
-					<label class="form-label fw-semibold mb-3"
-						>Please select an option:</label
-					>
-
-					<!-- Option 1: Enter without owner present -->
-					<div class="access-option" id="option-1" onclick="selectOption(1)">
-						<div class="d-flex align-items-start">
-							<input
-								type="radio"
-								name="access_permission"
-								id="access-allowed"
-								value="allowed"
-								class="mt-1"
-							/>
-							<label for="access-allowed">
-								<div class="fw-semibold">
-									A technician may enter even if I am not home
-								</div>
-								<small class="text-muted">Fastest resolution</small>
-							</label>
-						</div>
-					</div>
-
-					<!-- Conditional fields for Option 1 -->
-					<div id="section-1" class="conditional-section">
-						<div class="mb-3">
-							<label for="access-instructions" class="form-label">
-								Access Instructions
-								<span class="text-muted">(Optional)</span>
-							</label>
-							<textarea
-								class="form-control"
-								id="access-instructions"
-								name="access_instructions"
-								rows="3"
-								placeholder="Example: Side gate on left, backyard near shed..."
-							></textarea>
-						</div>
-
-						<div class="mb-3">
-							<label for="gate-code" class="form-label">
-								Gate Code
-								<span class="text-muted">(Optional)</span>
-							</label>
-							<input
-								type="text"
-								class="form-control"
-								id="gate-code"
-								name="gate_code"
-								placeholder="Enter code if applicable"
-							/>
-						</div>
-
-						<div class="mb-3">
-							<label class="form-label">Dog on Property?</label>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="has_dog"
-									id="dog-no"
-									value="no"
-									checked
-									onchange="toggleDogWarning()"
-								/>
-								<label class="form-check-label" for="dog-no"> No </label>
-							</div>
-							<div class="form-check">
-								<input
-									class="form-check-input"
-									type="radio"
-									name="has_dog"
-									id="dog-yes"
-									value="yes"
-									onchange="toggleDogWarning()"
-								/>
-								<label class="form-check-label" for="dog-yes"> Yes </label>
-							</div>
-						</div>
-
-						<div id="dog-warning" class="dog-warning" style="display: none;">
-							<small>
-								<i class="bi bi-exclamation-triangle"></i>
-								<strong>Important:</strong> Our staff will only enter if the dog
-								is secured indoors. Please ensure your pet is safely inside
-								before a technician arrives.
-							</small>
-						</div>
-					</div>
-
-					<!-- Option 2: Enter with owner present -->
-					<div class="access-option" id="option-2" onclick="selectOption(2)">
-						<div class="d-flex align-items-start">
-							<input
-								type="radio"
-								name="access_permission"
-								id="access-with-owner"
-								value="with_owner"
-								class="mt-1"
-							/>
-							<label for="access-with-owner">
-								<div class="fw-semibold">
-									A technician may enter, but I want to be present
-								</div>
-								<small class="text-muted">Requires scheduling</small>
-							</label>
-						</div>
-					</div>
-
-					<!-- Conditional fields for Option 2 -->
-					<div id="section-2" class="conditional-section">
-						<div class="form-check mb-3">
-							<input
-								class="form-check-input"
-								type="checkbox"
-								id="request-scheduled"
-								name="request_scheduled"
-								value="yes"
-							/>
-							<label class="form-check-label" for="request-scheduled">
-								I would like to request a scheduled visit
-							</label>
-						</div>
-
-						<div class="mb-3">
-							<label for="availability-notes" class="form-label">
-								Availability / Access Notes
-								<span class="text-muted">(Optional)</span>
-							</label>
-							<textarea
-								class="form-control"
-								id="availability-notes"
-								name="availability_notes"
-								rows="3"
-								placeholder="Example: Available weekday mornings, please call before visiting..."
-							></textarea>
-						</div>
-					</div>
-
-					<!-- Option 3: Not granting entry -->
-					<div class="access-option" id="option-3" onclick="selectOption(3)">
-						<div class="d-flex align-items-start">
-							<input
-								type="radio"
-								name="access_permission"
-								id="access-denied"
-								value="denied"
-								class="mt-1"
-							/>
-							<label for="access-denied">
-								<div class="fw-semibold">
-									I am not granting entry at this time
-								</div>
-								<small class="text-muted">May require follow-up</small>
-							</label>
-						</div>
-					</div>
-
-					<!-- Conditional message for Option 3 -->
-					<div id="section-3" class="conditional-section">
-						<div class="encouragement-box">
-							<p class="mb-2">
-								<strong>We understand.</strong> Your cooperation is voluntary,
-								but mosquito breeding sources can affect the health and comfort
-								of the entire community.
-							</p>
-							<p class="mb-2">
-								To help us review this situation and avoid unnecessary
-								escalation, we strongly encourage you to:
-							</p>
-							<ul class="mb-2">
-								<li>Provide detailed photos of the area</li>
-								<li>Share your contact information</li>
-								<li>Include any context that may be helpful</li>
-							</ul>
-							<p class="mb-0">
-								<small class="text-muted">
-									This allows our team to assess whether the concern has been
-									addressed or if additional steps may be necessary.
-								</small>
-							</p>
-						</div>
-					</div>
-				</div>
-
-				<!-- Navigation Buttons -->
-				<div class="d-flex gap-2 mt-4">
-					<a href="../compliance/evidence" class="btn btn-outline-secondary">
-						Back
-					</a>
-					<a class="btn btn-primary flex-grow-1" href="contact"> Continue </a>
-				</div>
-			</form>
-		</main>
-	</div>
-
-	<script>
-		function selectOption(optionNum) {
-			// Update radio button
-			const radios = document.querySelectorAll(
-				'input[name="access_permission"]',
-			);
-			radios[optionNum - 1].checked = true;
-
-			// Update visual state of options
-			for (let i = 1; i <= 3; i++) {
-				const option = document.getElementById(`option-${i}`);
-				const section = document.getElementById(`section-${i}`);
-
-				if (i === optionNum) {
-					option.classList.add("selected");
-					section.classList.add("active");
-				} else {
-					option.classList.remove("selected");
-					section.classList.remove("active");
-				}
-			}
-		}
-
-		function toggleDogWarning() {
-			const dogYes = document.getElementById("dog-yes");
-			const dogWarning = document.getElementById("dog-warning");
-
-			if (dogYes.checked) {
-				dogWarning.style.display = "block";
-			} else {
-				dogWarning.style.display = "none";
-			}
-		}
-
-		// Initialize - check if any option is pre-selected
-		document.addEventListener("DOMContentLoaded", function () {
-			const radios = document.querySelectorAll(
-				'input[name="access_permission"]',
-			);
-			radios.forEach((radio, index) => {
-				if (radio.checked) {
-					selectOption(index + 1);
-				}
-			});
-		});
-	</script>
 {{ end }}
diff --git a/ts/rmo/content/compliance/Concern.vue b/ts/rmo/content/compliance/Concern.vue
index 6e306066..6c2a06e6 100644
--- a/ts/rmo/content/compliance/Concern.vue
+++ b/ts/rmo/content/compliance/Concern.vue
@@ -1,3 +1,44 @@
+<style scoped>
+.observation-image {
+	width: 100%;
+	height: 200px;
+	background-color: #e9ecef;
+	border: 1px solid #dee2e6;
+	border-radius: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #6c757d;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	position: relative;
+	overflow: hidden;
+}
+
+.observation-image:hover {
+	border-color: #0d6efd;
+	box-shadow: 0 2px 8px rgba(13, 110, 253, 0.2);
+}
+
+.observation-image .overlay {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: rgba(0, 0, 0, 0.7);
+	color: white;
+	padding: 8px;
+	font-size: 12px;
+	text-align: center;
+}
+
+.inspector-notes {
+	background-color: #fff;
+	border-left: 4px solid #0d6efd;
+	padding: 16px;
+	border-radius: 4px;
+}
+</style>
 <template>
 	<div class="container-fluid px-3 py-3">
 		<HeaderCompliance :district="district" />
diff --git a/ts/rmo/content/compliance/Contact.vue b/ts/rmo/content/compliance/Contact.vue
index 32d17580..6f266e3e 100644
--- a/ts/rmo/content/compliance/Contact.vue
+++ b/ts/rmo/content/compliance/Contact.vue
@@ -1,3 +1,17 @@
+<style scoped>
+.benefit-box {
+	background-color: #d1ecf1;
+	border-left: 4px solid #0dcaf0;
+	padding: 16px;
+	border-radius: 4px;
+}
+
+.optional-badge {
+	font-size: 0.85rem;
+	color: #6c757d;
+	font-weight: normal;
+}
+</style>
 <template>
 	<div class="container-fluid px-3 py-3">
 		<HeaderCompliance :district="district" />