From ff8e1d7a0d6cada146a232b86030d15197104c7a Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@users.noreply.github.com>
Date: Wed, 2 Sep 2026 16:51:01 -0400
Subject: [PATCH] Update styling on confirmation failed page

---
 src/pages/confirm-error.html | 53 ++++++++++++++++++++++++++++--------
 1 file changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/pages/confirm-error.html b/src/pages/confirm-error.html
index 240a99b..072f48a 100644
--- a/src/pages/confirm-error.html
+++ b/src/pages/confirm-error.html
@@ -1,34 +1,63 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Confirmation Failed</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Email Confirmation Failed</title>
     <style>
+      * { box-sizing: border-box; }
       body {
-        font-family: system-ui, sans-serif;
+        font-family: 'Inter', system-ui, -apple-system, sans-serif;
         display: flex;
         align-items: center;
         justify-content: center;
         min-height: 100vh;
         margin: 0;
-        background: #f5f5f5;
+        background: #f0f2f5;
+        color: #1e293b;
       }
       .container {
+        width: 100%;
+        max-width: 480px;
+        margin: 16px;
         text-align: center;
-        padding: 2rem;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        padding: 40px 32px;
+        background: #ffffff;
+        border-radius: 12px;
+        border: 1px solid #e2e8f0;
+      }
+      .logo { height: 40px; width: auto; margin: 0 auto 16px; display: block; }
+      .brand {
+        font-size: 24px;
+        font-weight: 700;
+        margin: 0 0 28px;
+        color: {{brandAccent}};
+      }
+      .title {
+        font-size: 20px;
+        font-weight: 700;
+        margin: 0 0 12px;
+        color: #dc2626;
       }
       .message {
-        margin-top: 1rem;
-        color: #e74c3c;
+        font-size: 15px;
+        line-height: 1.6;
+        color: #64748b;
+        margin: 0;
       }
+      .message a { color: {{brandAccent}}; text-decoration: none; font-weight: 600; }
     </style>
   </head>
   <body>
     <div class="container">
-      <h2>Confirmation Failed</h2>
-      <div class="message">{{message}}</div>
+      {{#brandLogo}}<img class="logo" src="{{brandLogo}}" alt="{{brandName}}" />{{/brandLogo}}
+      <div class="brand">{{brandName}}</div>
+      <h1 class="title">Email not confirmed</h1>
+      <p class="message">
+        {{message}}
+        <br /><br />
+        Visit <a href="{{settingsUrl}}">{{brandName}}</a> to try again or manage your subscription.
+      </p>
     </div>
   </body>
-</html>
+</html>
\ No newline at end of file