Skip to content

Fix notification email rendering across clients #460

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
cynthia-sg merged 3 commits into from
May 5, 2026
Merged

Fix notification email rendering across clients #460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3bca85
Fix notification email inline styles
cynthia-sg May 5, 2026
300f913
Fix notification email button styles
cynthia-sg May 5, 2026
5909e0f
Inline notification CTA spacing fallbacks
cynthia-sg May 5, 2026
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
10 changes: 9 additions & 1 deletion ocg-server/templates/macros/email.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% macro button(link, text = "") -%}
{% macro button(link, text = "", color = "#0094FF") -%}
{# djlint:off H021 #}
<table border="0"
cellpadding="0"
Expand All @@ -7,6 +7,9 @@
style="border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
background-color: transparent;
border: 0;
color: inherit;
box-sizing: border-box">
<tbody>
<tr>
Expand All @@ -32,6 +35,11 @@
class="btn"
target="_blank"
style="cursor: pointer;
background-color: {{ color }};
border: solid 1px {{ color }};
border-radius: 25px;
color: #ffffff;
display: inline-block;
text-decoration: none;
font-size: 14px;
font-weight: bold;
Expand Down
21 changes: 13 additions & 8 deletions ocg-server/templates/notifications/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
--color-primary-500: {{ theme.primary_color }};
}

@media only screen and (max-width: 620px) {
Expand Down Expand Up @@ -174,12 +173,12 @@
}

.line {
border-top: 7px solid var(--color-primary-500);
border-top: 7px solid {{ theme.primary_color }};
}

.btn {
background-color: var(--color-primary-500);
border: solid 1px var(--color-primary-500);
background-color: {{ theme.primary_color }};
border: solid 1px {{ theme.primary_color }};
color: #ffffff;
border-radius: 25px;
display: inline-flex;
Expand All @@ -198,7 +197,7 @@
}

.line {
border-color: var(--color-primary-500) !important;
border-color: {{ theme.primary_color }} !important;
}

.main, .copy-link {
Expand All @@ -210,8 +209,8 @@
}

.btn {
background-color: var(--color-primary-500);
border-color: var(--color-primary-500);
background-color: {{ theme.primary_color }};
border-color: {{ theme.primary_color }};
color: #ffffff;
}

