From 5aa6d1e75665418097791387d207add9bb4cf3c7 Mon Sep 17 00:00:00 2001 From: "russell@unturf.com" Date: Fri, 15 May 2026 14:26:21 -0400 Subject: [PATCH] =?UTF-8?q?style:=20shop=20settings=20=E2=80=94=20promote?= =?UTF-8?q?=20every=20section=20to=20a=20content-card?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The settings page was visibly butting disparate sections together (dim-gray .well + .well, no real margin between them) because each section was wrapped in section.shop-settings.well, which only ever got the legacy .well treatment (surface-dim, padding 10px) — none of the elevation/border/rhythm of the design-system content-card. This is a CSS-only upgrade: section.shop-settings.well now gets the same chrome as .content-card (surface-base, --border-light, elevation -1, --radius-lg, --space-5 padding, --space-5 margin-bottom). The 18 shop-settings sections in shop_settings.j2 pick this up with zero markup churn. The legacy

intra-section spacers stay (harmless block whitespace inside the card). Dark mode override added (--surface-container / --border-default). .mps-submit gets a top margin so the Save Settings button isn't glued to the last field. Styleguide entry under #wells documents the pattern so future setting forms (or refactors) stay consistent. 57 tests in the shop_settings/styleguide slice still green. --- make_post_sell/static/css/common.css | 38 ++++++++++++++++++++++++++ make_post_sell/templates/styleguide.j2 | 22 +++++++++++++++ 2 files changed, 60 insertions(+) diff --git a/make_post_sell/static/css/common.css b/make_post_sell/static/css/common.css index d9e5111..aaca168 100644 --- a/make_post_sell/static/css/common.css +++ b/make_post_sell/static/css/common.css @@ -2178,6 +2178,44 @@ div.edit-page > section.edit-card-full { } .settings-form-actions .mps-submit { grid-column: 2; } +/* Shop settings page — every section is wrapped in +
. Promote that combo to the + design-system content-card treatment (surface-base, light border, + elevation-1, generous padding) so the page reads as a stack of + clearly-separated cards instead of dim-gray slabs touching each + other. The legacy .well rule still sets surface-dim — we override + it back to surface-base + a real shadow. Grid only — no flex. */ +.shop-settings.well, +.shop-settings { + background-color: var(--surface-base, #FFFFFF); + border-radius: var(--radius-lg, 12px); + border: 1px solid var(--border-light, #eeeeee); + box-shadow: var(--elevation-1); + padding: var(--space-5, 20px); + margin-bottom: var(--space-5, 20px); +} +[data-theme="dark"] .shop-settings.well, +[data-theme="dark"] .shop-settings { + background-color: var(--surface-container, #161b22); + border-color: var(--border-default, #30363d); +} +.shop-settings > h3 { + margin: 0 0 var(--space-3, 12px) 0; +} +/* Pin the Save Settings button to the right of its section like every + other primary action surface in the app. The submit input is + typically followed by a couple of
spacers — those collapse to + harmless whitespace in a block context. */ +.shop-settings .mps-submit { + display: inline-block; + margin-top: var(--space-3, 12px); +} +/* Tighten the legacy

rhythm a touch so settings forms don't + feel airy between every field. Visual delta only — markup untouched. */ +.shop-settings br + br { + line-height: 0.6; +} + /* Public user profile (profile.j2). Grid only. */ .profile-page { display: grid; gap: var(--space-4, 16px); } .profile-card-header { diff --git a/make_post_sell/templates/styleguide.j2 b/make_post_sell/templates/styleguide.j2 index 57a1f53..0380e9b 100644 --- a/make_post_sell/templates/styleguide.j2 +++ b/make_post_sell/templates/styleguide.j2 @@ -766,6 +766,28 @@ Grid only — no flex. .content-card-meta — small muted meta line (dates, hints) Dark mode: surface-container + border-default override (auto). + +
+
Shop settings section card (shop_settings.j2)
+
+

Subscription Settings

+

Allow visitors to subscribe to email digests of new products and content.

+ +

+ +
+
section.shop-settings.well + — same chrome as .content-card (surface-base, border-light, + elevation-1, radius-lg) but addressed by the existing + class combo so every shop-settings section on the + Settings page picks it up with no markup change. + — margin-bottom: var(--space-5) gives consistent gaps + between sections (the <br><br> tags between sections + in the markup are visual whitespace, harmless). + — > h3 reset to 0 top margin, var(--space-3) bottom. + — .mps-submit gets margin-top var(--space-3) so it + sits below the last field with breathing room.
+