team-alpha/railsgoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify and declutter pay page design

Browse Source 
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>
This commit is contained in:
Ken Johnson
2025-12-07 03:22:15 -05:00
parent 5b56203b33
commit 117203307d
1 changed files with 81 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/pay/index.html.erb
+81 -250
View File
@@ -36,120 +36,74 @@
</div> </div>
</div> </div>
<div class="row g-3"> <div class="row g-4">
<!-- Left Column - Forms --> <!-- Left Column - Forms -->
<div class="col-lg-4"> <div class="col-lg-5">
<!-- Add Direct Deposit Form --> <!-- Add Direct Deposit Form -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid var(--rg-success);"> <div class="card shadow-sm mb-4">
<div class="card-header py-3" style="background: linear-gradient(135deg, rgba(6, 214, 160, 0.05), rgba(30, 130, 94, 0.05));"> <div class="card-header bg-white py-3">
<h4 class="mb-0"> <h5 class="mb-0">
<i class="bi bi-plus-circle text-success"></i> Add Direct Deposit <i class="bi bi-plus-circle text-success me-2"></i>Add Direct Deposit
</h4> </h5>
<p class="text-muted mb-0 small mt-1">Set up a new account</p>
</div> </div>
<div class="card-body p-4"> <div class="card-body p-4">
<%= form_tag "#", { class: "needs-validation", id: "bank_info_form" } do %> <%= form_tag "#", { class: "needs-validation", id: "bank_info_form" } do %>
<div class="mb-4"> <div class="mb-3">
<label class="form-label fw-semibold"> <label class="form-label">Bank Account Number</label>
<i class="bi bi-hash text-success me-2"></i>Bank Account Number <%= text_field_tag :bank_account_num, params[:bank_account_num], {
</label> placeholder: "Enter account number",
<div class="input-group input-group-lg"> class: "form-control"
<%= text_field_tag :bank_account_num, params[:bank_account_num], {
placeholder: "Enter account number",
class: "form-control"
} %>
<span class="input-group-text bg-white">
<i class="bi bi-bank2"></i>
</span>
</div>
<small class="text-muted">Your bank account number</small>
</div>
<div class="mb-4">
<label class="form-label fw-semibold">
<i class="bi bi-sign-turn-right text-success me-2"></i>Bank Routing Number
</label>
<div class="input-group input-group-lg">
<%= text_field_tag :bank_routing_num, params[:bank_routing_num], {
placeholder: "Enter routing number",
class: "form-control"
} %>
<span class="input-group-text bg-white">
<i class="bi bi-diagram-3"></i>
</span>
</div>
<small class="text-muted">9-digit routing number</small>
</div>
<div class="mb-4">
<label class="form-label fw-semibold">
<i class="bi bi-percent text-success me-2"></i>Percentage of Deposit
</label>
<div class="input-group input-group-lg">
<%= text_field_tag :dd_percent, params[:dd_percent], {
placeholder: "e.g., 100",
class: "form-control"
} %>
<span class="input-group-text bg-white">%</span>
</div>
<small class="text-muted">What percentage to deposit (1-100)</small>
</div>
<div class="d-grid">
<%= submit_tag "Add Account", {
id: "dd_form_btn",
class: "btn btn-success btn-lg"
} %> } %>
</div> </div>
<div class="mt-3 p-3 rounded" style="background: var(--rg-light); border-left: 3px solid var(--rg-success);"> <div class="mb-3">
<small class="text-muted"> <label class="form-label">Bank Routing Number</label>
<i class="bi bi-shield-lock-fill text-success me-1"></i> <%= text_field_tag :bank_routing_num, params[:bank_routing_num], {
<strong>Secure:</strong> All account information is encrypted placeholder: "9-digit routing number",
</small> class: "form-control"
} %>
</div>
<div class="mb-3">
<label class="form-label">Percentage of Deposit</label>
<%= text_field_tag :dd_percent, params[:dd_percent], {
placeholder: "1-100",
class: "form-control"
} %>
</div>
<div class="d-grid mt-4">
<%= submit_tag "Add Account", {
id: "dd_form_btn",
class: "btn btn-success"
} %>
</div> </div>
<% end %> <% end %>
</div> </div>
</div> </div>
<!-- Decrypt Form --> <!-- Decrypt Form -->
<div class="card shadow-sm" style="border-left: 4px solid var(--rg-warning);"> <div class="card shadow-sm">
<div class="card-header py-3" style="background: linear-gradient(135deg, rgba(255, 183, 3, 0.05), rgba(251, 133, 0, 0.05));"> <div class="card-header bg-white py-3">
<h4 class="mb-0"> <h5 class="mb-0">
<i class="bi bi-unlock text-warning"></i> Decrypt Account Number <i class="bi bi-unlock text-warning me-2"></i>Decrypt Account
</h4> </h5>
<p class="text-muted mb-0 small mt-1">View unencrypted account number</p>
</div> </div>
<div class="card-body p-4"> <div class="card-body p-4">
<%= form_tag "#", { class: "needs-validation", id: "decrypt_form" } do %> <%= form_tag "#", { class: "needs-validation", id: "decrypt_form" } do %>
<div class="mb-4"> <div class="mb-3">
<label class="form-label fw-semibold"> <label class="form-label">Encrypted Account Number</label>
<i class="bi bi-key-fill text-warning me-2"></i>Encrypted Account Number <%= text_field_tag :value_to_decrypt, params[:value_to_decrypt], {
</label> placeholder: "Paste encrypted value",
<div class="input-group input-group-lg"> class: "form-control"
<%= text_field_tag :value_to_decrypt, params[:value_to_decrypt], {
placeholder: "Paste encrypted value",
class: "form-control"
} %>
<span class="input-group-text bg-white">
<i class="bi bi-lock"></i>
</span>
</div>
<small class="text-muted">Copy from the table on the right</small>
</div>
<div class="d-grid">
<%= submit_tag "Decrypt", {
id: "decrypt_btn",
class: "btn btn-warning btn-lg"
} %> } %>
</div> </div>
<div class="mt-3 p-3 rounded" style="background: var(--rg-light); border-left: 3px solid var(--rg-warning);"> <div class="d-grid mt-4">
<small class="text-muted"> <%= submit_tag "Decrypt", {
<i class="bi bi-info-circle-fill text-warning me-1"></i> id: "decrypt_btn",
Decryption is for your convenience and security verification class: "btn btn-warning"
</small> } %>
</div> </div>
<% end %> <% end %>
</div> </div>
@@ -157,18 +111,15 @@
</div> </div>
<!-- Right Column - Accounts Table --> <!-- Right Column - Accounts Table -->
<div class="col-lg-8"> <div class="col-lg-7">
<div class="card shadow-sm"> <div class="card shadow-sm">
<div class="card-header bg-white py-3"> <div class="card-header bg-white py-3">
<div class="d-flex justify-content-between align-items-start"> <div class="d-flex justify-content-between align-items-center">
<div> <h5 class="mb-0">
<h4 class="mb-0"> <i class="bi bi-list-ul text-primary me-2"></i>Your Accounts
<i class="bi bi-list-ul text-primary"></i> Direct Deposit Accounts </h5>
</h4>
<p class="text-muted mb-0 small mt-1">Your configured bank accounts</p>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary" id="encrypted_acct_question"> <button type="button" class="btn btn-sm btn-outline-secondary" id="encrypted_acct_question">
<i class="bi bi-question-circle"></i> Why Encrypted? <i class="bi bi-question-circle me-1"></i> Why Encrypted?
</button> </button>
</div> </div>
</div> </div>
@@ -177,18 +128,10 @@
<table class="table table-hover mb-0" id="data_table"> <table class="table table-hover mb-0" id="data_table">
<thead class="table-light"> <thead class="table-light">
<tr> <tr>
<th style="width: 35%;"> <th>Account Number</th>
<i class="bi bi-shield-lock me-2"></i>Encrypted Account Number <th>Routing Number</th>
</th> <th>Deposit %</th>
<th style="width: 25%;"> <th>Actions</th>
<i class="bi bi-diagram-3 me-2"></i>Routing Number
</th>
<th style="width: 20%;">
<i class="bi bi-percent me-2"></i>Deposit %
</th>
<th style="width: 20%;">
<i class="bi bi-gear me-2"></i>Actions
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -198,48 +141,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Info Cards -->
<div class="row mt-3 g-3">
<div class="col-md-4">
<div class="card shadow-sm h-100" style="border-left: 3px solid #579da9;">
<div class="card-body">
<h6 class="card-title">
<i class="bi bi-lightning-charge-fill text-primary"></i> Instant Access
</h6>
<p class="card-text small text-muted">
Your paycheck is deposited directly into your account on payday.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm h-100" style="border-left: 3px solid #1e825e;">
<div class="card-body">
<h6 class="card-title">
<i class="bi bi-shield-check text-success"></i> Secure & Encrypted
</h6>
<p class="card-text small text-muted">
All banking information is encrypted using industry-standard security.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card shadow-sm h-100" style="border-left: 3px solid var(--rg-warning);">
<div class="card-body">
<h6 class="card-title">
<i class="bi bi-piggy-bank text-warning"></i> Split Deposits
</h6>
<p class="card-text small text-muted">
Allocate different percentages of your pay to multiple accounts.
</p>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -509,117 +410,47 @@ $(document).on('turbolinks:load', function() {
background-color: rgba(230, 57, 70, 0.03); background-color: rgba(230, 57, 70, 0.03);
} }
/* Modern form controls - sleek and rounded */ /* Clean, minimal form controls */
.form-control, .form-control {
.form-select { border-radius: 0.5rem;
border-radius: 0.75rem !important; border: 1px solid #dee2e6;
border: 2px solid #e9ecef; padding: 0.625rem 0.875rem;
padding: 0.75rem 1rem; font-size: 0.95rem;
font-size: 1rem;
transition: all 0.2s ease; transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
} }
.form-control:focus, .form-control:focus {
.form-select:focus { border-color: var(--rg-primary);
border-color: var(--rg-success); box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.1);
box-shadow: 0 0 0 4px rgba(6, 214, 160, 0.15), 0 2px 8px rgba(0,0,0,0.1);
outline: none; outline: none;
} }
.input-group-lg .form-control { #bank_info_form .form-control:focus {
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 {
border-color: var(--rg-success); 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 { #decrypt_form .form-control:focus {
border-color: var(--rg-warning); 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 { .form-label {
border-color: var(--rg-warning); font-weight: 500;
background: linear-gradient(135deg, rgba(255, 183, 3, 0.05), rgba(251, 133, 0, 0.05)); color: var(--rg-dark);
margin-bottom: 0.4rem;
font-size: 0.9rem;
} }
#decrypt_form .input-group:focus-within .form-control { /* Button styling */
border-color: var(--rg-warning);
}
/* Modern buttons - already handled by global styles but ensure consistency */
.btn { .btn {
border-radius: 0.75rem; border-radius: 0.5rem;
padding: 0.75rem 1.5rem; font-weight: 500;
font-weight: 600; transition: all 0.2s ease;
transition: all 0.3s ease;
border: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
} }
.btn:hover { .btn:hover {
transform: translateY(-2px); transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-shadow: 0 2px 8px 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> </style>