From dc7866b0f97c0e9a7cca39b23f25a73bd9513985 Mon Sep 17 00:00:00 2001
From: Ken Johnson <cktricky@gmail.com>
Date: Sun, 7 Dec 2025 03:18:33 -0500
Subject: [PATCH] Add modern rounded styling to form inputs on pay page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Transforms blocky form controls into sleek, modern inputs:

Form control improvements:
- Rounded corners (0.75rem) for all inputs and buttons
- 2px borders with light gray color (#e9ecef)
- Subtle shadows for depth (0 1px 3px rgba)
- Smooth transitions on all interactions (0.2s ease)
- Larger padding for better touch targets

Focus state enhancements:
- Add Direct Deposit form: green glow on focus with 4px shadow ring
- Decrypt form: yellow/warning glow on focus with themed shadow
- Input group icons change gradient on focus
- Entire input group highlights together (border color sync)
- Remove harsh outline, replace with soft shadow

Button refinements:
- More rounded corners (0.75rem)
- Lift effect on hover (translateY -2px)
- Enhanced shadows that grow on hover
- Smooth press animation on active state
- Bold font weight (600)

Input group styling:
- Gradient backgrounds on addon icons
- Seamless connection between input and icon
- Icons highlight with themed gradient on focus
- Smooth border radius flow from input to addon

The forms now have a polished, modern appearance matching
contemporary web applications with smooth, delightful interactions.

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

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

diff --git a/app/views/pay/index.html.erb b/app/views/pay/index.html.erb
index a281a79..cb05e51 100644
--- a/app/views/pay/index.html.erb
+++ b/app/views/pay/index.html.erb
@@ -508,4 +508,103 @@ $(document).on('turbolinks:load', function() {
   #data_table tbody tr:hover {
     background-color: rgba(230, 57, 70, 0.03);
   }
+
+  /* Modern form controls - sleek and rounded */
+  .form-control,
+  .form-select {
+    border-radius: 0.75rem !important;
+    border: 2px solid #e9ecef;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+  }
+
+  .form-control:focus,
+  .form-select:focus {
+    border-color: var(--rg-success);
+    box-shadow: 0 0 0 4px rgba(6, 214, 160, 0.15), 0 2px 8px rgba(0,0,0,0.1);
+    outline: none;
+  }
+
+  .input-group-lg .form-control {
+    padding: 0.875rem 1.25rem;
+    font-size: 1.1rem;
+  }
+
+  .input-group-text {
+    border-radius: 0 0.75rem 0.75rem 0 !important;
+    border: 2px solid #e9ecef;
+    border-left: none;
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    transition: all 0.2s ease;
+  }
+
+  .input-group .form-control {
+    border-radius: 0.75rem 0 0 0.75rem !important;
+    border-right: none;
+  }
+
+  .input-group:focus-within .input-group-text {
+    border-color: var(--rg-success);
+    background: linear-gradient(135deg, rgba(6, 214, 160, 0.05), rgba(30, 130, 94, 0.05));
+  }
+
+  .input-group:focus-within .form-control {
+    border-color: var(--rg-success);
+  }
+
+  /* Decrypt form focus - use warning color */
+  #decrypt_form .form-control:focus {
+    border-color: var(--rg-warning);
+    box-shadow: 0 0 0 4px rgba(255, 183, 3, 0.15), 0 2px 8px rgba(0,0,0,0.1);
+  }
+
+  #decrypt_form .input-group:focus-within .input-group-text {
+    border-color: var(--rg-warning);
+    background: linear-gradient(135deg, rgba(255, 183, 3, 0.05), rgba(251, 133, 0, 0.05));
+  }
+
+  #decrypt_form .input-group:focus-within .form-control {
+    border-color: var(--rg-warning);
+  }
+
+  /* Modern buttons - already handled by global styles but ensure consistency */
+  .btn {
+    border-radius: 0.75rem;
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    border: none;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+  }
+
+  .btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  }
+
+  .btn:active {
+    transform: translateY(0);
+  }
+
+  .btn-lg {
+    padding: 0.875rem 1.75rem;
+    font-size: 1.1rem;
+  }
+
+  /* Label styling */
+  .form-label {
+    font-weight: 600;
+    color: var(--rg-dark);
+    margin-bottom: 0.5rem;
+  }
+
+  /* Small helper text */
+  small.text-muted {
+    font-size: 0.875rem;
+    color: #6c757d;
+    display: block;
+    margin-top: 0.375rem;
+  }
 </style>