style: enhance bank details design and add third bank

Made-with: Cursor

src/email/email.css

@@ -216,20 +216,52 @@ body {
 }
 
 .bank-details {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
   font-size: 11px;
-  background: #111827;
+  background: #020617;
-  color: #f9fafb;
+  color: #e5e7eb;
-  border-radius: 10px;
+  border-radius: 12px;
-  padding: 10px 12px;
+  padding: 10px 12px 12px;
   margin-top: 10px;
+  border: 1px solid rgba(148, 163, 184, 0.4);
+}
+
+.bank-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.bank-header-label {
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 10px;
+  color: #9ca3af;
+}
+
+.bank-header-tag {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  border: 1px solid rgba(148, 163, 184, 0.7);
 }
 
 .bank-row + .bank-row {
   margin-top: 8px;
 }
 
+.bank-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+}
+
+.bank-row span {
+  white-space: nowrap;
+}
+
 .pill {
   display: inline-block;
   padding: 3px 9px;

src/email/sampleData.ts

@@ -81,6 +81,12 @@ export const templates = [
           accountNumber: '0043920091',
           reference: 'YH-RICKY-UNIT-12',
         },
+        {
+          bank: 'Central Real Estate Bank',
+          accountName: 'Yaltopia Home Estates',
+          accountNumber: '5500340093',
+          reference: 'CENTRAL-RICKY-UNIT-12',
+        },
       ],
       paymentOptionsUrl: 'https://yaltopia.home/payments',
     },

src/email/templates.tsx

@@ -227,12 +227,18 @@ export function BillPaymentReminderEmail(props: BillReminderEmailProps) {
       </div>
       {bankDetails && bankDetails.length > 0 && (
         <div className="bank-details">
+          <div className="bank-header">
+            <span className="bank-header-label">Approved bank accounts</span>
+            <span className="bank-header-tag">
+              {bankDetails.length} options
+            </span>
+          </div>
           {bankDetails.map((bank) => (
             <div key={`${bank.bank}-${bank.accountNumber}`} className="bank-row">
-              <div>{bank.bank}</div>
+              <span>{bank.bank}</span>
-              <div>{bank.accountName}</div>
+              <span>{bank.accountName}</span>
-              <div>Acct: {bank.accountNumber}</div>
+              <span>Acct: {bank.accountNumber}</span>
-              <div>Ref: {bank.reference}</div>
+              <span>Ref: {bank.reference}</span>
             </div>
           ))}
         </div>