-
Notifications
You must be signed in to change notification settings - Fork 894
refactor: refactor notification email templates #14208
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.
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
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
898014c
Update template email
BrunoQuaresma a17381f
Pass extra data to template
BrunoQuaresma 0d347fc
Add dark mode
BrunoQuaresma ec17ad5
Update colors
BrunoQuaresma 3270cd5
Simplify passing data
BrunoQuaresma bfbf974
Fix data passing
BrunoQuaresma 9ebdb6f
Fix test
BrunoQuaresma 79ee99e
Use horizontal logo
BrunoQuaresma File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,32 @@ | ||
<!DOCTYPE html> | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>{{ .Labels._subject }}</title> | ||
</head> | ||
<body style="font-family: Arial, sans-serif; background-color: #1d1d20; margin: 0; padding: 0;"> | ||
<div style="max-width: 600px; margin: 20px auto; background-color: #3f556d; border: 1px solid #34495E; padding: 20px; border-radius: 8px;"> | ||
<div style="text-align: center; padding: 20px 0; border-bottom: 1px solid #34495E;"> | ||
<img width="215" height="47" src="https://coder.com/logo-wide-white.png"/> | ||
</div> | ||
<div style="padding: 20px; color: #ECF0F1; line-height: 1.6;"> | ||
<h1 style="color: #ECF0F1;">{{ .Labels._subject }}</h1> | ||
</head> | ||
<body style="margin: 0; padding: 0; font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; color: #020617; background: #f8fafc;"> | ||
<div style="max-width: 600px; margin: 20px auto; padding: 60px; border: 1px solid #e2e8f0; border-radius: 8px; background-color: #fff; text-align: left; font-size: 14px; line-height: 1.5;"> | ||
<div style="text-align: center;"> | ||
<img src="https://coder.com/coder-logo-300x300.png" alt="Coder Logo" style="width: 60px;" /> | ||
</div> | ||
<h1 style="text-align: center; font-size: 24px; font-weight: 400; margin: 8px 0 32px; line-height: 1.5;"> | ||
{{ .Labels._subject }} | ||
</h1> | ||
<div style="line-height: 1.5;"> | ||
{{ .Labels._body }} | ||
|
||
</div> | ||
<div style="text-align: center; margin-top: 32px;"> | ||
{{ range $action := .Actions }} | ||
<a href="{{ $action.URL }}" style="display: inline-block; padding: 10px 20px; background-color: #3D74DB; color: #ffffff; text-decoration: none; border-radius: 4px; margin-top: 20px;">{{ $action.Label }}</a><br> | ||
<a href="{{ $action.URL }}" style="display: inline-block; padding: 13px 24px; background-color: #020617; color: #f8fafc; text-decoration: none; border-radius: 8px; margin: 0 4px;"> | ||
{{ $action.Label }} | ||
</a> | ||
{{ end }} | ||
</div> | ||
<div style="border-top: 1px solid #e2e8f0; color: #475569; font-size: 12px; margin-top: 64px; padding-top: 24px; line-height: 1.6;"> | ||
<p>© {{ current_year }} Coder. All rights reserved - <a href="{{ base_url }}" style="color: #2563eb; text-decoration: none;">{{ base_url }}</a></p> | ||
<p><a href="{{ base_url }}/settings/notifications" style="color: #2563eb; text-decoration: none;">Click here to manage your notification settings</a></p> | ||
</div> | ||
</div> | ||
<div style="text-align: center; padding: 10px 0; border-top: 1px solid #34495E; margin-top: 20px; color: #BDC3C7;"> | ||
<!-- TODO: dynamic copyright --> | ||
© 2024 Coder. All rights reserved. | ||
</div> | ||
</div> | ||
</body> | ||
</html> | ||
</body> | ||
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we probably want a logo with our name in it, though.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hm... I like the clean aspect of the icon, but I don't have a strong opinion. Why do you prefer the full logo instead of the icon?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Our logo is not very recognisable.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe for people who are not using the product, it could be less recognizable. For example, Vercel's logo is a generic triangle, but their users recognize it because they use the product, and I think it's the same for Coder. In the UI, for example, we only use the icon, and I think people know it's Coder. My preference would be to use only the icon for visual consistency and a cleaner look. What do you think, @stirby?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it's important that folks know that these emails are coming from coder so that they don't trash them or mark them as spam.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the footer, we include the Coder company name and the deployment URL. In my opinion, the subject is the most important information, and as I mentioned before, the notification emails will be sent to Coder users who are already familiar with our branding and context. However, since this isn't a blocker, I'll replace the icon with the horizontal logo that includes the name, as you suggested. We can revisit this discussion later if we think it adds value. Does that sound like a good plan?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
SGTM 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.