forgejo_admin/basketball-api
1
0
Fork 1
Code Issues 88 Pull requests 9 Projects Releases Packages Wiki Activity Actions

Refine MJML email templates to match westside-landing visual language #303

New issue
Closed
opened 2026-04-03 20:46:27 +00:00 by forgejo_admin · 0 comments
forgejo_admin commented 2026-04-03 20:46:27 +00:00
Owner
Copy link

Type

Feature

Lineage

Discovered during contract reminder email test (2026-04-03). MJML templates use correct hex values but miss the visual personality of the landing site.

Repo

forgejo_admin/basketball-api

User Story

As a parent,
I want emails that look like they come from the same brand as the website,
So that communications feel professional and cohesive.

Context

The MJML email templates (action, notification, announcement) use the correct brand colors (#d42026, #0a0a0a, #141414) but don't carry over the design language from ~/west-side-basketball/css/style.css. The landing site has sharp visual elements that make it feel like a sports brand. The emails feel like generic dark-theme templates.

Reference: ~/west-side-basketball/css/style.css — the canonical source of Westside visual identity.

What needs to change in templates/email/brand.mjml and the three layouts:

  1. Red left-border on content sections — landing uses .card { border-left: 3px solid #d42026 }. Apply to the main body section in all layouts using border-left="3px solid #d42026" on <mj-section> or <mj-column>.

  2. Headline red underline accent — landing uses h2::after { width: 60px; height: 3px; background: #d42026 }. Add a small <mj-divider> (60px wide, 3px, red) after the headline text in all layouts.

  3. Tighter button styling — landing uses border-radius: 4px, font-weight: 800, text-transform: uppercase, letter-spacing: 0.05em, compact padding. The MJML button defaults are rounder and more padded. Update <mj-button> in brand.mjml to: border-radius="4px" (already set), border="2px solid transparent", tighter inner-padding="12px 28px".

  4. Footer red top-border — landing uses .site-footer { border-top: 2px solid #d42026 }. Add red divider before footer section in all layouts.

  5. Headline typography — landing headings use font-weight: 800, text-transform: uppercase, letter-spacing: -0.02em. Apply to headline <mj-text> in all layouts.

File Targets

Files to modify:

  • templates/email/includes/brand.mjml — update <mj-button> attributes, add section defaults
  • templates/email/action.mjml — add left-border, headline underline, footer border
  • templates/email/notification.mjml — same pattern
  • templates/email/announcement.mjml — same pattern

Files NOT to touch:

  • templates/email/jersey-reminder.mjml — has its own specific design, don't break it
  • src/ — no Python changes

Acceptance Criteria

  • Content sections have 3px red left-border
  • Headlines have a 60px red underline accent below them
  • Footer has red top-border (2px)
  • Button matches landing: 4px radius, uppercase, tight padding
  • Headlines are uppercase with weight 800 and tight letter-spacing
  • Compiled HTML still table-based, no flexbox/grid
  • All {{key}} placeholders survive compilation
  • Existing tests still pass

Test Expectations

  • npm run build:email compiles without errors
  • Existing compiled template tests pass (placeholders, brand colors, table layout)
  • Run: pytest tests/test_jersey_reminder.py -v

Constraints

  • MJML only — no raw HTML hacks
  • Email clients don't support CSS border-left on <td> reliably. Use a narrow <mj-column> with red background as a visual left-border (common MJML pattern)
  • Keep mobile-first — left-border column should be narrow (4px) and not stack

Checklist

  • PR opened
  • Tests pass
  • No unrelated changes
  • Docker build succeeds

Related

  • arch-email — email architecture
  • project-westside-basketball — parent project
  • PR #296 — original MJML system (this refines it)
### Type Feature ### Lineage Discovered during contract reminder email test (2026-04-03). MJML templates use correct hex values but miss the visual personality of the landing site. ### Repo `forgejo_admin/basketball-api` ### User Story As a parent, I want emails that look like they come from the same brand as the website, So that communications feel professional and cohesive. ### Context The MJML email templates (action, notification, announcement) use the correct brand colors (#d42026, #0a0a0a, #141414) but don't carry over the design language from `~/west-side-basketball/css/style.css`. The landing site has sharp visual elements that make it feel like a sports brand. The emails feel like generic dark-theme templates. Reference: `~/west-side-basketball/css/style.css` — the canonical source of Westside visual identity. ### What needs to change in `templates/email/brand.mjml` and the three layouts: 1. **Red left-border on content sections** — landing uses `.card { border-left: 3px solid #d42026 }`. Apply to the main body section in all layouts using `border-left="3px solid #d42026"` on `<mj-section>` or `<mj-column>`. 2. **Headline red underline accent** — landing uses `h2::after { width: 60px; height: 3px; background: #d42026 }`. Add a small `<mj-divider>` (60px wide, 3px, red) after the headline text in all layouts. 3. **Tighter button styling** — landing uses `border-radius: 4px`, `font-weight: 800`, `text-transform: uppercase`, `letter-spacing: 0.05em`, compact padding. The MJML button defaults are rounder and more padded. Update `<mj-button>` in brand.mjml to: `border-radius="4px"` (already set), `border="2px solid transparent"`, tighter `inner-padding="12px 28px"`. 4. **Footer red top-border** — landing uses `.site-footer { border-top: 2px solid #d42026 }`. Add red divider before footer section in all layouts. 5. **Headline typography** — landing headings use `font-weight: 800`, `text-transform: uppercase`, `letter-spacing: -0.02em`. Apply to headline `<mj-text>` in all layouts. ### File Targets Files to modify: - `templates/email/includes/brand.mjml` — update `<mj-button>` attributes, add section defaults - `templates/email/action.mjml` — add left-border, headline underline, footer border - `templates/email/notification.mjml` — same pattern - `templates/email/announcement.mjml` — same pattern Files NOT to touch: - `templates/email/jersey-reminder.mjml` — has its own specific design, don't break it - `src/` — no Python changes ### Acceptance Criteria - [ ] Content sections have 3px red left-border - [ ] Headlines have a 60px red underline accent below them - [ ] Footer has red top-border (2px) - [ ] Button matches landing: 4px radius, uppercase, tight padding - [ ] Headlines are uppercase with weight 800 and tight letter-spacing - [ ] Compiled HTML still table-based, no flexbox/grid - [ ] All {{key}} placeholders survive compilation - [ ] Existing tests still pass ### Test Expectations - [ ] `npm run build:email` compiles without errors - [ ] Existing compiled template tests pass (placeholders, brand colors, table layout) - Run: `pytest tests/test_jersey_reminder.py -v` ### Constraints - MJML only — no raw HTML hacks - Email clients don't support CSS border-left on `<td>` reliably. Use a narrow `<mj-column>` with red background as a visual left-border (common MJML pattern) - Keep mobile-first — left-border column should be narrow (4px) and not stack ### Checklist - [ ] PR opened - [ ] Tests pass - [ ] No unrelated changes - [ ] Docker build succeeds ### Related - `arch-email` — email architecture - `project-westside-basketball` — parent project - PR #296 — original MJML system (this refines it)
forgejo_admin 2026-04-03 20:56:23 +00:00
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
510-grant-tournament-tables-to-ro-role
458-skip-proration-v2
458-skip-proration
466-cherry-pick-first-payment
458-merge-first-payment-blast
369-first-payment-email-blast
408-player-nickname
313-local-first-week-email
320-mjml-sponsor-outreach-template
270-contract-reminder-email
205-clean-test-data-from-production-db-playe
114-email-verification
147-feat-add-get-jersey-player-info-endpoint
124-feat-many-to-many-player-team-assignment
125-feat-add-new-players-manually-seydou-gou
126-feat-team-placement-congratulations-emai
121-admin-teams-spa-endpoints
70-add-graduating-class-to-roster-api-respo
59-fix-auth-test
62-phase-4l-sveltekit-dashboard-wkq-tailsca
11-phase-1a-fix-ci-pipeline-venv-in-test-st
No results found.
Labels
Clear labels   
domain:backend

   
domain:devops

   
domain:frontend

   
status:approved

QA passed, awaiting merge approval

  
status:in-progress

Dev agent is actively working

  
status:needs-fix

QA found issues, back to dev

  
status:qa

PR submitted, awaiting QA review

  
type:bug

Bug fix

  
type:devops

Infrastructure/CI/config work

  
type:feature

New functionality

No labels
domain:backend
domain:devops
domain:frontend
status:approved
status:in-progress
status:needs-fix
status:qa
type:bug
type:devops
type:feature
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
forgejo_admin/basketball-api#303
No description provided.