Skip to content

Email Style Tweaks #1839

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 18, 2025
Merged

Email Style Tweaks #1839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2203160
fix(email): Fixing styles in notification email header + bills sectio…
Mephistic Jun 17, 2025
c0090b8
fix(email): Update email styling based on user feedback - minor adjus…
Mephistic Jun 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion functions/src/email/digestEmail.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<html>
<head>
<title>Digest Email</title>
<link rel="stylesheet" type="text/css" href="https://mapletestimony.org/email/style.css" />
</head>

<body style="background: white; width: 600px; min-height: 80vh; font-family: 'Nunito';
Expand Down
1 change: 1 addition & 0 deletions functions/src/email/handlebarsHelpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export const registerHelpers = () => {
handlebars.registerHelper("minusFour", helpers.minusFour)
handlebars.registerHelper("noUpdatesFormat", helpers.noUpdatesFormat)
handlebars.registerHelper("toLowerCase", helpers.toLowerCase)
handlebars.registerHelper("pluralize", helpers.pluralize)
}

// Register all Handlebars partials
Expand Down
11 changes: 11 additions & 0 deletions functions/src/email/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { BillDigest } from "../notifications/emailTypes"

export function addCounts() {
let sum = 0
for (let i = 0; i < arguments.length - 1; i++) {
Expand Down Expand Up @@ -56,3 +58,12 @@ export function toLowerCase(aString: unknown) {
console.error(`toLowerCase received a non-string value: ${aString}`)
return undefined
}

// TODO: This will be replaced by I18n logic when we implement it for emails
export function pluralize(bill: BillDigest): string {
if (bill.endorseCount + bill.neutralCount + bill.opposeCount === 1) {
return "Testimony"
} else {
return "Testimonies"
}
}
52 changes: 27 additions & 25 deletions functions/src/email/partials/bills/bill.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,35 @@
<article id="bill">
<div style="font-weight: 500; font-size: 22px; line-height: 125%;
text-decoration-line: underline; color: #000000; margin-bottom: 24px">
{{this.billId}}
<div style="font-weight: 500; font-size: 20px; line-height: 125%;
text-decoration-line: underline; color: #000000; margin-bottom: 4px">
<a href="https://mapletestimony.org/bills/{{this.billCourt}}/{{this.billId}}" target="_blank" rel="noopener noreferrer" style="color: inherit">{{this.billId}}</a>
</div>
<div style="font-weight: 600; font-size: 12px; line-height: 125%;
<div style="font-weight: 600; font-size: 16px; line-height: 125%;
color: #000000; letter-spacing: 0.03em; margin-bottom: 24px">
{{this.billName}}
</div>
<div style="padding: 12px 0px 12px 36px; background: #EAE7E7;
border-radius: 12px; margin-bottom: 36px;">
<div>
<div style="height: 49px; font-weight: 500; font-size: 39px; line-height: 125%;
letter-spacing: -0.015em; color: #000000; margin: auto; text-align: center">
{{addCounts this.endorseCount this.neutralCount this.opposeCount}}
<a href="https://mapletestimony.org/bills/{{this.billCourt}}/{{this.billId}}" target="_blank" rel="noopener noreferrer" style="text-decoration: none; color: inherit">
<div style="padding: 12px 0px 12px 12px; background: #EAE7E7;
border-radius: 12px; margin-bottom: 12px; text-align: center">
<div>
<div style="height: 49px; font-weight: 500; font-size: 39px; line-height: 125%;
letter-spacing: -0.015em; color: #000000; margin: auto; text-align: center">
{{addCounts this.endorseCount this.neutralCount this.opposeCount}}
</div>
</div>
<div style="height: 20px; font-weight: 700; font-size: 16px; line-height: 125%;
letter-spacing: 0.015em; color: #3E3E3E; margin: auto; text-align: center">
New {{pluralize this}}
</div>
<div style="height: 19px; font-weight: 700; font-size: 14px; line-height: 100%;
color: #000000; margin: auto; padding: 16px 0px 26px 0px;
text-align: center">
<img src="https://mapletestimony.org/email/images_no-svgs/endorse.png" alt="checkmark" style="padding-right: 18px"/>
{{this.endorseCount}} Endorse
<img src="https://mapletestimony.org/email/images_no-svgs/neutral.png" alt="dash" style="padding: 0 18px"/>
{{this.neutralCount}} Neutral
<img src="https://mapletestimony.org/email/images_no-svgs/oppose.png" alt="x-mark" style="padding: 0 18px"/>
{{this.opposeCount}} Oppose
</div>
</div>
<div style="height: 20px; font-weight: 700; font-size: 16px; line-height: 125%;
letter-spacing: 0.015em; color: #3E3E3E; margin: auto; text-align: center">
New Testimonies
</div>
<div style="height: 19px; font-weight: 700; font-size: 14px; line-height: 100%;
color: #000000; margin: auto; padding: 16px 0px 26px 0px;
text-align: center">
<img src="https://mapletestimony.org/email/images_no-svgs/endorse.png" alt="checkmark" style="padding-right: 18px"/>
{{this.endorseCount}} Endorse
<img src="https://mapletestimony.org/email/images_no-svgs/neutral.png" alt="dash" style="padding: 0 18px"/>
{{this.neutralCount}} Neutral
<img src="https://mapletestimony.org/email/images_no-svgs/oppose.png" alt="x-mark" style="padding: 0 18px"/>
{{this.opposeCount}} Oppose
</div>
</div>
</a>
</article>
4 changes: 2 additions & 2 deletions functions/src/email/partials/bills/bills.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
</div>
<div>
{{#ifGreaterThan numBillsWithNewTestimony 4}}
<div style="padding: 12px 0px 12px 36px; background: #EAE7E7;
<div style="padding: 12px 0px 12px 12px; background: #EAE7E7;
border-radius: 12px; margin-bottom: 36px;">
<div style="font-weight: 700; font-size: 14px; line-height: 125%; letter-spacing: 3%; margin-top: 5px">
<div style="font-weight: 700; font-size: 14px; line-height: 125%; letter-spacing: 3%; margin-top: 5px; text-align: center">
{{#ifGreaterThan numBillsWithNewTestimony 5}}
{{minusFour numBillsWithNewTestimony}} other bills you follow received testimony since your last update
{{else}}
Expand Down
8 changes: 4 additions & 4 deletions functions/src/email/partials/header.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="logo" style="background-color: #1a3185; padding: 16px 20px 16px 50px">
<div id="logo" style="background-color: #1a3185; padding: 16px 20px 16px 50px; text-align: center;">
<img src="https://mapletestimony.org/email/images_no-svgs/Logo.png" alt="Maple Logo" />
</div>

Expand All @@ -11,12 +11,12 @@
report
</h2>
<h2 style="font-weight: 700; font-size: 31px; line-height: 125%; margin: auto; width: 80%; color: #1a3185">
of the Bills and Users you follow!
of the bills and users you follow!
</h2>
<p class="subheadline blue center" style="font-weight: 600; font-size: 12px; line-height: 125%;
<p class="subheadline blue center" style="font-weight: 600; font-size: 16px; line-height: 125%;
color: #1a3185; display: block; margin: auto; width: 30%">
{{formatDate startDate}} - {{formatDate endDate}}
</p>
</div>
<img src="https://mapletestimony.org/email/images_no-svgs/Mail Report.png" alt="Report" style="display: block; margin: auto; width: 32%" />
<img src="https://mapletestimony.org/email/images_no-svgs/Mail Report.png" alt="Report" style="display: block; margin: auto; width: 16%" />
</header>
2 changes: 1 addition & 1 deletion functions/src/email/partials/noUpdates.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div style="padding-top: 12px; padding-bottom: 20px; display: block; margin: auto; width: 65%">
<div style="padding-top: 12px; padding-bottom: 20px; display: block; margin: auto; width: 65%; text-align: center;">
<img src="https://mapletestimony.org/email/images_no-svgs/empty-mail.png" alt="Empty Mail" />
</div>
<h5 style="font-weight: 600; font-size: 25px; line-height: 125%; margin-bottom: 0px;
Expand Down
36 changes: 26 additions & 10 deletions functions/src/email/partials/users/user.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,24 @@
<div style="font-weight: 500; font-size: 22px; line-height: 125%; color: #000000;
margin-right: auto"
>
{{this.userName}}
<a href="https://mapletestimony.org/profile?id={{this.userId}}" target="_blank" rel="noopener noreferrer" style="color: inherit">{{this.userName}}</a>
</div>
<div style="margin-right: auto;">
<div style="margin-right: 24px; display: inline-block">
<div style="width: 37px; height: 76px; font-weight: 600; font-size: 61px;
line-height: 125%; letter-spacing: -0.03em; color: #1A3185;
line-height: 125%; letter-spacing: -0.03em; color: #000000;
margin-left: auto; margin-right: auto;"
>
{{this.newTestimonyCount}}
</div>
<div style="font-weight: 700; font-size: 16px; line-height: 125%; letter-spacing: 0.015em;
color: #000000; width: 135px"
>
New Testimonies
{{#ifGreaterThan this.newTestimonyCount 1}}
New Testimonies
{{else}}
New Testimony
{{/ifGreaterThan}}
</div>
</div>
<table style="display: inline-block; margin: 0; padding: 0">
Expand All @@ -31,7 +35,9 @@
{{#if this.bills.0.billId}}
<td style="width: 75px">
<div style="text-decoration-line: underline; display: inline-block; margin-right: 15px">
{{this.bills.0.billId}}
<a href="https://mapletestimony.org/bills/{{this.bills.0.court}}/{{this.bills.0.billId}}" target="_blank" rel="noopener noreferrer" style="color: inherit">
{{this.bills.0.billId}}
</a>
</div>
</td>
<td style="width: 75px">
Expand All @@ -46,7 +52,9 @@
{{#if this.bills.1.billId}}
<td style="width: 75px">
<div style="text-decoration-line: underline; display: inline-block; margin-right: 15px">
{{this.bills.1.billId}}
<a href="https://mapletestimony.org/bills/{{this.bills.1.court}}/{{this.bills.1.billId}}" target="_blank" rel="noopener noreferrer" style="color: inherit">
{{this.bills.1.billId}}
</a>
</div>
</td>
<td style="width: 75px">
Expand All @@ -62,7 +70,9 @@
{{#if this.bills.2.billId}}
<td style="width: 75px">
<div style="text-decoration-line: underline; display: inline-block; margin-right: 15px">
{{this.bills.2.billId}}
<a href="https://mapletestimony.org/bills/{{this.bills.2.court}}/{{this.bills.2.billId}}" target="_blank" rel="noopener noreferrer" style="color: inherit">
{{this.bills.2.billId}}
</a>
</div>
</td>
<td style="width: 75px">
Expand All @@ -77,7 +87,9 @@
{{#if this.bills.3.billId}}
<td style="width: 75px">
<div style="text-decoration-line: underline; display: inline-block; margin-right: 15px">
{{this.bills.3.billId}}
<a href="https://mapletestimony.org/bills/{{this.bills.3.court}}/{{this.bills.3.billId}}" target="_blank" rel="noopener noreferrer" style="color: inherit">
{{this.bills.3.billId}}
</a>
</div>
</td>
<td style="width: 75px">
Expand All @@ -94,7 +106,9 @@
{{#if this.bills.4.billId}}
<td style="width: 75px">
<div style="text-decoration-line: underline; display: inline-block; margin-right: 15px">
{{this.bills.4.billId}}
<a href="https://mapletestimony.org/bills/{{this.bills.4.court}}/{{this.bills.4.billId}}" target="_blank" rel="noopener noreferrer" style="color: inherit">
{{this.bills.4.billId}}
</a>
</div>
</td>
<td style="width: 75px">
Expand All @@ -109,7 +123,7 @@
{{#if this.bills.5.billId}}
{{#if this.bills.6.billId}}
<td style="width: 75px">
<a class="orgItemText" href="https://mapletestimony.org/profile" target="_blank" rel="noopener noreferrer">
<a class="orgItemText" href="https://mapletestimony.org/profile?id={{userId}}" target="_blank" rel="noopener noreferrer">
see more
</a>
</td>
Expand All @@ -121,7 +135,9 @@
{{else}}
<td style="width: 75px">
<div style="text-decoration-line: underline; display: inline-block; margin-right: 15px">
{{this.bills.5.billId}}
<a href="https://mapletestimony.org/bills/{{this.bills.5.court}}/{{this.bills.5.billId}}" target="_blank" rel="noopener noreferrer" style="color: inherit">
{{this.bills.5.billId}}
</a>
</div>
</td>
<td style="width: 75px">
Expand Down
4 changes: 2 additions & 2 deletions functions/src/email/partials/users/users.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@
</div>
<div></div>
{{#ifGreaterThan numUsersWithNewTestimony 4}}
<div style="padding: 12px 0px 12px 36px; background: #EAE7E7;
<div style="padding: 12px 0px 12px 12px; background: #EAE7E7;
border-radius: 12px; margin-bottom: 36px;">
<div style="font-weight: 700; font-size: 14px; line-height: 125%; letter-spacing: 3%; margin-top: 5px">
<div style="font-weight: 700; font-size: 14px; line-height: 125%; letter-spacing: 3%; margin-top: 5px; text-align: center">
{{#ifGreaterThan numUsersWithNewTestimony 5}}
{{minusFour numUsersWithNewTestimony}} other users you follow posted testimony since your last update
{{else}}
Expand Down