Expand All @@ -226,6 +225,8 @@
{# djlint:off H021 #}
<body class="body"
style="font-family: sans-serif;
background-color: #f4f4f4;
color: #38383f;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
Expand All @@ -240,6 +241,8 @@
style="border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
background-color: #f4f4f4;
color: #38383f;
width: 100%">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top">&nbsp;</td>
Expand Down Expand Up @@ -278,6 +281,8 @@
style="border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
background-color: #ffffff;
border-top: 7px solid {{ theme.primary_color }};
width: 100%;
border-radius: 3px">

Expand All @@ -300,7 +305,7 @@
<td style="font-family: sans-serif;
font-size: 14px;
font-weight: normal;
vertical-align: top: margin-bottom: 15px">
vertical-align: top">
{% block content -%}
{% endblock content -%}
</td>
Expand Down
4 changes: 2 additions & 2 deletions ocg-server/templates/notifications/community_team_invitation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
{% endblock preheader -%}

{% block content -%}
<p class="default mb-30">
<p class="default mb-30" style="margin-bottom: 30px">
You have been invited to join the <strong>{{ community_name }}</strong>
team on
<strong>Open Community Groups</strong>.
Expand All @@ -20,7 +20,7 @@
invitation from your dashboard.
</p>

{{ email::button(link = link, text = "Review invitation") }}
{{ email::button(link = link, text = "Review invitation", color = theme.primary_color) }}
{% endblock content -%}

{% block footer -%}
Expand Down
8 changes: 5 additions & 3 deletions ocg-server/templates/notifications/email_verification.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,18 @@
{% endblock preheader -%}

{% block content -%}
<p class="default mb-30">
<p class="default mb-30" style="margin-bottom: 30px">
Welcome to <strong>Open Community Groups</strong>!
<br />
<br />
Please note that the verification code <strong>is only valid for 24 hours</strong>. If you haven't verified your account by then you'll need to sign up again.
</p>

{{ email::button(link = link, text = "Verify your email") }}
{{ email::button(link = link, text = "Verify your email", color = theme.primary_color) }}

<p class="default mt-30 mb-15">
<p class="default mt-30 mb-15"
style="margin-top: 30px;
margin-bottom: 15px">
Once you've verified your email, you'll be able to log in using your credentials.
<br />
<br />
Expand Down
8 changes: 5 additions & 3 deletions ocg-server/templates/notifications/event_canceled.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,17 @@
{% endblock preheader -%}

{% block content -%}
<p class="default mb-30">
<p class="default mb-30" style="margin-bottom: 30px">
We are sorry to inform you that the event
<strong>{{ event.name }}</strong> from
<strong>{{ event.group_name }}</strong> has been <strong>canceled</strong>.
</p>

{{ email::button(link = link, text = "View event details") }}
{{ email::button(link = link, text = "View event details", color = theme.primary_color) }}

<p class="default mt-30 mb-15">
<p class="default mt-30 mb-15"
style="margin-top: 30px;
margin-bottom: 15px">
Please find attached an .ics file containing the updated event details.
<br />
<br />
Expand Down
4 changes: 2 additions & 2 deletions ocg-server/templates/notifications/event_custom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
<strong>{{ event.name }}</strong>
</p>
<p class="default big mb-15">{{ title }}</p>
<p class="default mb-30 preline">{{ body }}</p>
{{ email::button(link = link, text = "View event page") }}
<p class="default mb-30 preline" style="margin-bottom: 30px">{{ body }}</p>
{{ email::button(link = link, text = "View event page", color = theme.primary_color) }}
{% endblock content -%}

{% block footer -%}
Expand Down
8 changes: 5 additions & 3 deletions ocg-server/templates/notifications/event_published.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
{% endblock preheader -%}

{% block content -%}
<p class="default mb-30">
<p class="default mb-30" style="margin-bottom: 30px">
A new event, <strong>{{ event.name }}</strong>, has been published by
<strong>{{ event.group_name }}</strong> on <strong>Open Community Groups</strong>.
<br />
Expand All @@ -25,9 +25,11 @@
{% endif -%}
</p>

{{ email::button(link = link, text = "View event") }}
{{ email::button(link = link, text = "View event", color = theme.primary_color) }}

<p class="default mt-30 mb-15">
<p class="default mt-30 mb-15"
style="margin-top: 30px;
margin-bottom: 15px">
Please find attached an .ics file containing the event details
<br />
<br />
Expand Down
4 changes: 2 additions & 2 deletions ocg-server/templates/notifications/event_refund_approved.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@
{% endblock preheader -%}

{% block content -%}
<p class="default mb-30">
<p class="default mb-30" style="margin-bottom: 30px">
Your refund request for <strong>{{ event.name }}</strong> has been approved.
<br />
<br />
The refund is now being processed by Stripe and your ticket has been released.
</p>

{{ email::button(link = link, text = "View event") }}
{{ email::button(link = link, text = "View event", color = theme.primary_color) }}
{% endblock content -%}

{% block footer -%}
Expand Down
4 changes: 2 additions & 2 deletions ocg-server/templates/notifications/event_refund_rejected.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@
{% endblock preheader -%}

{% block content -%}
<p class="default mb-30">
<p class="default mb-30" style="margin-bottom: 30px">
Your refund request for <strong>{{ event.name }}</strong> was reviewed and was not approved.
<br />
<br />
Your attendance is still active, and you can continue managing the event from its page.
</p>

{{ email::button(link = link, text = "View event") }}
{{ email::button(link = link, text = "View event", color = theme.primary_color) }}
{% endblock content -%}

{% block footer -%}
Expand Down
4 changes: 2 additions & 2 deletions ocg-server/templates/notifications/event_refund_requested.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
{% endblock preheader -%}

{% block content -%}
<p class="default mb-30">
<p class="default mb-30" style="margin-bottom: 30px">
A paid attendee has requested a refund for <strong>{{ event.name }}</strong> from
<strong>{{ event.group_name }}</strong> on <strong>Open Community Groups</strong>.
<br />
Expand All @@ -28,7 +28,7 @@
Open the group dashboard to review the event and approve or reject the request.
</p>

{{ email::button(link = link, text = "Open group dashboard") }}
{{ email::button(link = link, text = "Open group dashboard", color = theme.primary_color) }}
{% endblock content -%}

{% block footer -%}
Expand Down
4 changes: 2 additions & 2 deletions ocg-server/templates/notifications/event_reminder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
{% endblock preheader -%}

{% block content -%}
<div class="default mb-30">
<div class="default mb-30" style="margin-bottom: 30px">
Friendly reminder that <strong>{{ event.name }}</strong> from
<strong>{{ event.group_name }}</strong> starts in less than 24 hours.
<br />
Expand Down Expand Up @@ -49,7 +49,7 @@
{% endif -%}
</div>

{{ email::button(link = link, text = "View event") }}
{{ email::button(link = link, text = "View event", color = theme.primary_color) }}
{% endblock content -%}

{% block footer -%}
Expand Down
8 changes: 5 additions & 3 deletions ocg-server/templates/notifications/event_rescheduled.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
{% endblock preheader -%}

{% block content -%}
<div class="default mb-30">
<div class="default mb-30" style="margin-bottom: 30px">
The event <strong>{{ event.name }}</strong> from
<strong>{{ event.group_name }}</strong> has been rescheduled.
<br />
Expand Down Expand Up @@ -48,9 +48,11 @@
{% endif -%}
</div>

{{ email::button(link = link, text = "View updated event") }}
{{ email::button(link = link, text = "View updated event", color = theme.primary_color) }}

<p class="default mt-30 mb-15">
<p class="default mt-30 mb-15"
style="margin-top: 30px;
margin-bottom: 15px">
Please find attached an .ics file containing the updated event details.
<br />
<br />
Expand Down
4 changes: 2 additions & 2 deletions ocg-server/templates/notifications/event_waitlist_joined.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@
{% endblock preheader -%}

{% block content -%}
<p class="default mb-30">
<p class="default mb-30" style="margin-bottom: 30px">
{{ event.name }} from <strong>{{ event.group_name }}</strong> is currently full.
<br />
<br />
You have been added to the waiting list. If a seat opens up and you are promoted,
we will send you a follow-up email.
</p>

{{ email::button(link = link, text = "View event") }}
{{ email::button(link = link, text = "View event", color = theme.primary_color) }}
{% endblock content -%}

{% block footer -%}
Expand Down
4 changes: 2 additions & 2 deletions ocg-server/templates/notifications/event_waitlist_left.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
{% endblock preheader -%}

{% block content -%}
<p class="default mb-30">
<p class="default mb-30" style="margin-bottom: 30px">
You have left the waiting list for <strong>{{ event.name }}</strong> from
<strong>{{ event.group_name }}</strong>.
</p>

{{ email::button(link = link, text = "View event") }}
{{ email::button(link = link, text = "View event", color = theme.primary_color) }}
{% endblock content -%}

{% block footer -%}
Expand Down
8 changes: 5 additions & 3 deletions ocg-server/templates/notifications/event_waitlist_promoted.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
{% endblock preheader -%}

{% block content -%}
<div class="default mb-30">
<div class="default mb-30" style="margin-bottom: 30px">
Good news - a seat opened up for <strong>{{ event.name }}</strong> from
<strong>{{ event.group_name }}</strong>, and you are now registered.
<br />
Expand Down Expand Up @@ -49,9 +49,11 @@
{% endif -%}
</div>

{{ email::button(link = link, text = "View event") }}
{{ email::button(link = link, text = "View event", color = theme.primary_color) }}

<p class="default mt-30 mb-15">Please find attached an .ics file containing the event details.</p>
<p class="default mt-30 mb-15"
style="margin-top: 30px;
margin-bottom: 15px">Please find attached an .ics file containing the event details.</p>
{% endblock content -%}

{% block footer -%}
Expand Down
8 changes: 5 additions & 3 deletions ocg-server/templates/notifications/event_welcome.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
{% endblock preheader -%}

{% block content -%}
<div class="default mb-30">
<div class="default mb-30" style="margin-bottom: 30px">
Thanks for registering for <strong>{{ event.name }}</strong> with
<strong>{{ event.group_name }}</strong> on
<strong>Open Community Groups</strong>.
Expand Down Expand Up @@ -53,9 +53,11 @@
{% endif -%}
</div>

{{ email::button(link = link, text = "View event") }}
{{ email::button(link = link, text = "View event", color = theme.primary_color) }}

<p class="default mt-30 mb-15">
<p class="default mt-30 mb-15"
style="margin-top: 30px;
margin-bottom: 15px">
Please find attached an .ics file containing the event details.
<br />
<br />
Expand Down
4 changes: 2 additions & 2 deletions ocg-server/templates/notifications/group_custom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
<strong>{{ group.name }}</strong>
</p>
<p class="default big mb-15">{{ title }}</p>
<p class="default mb-30 preline">{{ body }}</p>
{{ email::button(link = link, text = "Visit group page") }}
<p class="default mb-30 preline" style="margin-bottom: 30px">{{ body }}</p>
{{ email::button(link = link, text = "Visit group page", color = theme.primary_color) }}
{% endblock content -%}

{% block footer -%}
Expand Down
Loading
Loading