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>
Makes form controls more rounded and polished instead of rectangular:
Form control updates:
- Increase border-radius from 0.5rem to 0.75rem for softer curves
- Increase border from 1px to 2px for better definition
- Adjust padding to 0.75rem 1rem for comfortable spacing
- Set font-size to 1rem for better readability
Button updates:
- Match border-radius at 0.75rem for consistency
- Increase font-weight to 600 for emphasis
- Add explicit padding (0.75rem 1.5rem)
- Stronger hover lift effect (translateY -2px)
- Enhanced shadow on hover (0 4px 12px)
Inputs and buttons now have modern, rounded appearance matching
the design system used throughout the application.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Removes visual clutter and simplifies the interface for better usability:
Layout simplification:
- Change column split from 4/8 to 5/7 for better balance
- Remove gradient backgrounds from card headers
- Use simple white headers with clean icons
- Increase spacing between sections (g-4 gap)
- Remove info cards at bottom to reduce page length
Form simplification:
- Remove input group icons and addons
- Use clean standalone inputs without decorations
- Remove helper text under each field (info in placeholder)
- Reduce button sizes from btn-lg to standard
- Remove decorative tip boxes
- Simpler labels without icons
- Reduce vertical spacing (mb-3 instead of mb-4)
Table simplification:
- Remove icons from table headers
- Cleaner header text ("Your Accounts" vs "Direct Deposit Accounts")
- Remove subtitle text from headers
Input styling:
- Smaller, cleaner inputs (0.5rem radius, 1px border)
- Smaller padding (0.625rem vs 0.875rem)
- Smaller font size (0.95rem)
- Subtle focus rings (3px glow)
- Color-coded focus: green for add, yellow for decrypt
- Removed complex gradients and shadows
The page now has a clean, uncluttered appearance with better
visual hierarchy and easier-to-scan content.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Resolves icon height mismatch with form inputs.
Changes:
- Add explicit padding to input-group-text matching form-control
- Use flexbox (display: flex, align-items: center) for vertical centering
- Match padding for input-group-lg contexts (0.875rem 1.25rem)
- Set icon font-size to 1rem and line-height: 1 to prevent overflow
- Add min-width: 50px for consistent icon container size
Icons now align perfectly with input heights for a polished appearance.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
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>
Resolves "Cannot set properties of undefined (setting '_DT_CellIndex')"
error by modernizing DataTables API usage and handling Turbolinks properly.
Changes:
- Update to modern DataTables API (capital D DataTable() vs lowercase)
- Add check for existing DataTable before initialization
- Properly destroy and recreate DataTable on Turbolinks page loads
- Replace deprecated fnClearTable() with table.clear()
- Replace deprecated fnAddData() with table.row.add() + table.draw()
- Create unified initializePage() function for both ready and turbolinks:load
- Add autoWidth, searching, and ordering options to DataTable config
The DataTable now initializes cleanly without errors and handles
Turbolinks navigation properly.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Complete redesign of the pay/direct deposit management page:
Layout improvements:
- Two-column responsive layout (forms left, table right)
- Forms column (4/12):
* Add Direct Deposit form with green theme and gradient header
* Decrypt Account form with yellow/warning theme
* Both cards have left border accents
- Table column (8/12):
* DataTable showing existing accounts
* "Why Encrypted?" button in header
* Three info cards below explaining benefits
Form enhancements:
- All form controls upgraded to large size with icons
- Input groups with trailing icons (bank, routing, lock, percent)
- Helper text below each field for guidance
- Full-width submit buttons in themed colors
- Tip boxes with security/convenience info
- Auto-clear forms after successful submission
Table improvements:
- Modern Bootstrap 5 table with hover effects
- Icons in column headers (lock, diagram, percent, gear)
- Enhanced data display:
* Account numbers in monospace code blocks
* Routing numbers in light badges
* Deposit percentages in green success badges
* Delete buttons styled as outline-danger with trash icon
- Custom DataTables pagination styling matching theme
- Empty state message for no accounts
JavaScript enhancements:
- Replace basic alerts with modern Bootstrap-styled overlays
- Decrypted account number shows in floating alert with unlock icon
- "Why Encrypted?" shows modal-like dialog with close button
- Delete confirmation improved
- Turbolinks compatibility
- Form reset after success
Info cards:
- Instant Access (blue) - explain direct deposit timing
- Secure & Encrypted (green) - highlight security features
- Split Deposits (yellow) - describe multi-account feature
The page now provides a banking-grade interface for managing
direct deposit with clear visual hierarchy and modern UX.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The javascript file name in app/views/pay/index.html.erb
'jquery.dataTables.js' is not consistent with the actual
JS file in /app/assets/javascripts 'jquery.dataTables.min.js'
This commit fixes by renaming the erring line in index.html.erb
Ken Johnson