style(buttons): standardise button sizes across all components
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 32s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m4s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s

Define two button tiers and apply consistently:
- sm (inline pairs): padding 0.5rem 1rem, font-size 0.875rem, radius 6px
- md (standalone CTAs): padding 0.625rem 1.25rem, font-size 0.9rem, radius 8px

RankingsView: viewButton was 0.25rem/0.8rem/4px vs addButton 0.5rem/0.875rem/8px
— biggest mismatch, both now sm with same radius.
SchoolCard: horizontal padding 0.75rem → 1rem, font-size 0.8125rem → 0.875rem.
SchoolRow: padding 0.4375rem → 0.5rem to match sm exactly.
SchoolDetailView: font-size 0.8125rem → 0.875rem.
ComparisonView/Modal: addButton and shareButton aligned to md spec.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-23 22:53:09 +00:00
parent 65e3d8460d
commit b3892c1629
6 changed files with 22 additions and 20 deletions

View File

@@ -31,8 +31,8 @@
} }
.addButton { .addButton {
padding: 0.75rem 1.5rem; padding: 0.625rem 1.25rem;
font-size: 0.9375rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
background: var(--accent-coral, #e07256); background: var(--accent-coral, #e07256);
color: white; color: white;
@@ -370,12 +370,13 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.375rem;
padding: 0.5rem 1rem; padding: 0.625rem 1.25rem;
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-color, #e0ddd8); border: 1px solid var(--border-color, #e0ddd8);
border-radius: var(--radius-md); border-radius: 8px;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.875rem; font-size: 0.9rem;
font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all var(--transition); transition: all var(--transition);
} }

View File

@@ -271,7 +271,7 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
border: none; border: none;
border-radius: 8px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
background: var(--accent-coral, #e07256); background: var(--accent-coral, #e07256);
@@ -372,11 +372,12 @@
.viewButton { .viewButton {
display: inline-block; display: inline-block;
padding: 0.25rem 0.625rem; padding: 0.5rem 1rem;
font-size: 0.8rem; font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary); color: var(--text-secondary);
border: 1px solid var(--border-color, #e0ddd8); border: 1px solid var(--border-color, #e0ddd8);
border-radius: var(--radius-sm, 4px); border-radius: 6px;
text-decoration: none; text-decoration: none;
margin-right: 0.375rem; margin-right: 0.375rem;
transition: all var(--transition, 0.2s ease); transition: all var(--transition, 0.2s ease);

View File

@@ -148,8 +148,8 @@
.btnSecondary, .btnSecondary,
.btnPrimary { .btnPrimary {
flex: 1; flex: 1;
padding: 0.5rem 0.75rem; padding: 0.5rem 1rem;
font-size: 0.8125rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
border-radius: 6px; border-radius: 6px;
border: none; border: none;
@@ -190,8 +190,8 @@
.btnRemove { .btnRemove {
flex: 1; flex: 1;
padding: 0.5rem 0.75rem; padding: 0.5rem 1rem;
font-size: 0.8125rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;

View File

@@ -62,7 +62,7 @@
.btnAdd, .btnAdd,
.btnRemove { .btnRemove {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-size: 0.8125rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
border: none; border: none;
border-radius: 6px; border-radius: 6px;

View File

@@ -129,7 +129,7 @@
} }
.btnView { .btnView {
padding: 0.4375rem 0.875rem; padding: 0.5rem 1rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: var(--text-secondary, #5c564d); color: var(--text-secondary, #5c564d);
@@ -147,7 +147,7 @@
} }
.btnCompare { .btnCompare {
padding: 0.4375rem 0.875rem; padding: 0.5rem 1rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
color: white; color: white;
@@ -164,7 +164,7 @@
} }
.btnRemove { .btnRemove {
padding: 0.4375rem 0.875rem; padding: 0.5rem 1rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: var(--text-secondary, #5c564d); color: var(--text-secondary, #5c564d);
@@ -272,8 +272,8 @@
.btnView, .btnView,
.btnCompare, .btnCompare,
.btnRemove { .btnRemove {
padding: 0.375rem 0.75rem; padding: 0.4375rem 0.875rem;
font-size: 0.8125rem; font-size: 0.875rem;
} }
.rowProgress { .rowProgress {

View File

@@ -140,7 +140,7 @@
.addButton { .addButton {
padding: 0.625rem 1.25rem; padding: 0.625rem 1.25rem;
font-size: 0.875rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
border: none; border: none;
border-radius: 8px; border-radius: 8px;