From 9a0782e61feaa58c9cf639ab61030c90af4c5a68 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Tue, 12 May 2026 08:14:57 -0400
Subject: [PATCH] verification-challenge: center on login-card, add 'try again'
 link to login page

---
 .../templates/verification-challenge.j2       | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/make_post_sell/templates/verification-challenge.j2 b/make_post_sell/templates/verification-challenge.j2
index 99f6980..e1be5ad 100644
--- a/make_post_sell/templates/verification-challenge.j2
+++ b/make_post_sell/templates/verification-challenge.j2
@@ -1,27 +1,35 @@
 {% extends "base.j2" -%}
 {% block content -%}
 <section class="one-column">
-  <section class="log-in-form well">
-    <h2>Verification Code</h2>
-    <b>Please enter code to log in.</b>
-    <br>
-    <br>
-    <form method="post" action="/verification-challenge">
+  <section class="login-card elevation-3 animate-fade-in-up">
+
+    <h2 class="type-headline-3 login-card-title">Verification Code</h2>
+    <p class="type-body login-card-subtitle">Enter the 6 digit code we emailed you to log in.</p>
+
+    <form method="post" action="/verification-challenge" class="login-form">
+
+      <label for="raw-otp" class="type-label login-form-label">Verification code</label>
       <input
           name        = "raw-otp"
           type        = "number"
           id          = "raw-otp"
-          class       = "common-text-input"
+          class       = "login-form-input"
           tabindex    = "1"
           value       = "{% if raw_otp %}{{ raw_otp }}{% endif %}"
-          placeholder = "6 digit challenge verification code"
+          placeholder = "6 digit code"
           required
           autofocus />
-      <br/>
-      <br/>
-      <input type="submit" name="submit" id="submit" value="Verify Code" />
+
+      <button type="submit" name="submit" id="submit" class="mps-button mps-button-green login-form-submit">
+        Verify code
+      </button>
+
     </form>
-    <br/>
+
+    <div class="login-card-hint">
+      <span class="type-body-sm"><strong>Didn't get a code?</strong> Check your spam folder, or <a href="/join-or-log-in">try again</a> with a different email address.</span>
+    </div>
+
   </section>
 </section>
 {%- endblock -%}