From 63f74e8486110ffd482ce410476ebc587358819b Mon Sep 17 00:00:00 2001 From: justin Date: Wed, 29 Apr 2026 01:22:25 -0500 Subject: [PATCH] Style officer suggestions as clickable cards with arrow hint Co-Authored-By: Claude Opus 4.6 (1M context) --- .../components/intake/steps/OfficerStep.astro | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/site/src/components/intake/steps/OfficerStep.astro b/site/src/components/intake/steps/OfficerStep.astro index 48f5ae2..9203796 100644 --- a/site/src/components/intake/steps/OfficerStep.astro +++ b/site/src/components/intake/steps/OfficerStep.astro @@ -91,10 +91,22 @@ .pw-row > * { flex: 1 1 140px; } .pw-suggestions { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 0.75rem; margin-bottom: 1rem; } .pw-suggest-label { font-size: 0.82rem; color: #1e40af; font-weight: 600; margin: 0 0 0.5rem; } - .pw-suggest-btn { display: block; width: 100%; text-align: left; padding: 0.5rem 0.75rem; margin: 0.25rem 0; border: 1px solid #dbeafe; background: #fff; border-radius: 6px; cursor: pointer; font-size: 0.85rem; color: #1f2937; transition: all 0.1s; } - .pw-suggest-btn:hover { border-color: #3b82f6; background: #f0f4ff; } - .pw-suggest-btn .sg-name { font-weight: 600; } - .pw-suggest-btn .sg-detail { font-size: 0.78rem; color: #6b7280; } + .pw-suggest-btn { + display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; + padding: 0.6rem 0.85rem; margin: 0.3rem 0; + border: 2px solid #93c5fd; background: #fff; border-radius: 8px; + cursor: pointer; font-size: 0.85rem; color: #1f2937; + transition: all 0.15s; position: relative; + } + .pw-suggest-btn::after { + content: "Click to use \2192"; position: absolute; right: 12px; top: 50%; + transform: translateY(-50%); font-size: 0.72rem; font-weight: 600; + color: #3b82f6; opacity: 0.7; + } + .pw-suggest-btn:hover { border-color: #3b82f6; background: #eff6ff; box-shadow: 0 2px 8px rgba(59,130,246,0.15); } + .pw-suggest-btn:hover::after { opacity: 1; } + .pw-suggest-btn .sg-name { font-weight: 700; color: #1e3a5f; font-size: 0.9rem; } + .pw-suggest-btn .sg-detail { font-size: 0.78rem; color: #6b7280; display: block; padding-right: 5rem; } .pw-err { color: #b91c1c; margin-top: 0.75rem; font-size: 0.9rem; }