From b3892c1629a0b261679aa861755eef2603429027 Mon Sep 17 00:00:00 2001 From: Tudor Date: Mon, 23 Mar 2026 22:53:09 +0000 Subject: [PATCH] style(buttons): standardise button sizes across all components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- nextjs-app/components/ComparisonView.module.css | 11 ++++++----- nextjs-app/components/RankingsView.module.css | 9 +++++---- nextjs-app/components/SchoolCard.module.css | 8 ++++---- nextjs-app/components/SchoolDetailView.module.css | 2 +- nextjs-app/components/SchoolRow.module.css | 10 +++++----- nextjs-app/components/SchoolSearchModal.module.css | 2 +- 6 files changed, 22 insertions(+), 20 deletions(-) diff --git a/nextjs-app/components/ComparisonView.module.css b/nextjs-app/components/ComparisonView.module.css index 6c62b58..442638a 100644 --- a/nextjs-app/components/ComparisonView.module.css +++ b/nextjs-app/components/ComparisonView.module.css @@ -31,8 +31,8 @@ } .addButton { - padding: 0.75rem 1.5rem; - font-size: 0.9375rem; + padding: 0.625rem 1.25rem; + font-size: 0.9rem; font-weight: 600; background: var(--accent-coral, #e07256); color: white; @@ -370,12 +370,13 @@ display: inline-flex; align-items: center; gap: 0.375rem; - padding: 0.5rem 1rem; + padding: 0.625rem 1.25rem; background: var(--bg-secondary); border: 1px solid var(--border-color, #e0ddd8); - border-radius: var(--radius-md); + border-radius: 8px; color: var(--text-secondary); - font-size: 0.875rem; + font-size: 0.9rem; + font-weight: 600; cursor: pointer; transition: all var(--transition); } diff --git a/nextjs-app/components/RankingsView.module.css b/nextjs-app/components/RankingsView.module.css index 9b9744f..cc04399 100644 --- a/nextjs-app/components/RankingsView.module.css +++ b/nextjs-app/components/RankingsView.module.css @@ -271,7 +271,7 @@ font-size: 0.875rem; font-weight: 600; border: none; - border-radius: 8px; + border-radius: 6px; cursor: pointer; transition: all 0.2s ease; background: var(--accent-coral, #e07256); @@ -372,11 +372,12 @@ .viewButton { display: inline-block; - padding: 0.25rem 0.625rem; - font-size: 0.8rem; + padding: 0.5rem 1rem; + font-size: 0.875rem; + font-weight: 500; color: var(--text-secondary); border: 1px solid var(--border-color, #e0ddd8); - border-radius: var(--radius-sm, 4px); + border-radius: 6px; text-decoration: none; margin-right: 0.375rem; transition: all var(--transition, 0.2s ease); diff --git a/nextjs-app/components/SchoolCard.module.css b/nextjs-app/components/SchoolCard.module.css index 6941a54..5e6b969 100644 --- a/nextjs-app/components/SchoolCard.module.css +++ b/nextjs-app/components/SchoolCard.module.css @@ -148,8 +148,8 @@ .btnSecondary, .btnPrimary { flex: 1; - padding: 0.5rem 0.75rem; - font-size: 0.8125rem; + padding: 0.5rem 1rem; + font-size: 0.875rem; font-weight: 600; border-radius: 6px; border: none; @@ -190,8 +190,8 @@ .btnRemove { flex: 1; - padding: 0.5rem 0.75rem; - font-size: 0.8125rem; + padding: 0.5rem 1rem; + font-size: 0.875rem; font-weight: 600; border-radius: 6px; cursor: pointer; diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css index c3a17b0..1932f03 100644 --- a/nextjs-app/components/SchoolDetailView.module.css +++ b/nextjs-app/components/SchoolDetailView.module.css @@ -62,7 +62,7 @@ .btnAdd, .btnRemove { padding: 0.5rem 1rem; - font-size: 0.8125rem; + font-size: 0.875rem; font-weight: 600; border: none; border-radius: 6px; diff --git a/nextjs-app/components/SchoolRow.module.css b/nextjs-app/components/SchoolRow.module.css index b46f7c5..236a4f6 100644 --- a/nextjs-app/components/SchoolRow.module.css +++ b/nextjs-app/components/SchoolRow.module.css @@ -129,7 +129,7 @@ } .btnView { - padding: 0.4375rem 0.875rem; + padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary, #5c564d); @@ -147,7 +147,7 @@ } .btnCompare { - padding: 0.4375rem 0.875rem; + padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: white; @@ -164,7 +164,7 @@ } .btnRemove { - padding: 0.4375rem 0.875rem; + padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary, #5c564d); @@ -272,8 +272,8 @@ .btnView, .btnCompare, .btnRemove { - padding: 0.375rem 0.75rem; - font-size: 0.8125rem; + padding: 0.4375rem 0.875rem; + font-size: 0.875rem; } .rowProgress { diff --git a/nextjs-app/components/SchoolSearchModal.module.css b/nextjs-app/components/SchoolSearchModal.module.css index 837a350..e780dc8 100644 --- a/nextjs-app/components/SchoolSearchModal.module.css +++ b/nextjs-app/components/SchoolSearchModal.module.css @@ -140,7 +140,7 @@ .addButton { padding: 0.625rem 1.25rem; - font-size: 0.875rem; + font-size: 0.9rem; font-weight: 600; border: none; border-radius: 8px;