justin/new-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

increase font sizes in photo ID section for readability (min 14px)

Browse source
This commit is contained in:
justin 2026-05-30 18:15:22 -05:00
parent e0fc4810d1
commit e2c7cc582b
1 changed files with 17 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

34
site/src/components/intake/steps/DOTIntakeStep.astro
View file

@ -208,7 +208,7 @@
<div id="dot-sec-photo-id" hidden> <div id="dot-sec-photo-id" hidden>
<h3>Government-Issued Photo ID</h3> <h3>Government-Issued Photo ID</h3>
<p class="pw-field-help">FMCSA requires a copy of your government-issued photo ID (driver's license, passport, or state ID) to verify the signer's identity.</p> <p class="pw-field-help">FMCSA requires a copy of your government-issued photo ID (driver's license, passport, or state ID) to verify the signer's identity.</p>
<div style="background:#fefce8;border:1px solid #fbbf24;border-radius:8px;padding:12px 14px;margin-bottom:12px;font-size:13px;color:#854d0e;line-height:1.6"> <div style="background:#fefce8;border:1px solid #fbbf24;border-radius:8px;padding:14px 16px;margin-bottom:14px;font-size:15px;color:#854d0e;line-height:1.7">
<strong>How to add your ID:</strong><br> <strong>How to add your ID:</strong><br>
&#8226; <strong>On your phone?</strong> Tap the button below and take a picture of the front of your ID<br> &#8226; <strong>On your phone?</strong> Tap the button below and take a picture of the front of your ID<br>
&#8226; <strong>On a computer?</strong> Take a photo of your ID with your phone, email or text it to yourself, save it, then click the button below to upload it<br> &#8226; <strong>On a computer?</strong> Take a photo of your ID with your phone, email or text it to yourself, save it, then click the button below to upload it<br>
@ -220,40 +220,40 @@
<div id="dot-id-preview" hidden> <div id="dot-id-preview" hidden>
<div style="text-align:center;margin-bottom:12px"> <div style="text-align:center;margin-bottom:12px">
<img id="dot-id-img" style="max-width:320px;max-height:240px;border-radius:8px;border:2px solid #d1d5db;display:block;margin:0 auto" /> <img id="dot-id-img" style="max-width:320px;max-height:240px;border-radius:8px;border:2px solid #d1d5db;display:block;margin:0 auto" />
<p id="dot-id-resolution" style="font-size:11px;color:#94a3b8;margin:6px 0 0"></p> <p id="dot-id-resolution" style="font-size:14px;color:#94a3b8;margin:6px 0 0"></p>
</div> </div>
<div id="dot-id-quality-check" style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:14px;margin-bottom:12px"> <div id="dot-id-quality-check" style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:14px;margin-bottom:12px">
<p style="font-size:13px;font-weight:600;color:#1a2744;margin:0 0 10px">Photo ID Quality Check</p> <p style="font-size:16px;font-weight:600;color:#1a2744;margin:0 0 10px">Photo ID Quality Check</p>
<div id="dot-id-checks" style="font-size:12px;color:#374151;line-height:2"></div> <div id="dot-id-checks" style="font-size:14px;color:#374151;line-height:2"></div>
<div id="dot-id-quality-warn" hidden style="background:#fef3c7;border:1px solid #fbbf24;border-radius:6px;padding:10px;margin-top:10px"> <div id="dot-id-quality-warn" hidden style="background:#fef3c7;border:1px solid #fbbf24;border-radius:6px;padding:10px;margin-top:10px">
<p style="font-size:12px;color:#92400e;margin:0;font-weight:600">&#9888; Image quality issue detected</p> <p style="font-size:15px;color:#92400e;margin:0;font-weight:600">&#9888; Image quality issue detected</p>
<p id="dot-id-quality-msg" style="font-size:11px;color:#92400e;margin:4px 0 0"></p> <p id="dot-id-quality-msg" style="font-size:14px;color:#92400e;margin:4px 0 0"></p>
</div> </div>
<div id="dot-id-quality-ok" hidden style="background:#f0fdf4;border:1px solid #86efac;border-radius:6px;padding:10px;margin-top:10px"> <div id="dot-id-quality-ok" hidden style="background:#f0fdf4;border:1px solid #86efac;border-radius:6px;padding:10px;margin-top:10px">
<p style="font-size:12px;color:#166534;margin:0">&#10004; Image looks good — clear and properly sized for submission.</p> <p style="font-size:15px;color:#166534;margin:0">&#10004; Image looks good — clear and properly sized for submission.</p>
</div> </div>
</div> </div>
<div style="display:flex;gap:8px;justify-content:center"> <div style="display:flex;gap:8px;justify-content:center">
<button type="button" id="dot-id-accept" style="padding:8px 24px;background:#059669;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer">Accept &amp; Continue</button> <button type="button" id="dot-id-accept" style="padding:10px 28px;background:#059669;color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer">Accept &amp; Continue</button>
<button type="button" id="dot-id-retake" style="padding:8px 24px;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:6px;font-size:13px;cursor:pointer">Retake / Re-upload</button> <button type="button" id="dot-id-retake" style="padding:10px 28px;background:#fff;color:#374151;border:1px solid #d1d5db;border-radius:6px;font-size:15px;cursor:pointer">Retake / Re-upload</button>
</div> </div>
</div> </div>
<div id="dot-id-upload-options"> <div id="dot-id-upload-options">
<button type="button" id="dot-id-btn" style="display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 24px;background:#f97316;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:15px;font-weight:600;box-shadow:0 2px 8px rgba(249,115,22,0.3)"> <button type="button" id="dot-id-btn" style="display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:18px 24px;background:#f97316;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:17px;font-weight:600;box-shadow:0 2px 8px rgba(249,115,22,0.3)">
<svg style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"/></svg> <svg style="width:24px;height:24px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"/></svg>
Add Photo of Your ID Add Photo of Your ID
</button> </button>
<p style="font-size:11px;color:#94a3b8;text-align:center;margin:8px 0 0">Accepted formats: JPEG, PNG, PDF, TIFF &middot; Max 15MB</p> <p style="font-size:14px;color:#64748b;text-align:center;margin:10px 0 0">Accepted formats: JPEG, PNG, PDF, TIFF &middot; Max 15MB</p>
<!-- QR code for phone upload — hidden on mobile phones --> <!-- QR code for phone upload — hidden on mobile phones -->
<div id="dot-id-qr-section" style="margin-top:16px;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;text-align:center"> <div id="dot-id-qr-section" style="margin-top:16px;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;text-align:center">
<div style="display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:8px"> <div style="display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:8px">
<div style="flex:1;height:1px;background:#d1d5db"></div> <div style="flex:1;height:1px;background:#d1d5db"></div>
<span style="font-size:12px;color:#64748b;font-weight:500">or use your phone</span> <span style="font-size:15px;color:#64748b;font-weight:500">or use your phone</span>
<div style="flex:1;height:1px;background:#d1d5db"></div> <div style="flex:1;height:1px;background:#d1d5db"></div>
</div> </div>
<img id="dot-id-qr-img" style="width:160px;height:160px;margin:0 auto;display:block;border-radius:4px" alt="Loading QR code..." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Crect fill='%23f1f5f9' width='160' height='160'/%3E%3Ctext x='80' y='85' text-anchor='middle' fill='%2394a3b8' font-size='12'%3ELoading...%3C/text%3E%3C/svg%3E" /> <img id="dot-id-qr-img" style="width:160px;height:160px;margin:0 auto;display:block;border-radius:4px" alt="Loading QR code..." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Crect fill='%23f1f5f9' width='160' height='160'/%3E%3Ctext x='80' y='85' text-anchor='middle' fill='%2394a3b8' font-size='12'%3ELoading...%3C/text%3E%3C/svg%3E" />
<p style="font-size:12px;color:#475569;margin:8px 0 0;font-weight:500">Scan with your phone camera to take a photo of your ID</p> <p style="font-size:15px;color:#475569;margin:8px 0 0;font-weight:500">Scan with your phone camera to take a photo of your ID</p>
<p style="font-size:11px;color:#94a3b8;margin:4px 0 0">The form will stay open on your computer while you snap the picture on your phone</p> <p style="font-size:14px;color:#64748b;margin:6px 0 0">The form will stay open on your computer while you snap the picture on your phone</p>
</div> </div>
<script is:inline> <script is:inline>
// Immediate QR code generation — runs right where the element is // Immediate QR code generation — runs right where the element is
@ -290,7 +290,7 @@
</div> </div>
<div class="pw-security-notice" style="margin-top:8px"> <div class="pw-security-notice" style="margin-top:8px">
<svg style="width:14px;height:14px;flex-shrink:0;margin-top:2px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg> <svg style="width:14px;height:14px;flex-shrink:0;margin-top:2px" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
<span style="font-size:11px">Your ID is encrypted in transit and at rest. Used only for FMCSA identity verification and automatically deleted after filing.</span> <span style="font-size:14px">Your ID is encrypted in transit and at rest. Used only for FMCSA identity verification and automatically deleted after filing.</span>
</div> </div>
</div> </div>
</div> </div>
@ -311,10 +311,10 @@
.pw-field em { color: #dc2626; font-style: normal; } .pw-field em { color: #dc2626; font-style: normal; }
.pw-field input, .pw-field select { padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; } .pw-field input, .pw-field select { padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; }
.pw-field input:focus, .pw-field select:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,0.2); } .pw-field input:focus, .pw-field select:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,0.2); }
.pw-field-help { font-size: 0.8rem; color: #64748b; margin: 0 0 0.5rem; } .pw-field-help { font-size: 0.9rem; color: #64748b; margin: 0 0 0.5rem; }
.pw-cargo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.3rem 1rem; font-size: 0.85rem; color: #374151; } .pw-cargo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.3rem 1rem; font-size: 0.85rem; color: #374151; }
.pw-cargo-grid label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; } .pw-cargo-grid label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.pw-security-notice { display: flex; gap: 8px; align-items: flex-start; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; margin-bottom: 1rem; font-size: 12px; color: #1e40af; line-height: 1.5; } .pw-security-notice { display: flex; gap: 8px; align-items: flex-start; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 12px 14px; margin-bottom: 1rem; font-size: 14px; color: #1e40af; line-height: 1.5; }
.pw-upload-area { border: 2px dashed #d1d5db; border-radius: 8px; padding: 1rem; text-align: center; } .pw-upload-area { border: 2px dashed #d1d5db; border-radius: 8px; padding: 1rem; text-align: center; }
.pw-err { color: #b91c1c; margin-top: 0.75rem; font-size: 0.9rem; background: #fee2e2; padding: 0.5rem 0.75rem; border-radius: 6px; } .pw-err { color: #b91c1c; margin-top: 0.75rem; font-size: 0.9rem; background: #fee2e2; padding: 0.5rem 0.75rem; border-radius: 6px; }
@media (max-width: 640px) { .pw-row-2, .pw-row-3 { grid-template-columns: 1fr; } .pw-cargo-grid { grid-template-columns: 1fr 1fr; } #dot-id-qr-section { display: none !important; } } @media (max-width: 640px) { .pw-row-2, .pw-row-3 { grid-template-columns: 1fr; } .pw-cargo-grid { grid-template-columns: 1fr 1fr; } #dot-id-qr-section { display: none !important; } }