From 36e7794db4c2def48d5cf762f7f3c22fa22f41b3 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 03:26:42 -0500
Subject: [PATCH] Match form styling to other modernized pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updates pay page forms to use the same styling patterns as messages,
PTO, and other modernized pages for consistency.

Changes:
- Remove local form control styles that override global styles
- Use global form styles from application.html.erb
- Add form-control-lg class to all inputs for larger size
- Add icons to all form labels (bank2, diagram-3, percent, key-fill)
- Use fw-semibold class on labels for bold appearance
- Add helper text below inputs with small.text-muted
- Change spacing from mb-3 to mb-4 for consistency
- Use btn-lg class for all buttons
- Keep only custom focus colors (green for add, yellow for decrypt)

Forms now match the polished appearance of other pages with:
- Properly rounded inputs (0.75rem from global styles)
- 2px borders with nice focus effects
- Larger, more comfortable controls
- Helpful icons and descriptions
- Consistent spacing and typography

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/pay/index.html.erb | 82 +++++++++++++-----------------------
 1 file changed, 30 insertions(+), 52 deletions(-)

diff --git a/app/views/pay/index.html.erb b/app/views/pay/index.html.erb
index 1a3e391..55ec624 100644
--- a/app/views/pay/index.html.erb
+++ b/app/views/pay/index.html.erb
@@ -48,34 +48,43 @@
         </div>
         <div class="card-body p-4">
           <%= form_tag "#", { class: "needs-validation", id: "bank_info_form" } do %>
-            <div class="mb-3">
-              <label class="form-label">Bank Account Number</label>
+            <div class="mb-4">
+              <label class="form-label fw-semibold">
+                <i class="bi bi-bank2 text-success me-2"></i>Bank Account Number
+              </label>
               <%= text_field_tag :bank_account_num, params[:bank_account_num], {
                 placeholder: "Enter account number",
-                class: "form-control"
+                class: "form-control form-control-lg"
               } %>
+              <small class="text-muted">Your bank account number</small>
             </div>
 
-            <div class="mb-3">
-              <label class="form-label">Bank Routing Number</label>
+            <div class="mb-4">
+              <label class="form-label fw-semibold">
+                <i class="bi bi-diagram-3 text-success me-2"></i>Bank Routing Number
+              </label>
               <%= text_field_tag :bank_routing_num, params[:bank_routing_num], {
                 placeholder: "9-digit routing number",
-                class: "form-control"
+                class: "form-control form-control-lg"
               } %>
+              <small class="text-muted">Usually found at the bottom of checks</small>
             </div>
 
-            <div class="mb-3">
-              <label class="form-label">Percentage of Deposit</label>
+            <div class="mb-4">
+              <label class="form-label fw-semibold">
+                <i class="bi bi-percent text-success me-2"></i>Percentage of Deposit
+              </label>
               <%= text_field_tag :dd_percent, params[:dd_percent], {
-                placeholder: "1-100",
-                class: "form-control"
+                placeholder: "e.g., 100",
+                class: "form-control form-control-lg"
               } %>
+              <small class="text-muted">What percentage to deposit (1-100)</small>
             </div>
 
-            <div class="d-grid mt-4">
+            <div class="d-grid">
               <%= submit_tag "Add Account", {
                 id: "dd_form_btn",
-                class: "btn btn-success"
+                class: "btn btn-success btn-lg"
               } %>
             </div>
           <% end %>
@@ -91,18 +100,21 @@
         </div>
         <div class="card-body p-4">
           <%= form_tag "#", { class: "needs-validation", id: "decrypt_form" } do %>
-            <div class="mb-3">
-              <label class="form-label">Encrypted Account Number</label>
+            <div class="mb-4">
+              <label class="form-label fw-semibold">
+                <i class="bi bi-key-fill text-warning me-2"></i>Encrypted Account Number
+              </label>
               <%= text_field_tag :value_to_decrypt, params[:value_to_decrypt], {
                 placeholder: "Paste encrypted value",
-                class: "form-control"
+                class: "form-control form-control-lg"
               } %>
+              <small class="text-muted">Copy from the table to the right</small>
             </div>
 
-            <div class="d-grid mt-4">
+            <div class="d-grid">
               <%= submit_tag "Decrypt", {
                 id: "decrypt_btn",
-                class: "btn btn-warning"
+                class: "btn btn-warning btn-lg"
               } %>
             </div>
           <% end %>
@@ -410,21 +422,7 @@ $(document).on('turbolinks:load', function() {
     background-color: rgba(230, 57, 70, 0.03);
   }
 
-  /* Clean, minimal form controls */
-  .form-control {
-    border-radius: 0.75rem;
-    border: 2px solid #e9ecef;
-    padding: 0.75rem 1rem;
-    font-size: 1rem;
-    transition: all 0.2s ease;
-  }
-
-  .form-control:focus {
-    border-color: var(--rg-primary);
-    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
-    outline: none;
-  }
-
+  /* Override focus colors for specific forms */
   #bank_info_form .form-control:focus {
     border-color: var(--rg-success);
     box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.1);
@@ -434,24 +432,4 @@ $(document).on('turbolinks:load', function() {
     border-color: var(--rg-warning);
     box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.1);
   }
-
-  .form-label {
-    font-weight: 500;
-    color: var(--rg-dark);
-    margin-bottom: 0.4rem;
-    font-size: 0.9rem;
-  }
-
-  /* Button styling */
-  .btn {
-    border-radius: 0.75rem;
-    font-weight: 600;
-    transition: all 0.2s ease;
-    padding: 0.75rem 1.5rem;
-  }
-
-  .btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-  }
 </style>