diff --git a/src/app/styles.css b/src/app/styles.css index 11c8c78..bcda178 100644 --- a/src/app/styles.css +++ b/src/app/styles.css @@ -661,14 +661,14 @@ html.dark .app-main__icon { font-size: 0.875rem; font-weight: 600; } -.emergency-alert { +.emergency-fallback { background: var(--emergency); border: 1px solid var(--emergency); border-radius: var(--radius); color: var(--emergency-contrast); padding: 1rem; } -.emergency-alert h2 { +.emergency-fallback h2 { margin-top: 0; } .emergency-service p { diff --git a/src/ui/views/emergency/emergency.ts b/src/ui/views/emergency/emergency.ts index c4f10a8..b057db9 100644 --- a/src/ui/views/emergency/emergency.ts +++ b/src/ui/views/emergency/emergency.ts @@ -130,12 +130,12 @@ export function createEmergencyView( const procedures = detail?.procedures?.length ? detail.procedures : resolved.floor.procedures; const urgent = document.createElement("div"); - urgent.className = "emergency-alert"; - urgent.append(heading("emergency-call-heading", "Need immediate help?")); - addService(urgent, "Emergency services", services.emergencyNumber, true); - urgent.append(text("p", "Tap to call. The number is also selectable for copying.")); - section.append(urgent); + urgent.className = "emergency-fallback"; + urgent.append(heading("emergency-call-heading", "Can't reach event help?")); + // Share first: the practical action (send your location + numbers to your + // group) belongs above the emergency-services number, which the procedures + // now frame as the fallback. const shareBtn = document.createElement("button"); shareBtn.className = "emergency-share-btn"; shareBtn.textContent = "Share emergency info"; @@ -153,7 +153,13 @@ export function createEmergencyView( alert("Copied to clipboard: " + textToShare.slice(0, 80) + "..."); } }; - section.append(shareBtn); + urgent.append(shareBtn); + + addService(urgent, "Emergency services", services.emergencyNumber, true); + urgent.append( + text("p", "Call only when event staff and first aid can't respond. Tap to call."), + ); + section.append(urgent); const contacts = document.createElement("section"); contacts.setAttribute("aria-labelledby", "emergency-services-heading");