From 117203307d4bf6532389423431ec83b29c63bbe8 Mon Sep 17 00:00:00 2001 From: Ken Johnson Date: Sun, 7 Dec 2025 03:22:15 -0500 Subject: [PATCH] Simplify and declutter pay page design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/views/pay/index.html.erb | 331 +++++++++-------------------------- 1 file changed, 81 insertions(+), 250 deletions(-) diff --git a/app/views/pay/index.html.erb b/app/views/pay/index.html.erb index 08e1f29..4048164 100644 --- a/app/views/pay/index.html.erb +++ b/app/views/pay/index.html.erb @@ -36,120 +36,74 @@ -
+
-
+
-
-
-

- Add Direct Deposit -

-

Set up a new account

+
+
+
+ Add Direct Deposit +
<%= form_tag "#", { class: "needs-validation", id: "bank_info_form" } do %> -
- -
- <%= text_field_tag :bank_account_num, params[:bank_account_num], { - placeholder: "Enter account number", - class: "form-control" - } %> - - - -
- Your bank account number -
- -
- -
- <%= text_field_tag :bank_routing_num, params[:bank_routing_num], { - placeholder: "Enter routing number", - class: "form-control" - } %> - - - -
- 9-digit routing number -
- -
- -
- <%= text_field_tag :dd_percent, params[:dd_percent], { - placeholder: "e.g., 100", - class: "form-control" - } %> - % -
- What percentage to deposit (1-100) -
- -
- <%= submit_tag "Add Account", { - id: "dd_form_btn", - class: "btn btn-success btn-lg" +
+ + <%= text_field_tag :bank_account_num, params[:bank_account_num], { + placeholder: "Enter account number", + class: "form-control" } %>
-
- - - Secure: All account information is encrypted - +
+ + <%= text_field_tag :bank_routing_num, params[:bank_routing_num], { + placeholder: "9-digit routing number", + class: "form-control" + } %> +
+ +
+ + <%= text_field_tag :dd_percent, params[:dd_percent], { + placeholder: "1-100", + class: "form-control" + } %> +
+ +
+ <%= submit_tag "Add Account", { + id: "dd_form_btn", + class: "btn btn-success" + } %>
<% end %>
-
-
-

- Decrypt Account Number -

-

View unencrypted account number

+
+
+
+ Decrypt Account +
<%= form_tag "#", { class: "needs-validation", id: "decrypt_form" } do %> -
- -
- <%= text_field_tag :value_to_decrypt, params[:value_to_decrypt], { - placeholder: "Paste encrypted value", - class: "form-control" - } %> - - - -
- Copy from the table on the right -
- -
- <%= submit_tag "Decrypt", { - id: "decrypt_btn", - class: "btn btn-warning btn-lg" +
+ + <%= text_field_tag :value_to_decrypt, params[:value_to_decrypt], { + placeholder: "Paste encrypted value", + class: "form-control" } %>
-
- - - Decryption is for your convenience and security verification - +
+ <%= submit_tag "Decrypt", { + id: "decrypt_btn", + class: "btn btn-warning" + } %>
<% end %>
@@ -157,18 +111,15 @@
-
+
-
-
-

- Direct Deposit Accounts -

-

Your configured bank accounts

-
+
+
+ Your Accounts +
@@ -177,18 +128,10 @@ - - - - + + + + @@ -198,48 +141,6 @@ - - -
-
-
-
-
- Instant Access -
-

- Your paycheck is deposited directly into your account on payday. -

-
-
-
- -
-
-
-
- Secure & Encrypted -
-

- All banking information is encrypted using industry-standard security. -

-
-
-
- -
-
-
-
- Split Deposits -
-

- Allocate different percentages of your pay to multiple accounts. -

-
-
-
-
@@ -509,117 +410,47 @@ $(document).on('turbolinks:load', function() { 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; + /* Clean, minimal form controls */ + .form-control { + border-radius: 0.5rem; + border: 1px solid #dee2e6; + padding: 0.625rem 0.875rem; + font-size: 0.95rem; 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); + .form-control:focus { + border-color: var(--rg-primary); + box-shadow: 0 0 0 3px rgba(230, 57, 70, 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; - padding: 0.75rem 1rem; - display: flex; - align-items: center; - justify-content: center; - min-width: 50px; - } - - .input-group-lg .input-group-text { - padding: 0.875rem 1.25rem; - font-size: 1.1rem; - } - - .input-group-text i { - font-size: 1rem; - line-height: 1; - } - - .input-group .form-control { - border-radius: 0.75rem 0 0 0.75rem !important; - border-right: none; - } - - .input-group:focus-within .input-group-text { + #bank_info_form .form-control:focus { border-color: var(--rg-success); - background: linear-gradient(135deg, rgba(6, 214, 160, 0.05), rgba(30, 130, 94, 0.05)); + box-shadow: 0 0 0 3px rgba(6, 214, 160, 0.1); } - .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); + box-shadow: 0 0 0 3px rgba(255, 183, 3, 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)); + .form-label { + font-weight: 500; + color: var(--rg-dark); + margin-bottom: 0.4rem; + font-size: 0.9rem; } - #decrypt_form .input-group:focus-within .form-control { - border-color: var(--rg-warning); - } - - /* Modern buttons - already handled by global styles but ensure consistency */ + /* Button styling */ .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); + border-radius: 0.5rem; + font-weight: 500; + transition: all 0.2s ease; } .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; + transform: translateY(-1px); + box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
- Encrypted Account Number - - Routing Number - - Deposit % - - Actions - Account NumberRouting NumberDeposit %Actions