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 class="row g-3">
<div class="row g-4">
<!-- Left Column - Forms -->
<div class="col-lg-4">
<div class="col-lg-5">
<!-- Add Direct Deposit Form -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid var(--rg-success);">
<div class="card-header py-3" style="background: linear-gradient(135deg, rgba(6, 214, 160, 0.05), rgba(30, 130, 94, 0.05));">
<h4 class="mb-0">
<i class="bi bi-plus-circle text-success"></i> Add Direct Deposit
</h4>
<p class="text-muted mb-0 small mt-1">Set up a new account</p>
<div class="card shadow-sm mb-4">
<div class="card-header bg-white py-3">
<h5 class="mb-0">
<i class="bi bi-plus-circle text-success me-2"></i>Add Direct Deposit
</h5>
</div>
<div class="card-body p-4">
<%= form_tag "#", { class: "needs-validation", id: "bank_info_form" } do %>
<div class="mb-4">
<label class="form-label fw-semibold">
<i class="bi bi-hash text-success me-2"></i>Bank Account Number
</label>
<div class="input-group input-group-lg">
<%= 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 class="mb-3">
<label class="form-label">Bank Account Number</label>
<%= text_field_tag :bank_account_num, params[:bank_account_num], {
placeholder: "Enter account number",
class: "form-control"
} %>
</div>
<div class="mt-3 p-3 rounded" style="background: var(--rg-light); border-left: 3px solid var(--rg-success);">
<small class="text-muted">
<i class="bi bi-shield-lock-fill text-success me-1"></i>
<strong>Secure:</strong> All account information is encrypted
</small>
<div class="mb-3">
<label class="form-label">Bank Routing Number</label>
<%= text_field_tag :bank_routing_num, params[:bank_routing_num], {
placeholder: "9-digit routing number",
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>
<% end %>
</div>
</div>
<!-- Decrypt Form -->
<div class="card shadow-sm" style="border-left: 4px solid var(--rg-warning);">
<div class="card-header py-3" style="background: linear-gradient(135deg, rgba(255, 183, 3, 0.05), rgba(251, 133, 0, 0.05));">
<h4 class="mb-0">
<i class="bi bi-unlock text-warning"></i> Decrypt Account Number
</h4>
<p class="text-muted mb-0 small mt-1">View unencrypted account number</p>
<div class="card shadow-sm">
<div class="card-header bg-white py-3">
<h5 class="mb-0">
<i class="bi bi-unlock text-warning me-2"></i>Decrypt Account
</h5>
</div>
<div class="card-body p-4">
<%= form_tag "#", { class: "needs-validation", id: "decrypt_form" } do %>
<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>
<div class="input-group input-group-lg">
<%= 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 class="mb-3">
<label class="form-label">Encrypted Account Number</label>
<%= text_field_tag :value_to_decrypt, params[:value_to_decrypt], {
placeholder: "Paste encrypted value",
class: "form-control"
} %>
</div>
<div class="mt-3 p-3 rounded" style="background: var(--rg-light); border-left: 3px solid var(--rg-warning);">
<small class="text-muted">
<i class="bi bi-info-circle-fill text-warning me-1"></i>
Decryption is for your convenience and security verification
</small>
<div class="d-grid mt-4">
<%= submit_tag "Decrypt", {
id: "decrypt_btn",
class: "btn btn-warning"
} %>
</div>
<% end %>
</div>
@@ -157,18 +111,15 @@
</div>
<!-- Right Column - Accounts Table -->
<div class="col-lg-8">
<div class="col-lg-7">
<div class="card shadow-sm">
<div class="card-header bg-white py-3">
<div class="d-flex justify-content-between align-items-start">
<div>
<h4 class="mb-0">
<i class="bi bi-list-ul text-primary"></i> Direct Deposit Accounts
</h4>
<p class="text-muted mb-0 small mt-1">Your configured bank accounts</p>
</div>
<div class="d-flex justify-content-between align-items-center">
<h5 class="mb-0">
<i class="bi bi-list-ul text-primary me-2"></i>Your Accounts
</h5>
<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>
</div>
</div>
@@ -177,18 +128,10 @@
<table class="table table-hover mb-0" id="data_table">
<thead class="table-light">
<tr>
<th style="width: 35%;">
<i class="bi bi-shield-lock me-2"></i>Encrypted Account Number
</th>
<th style="width: 25%;">
<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>
<th>Account Number</th>
<th>Routing Number</th>
<th>Deposit %</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@@ -198,48 +141,6 @@
</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>
@@ -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);
}
</style>