chore(email): update styling, copy, urls #2141
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
2 Skipped Deployments
|
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the 📝 Walkthrough📝 Walkthrough📝 WalkthroughWalkthroughThe changes primarily involve restructuring several email components within the Unkey application to improve layout and styling. This includes the introduction of custom Changes
Assessment against linked issues
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
mcstepp
force-pushed
the
ENG-365-update-emails
branch
from
181b1db
to
2ddc3ad
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (20)
internal/resend/src/components/signature.tsx (1)
8-14: LGTM: Clean and functional component implementation.The
Signaturecomponent is well-implemented as a functional component, aligning with modern React practices. It effectively uses theTextcomponent from@react-email/textand allows for easy customization of the signature text.Consider extracting the "Cheers," text into a constant or prop to allow for easy localization or customization in the future. For example:
interface SignatureProps { signedBy: string; greeting?: string; } export const Signature: React.FC<SignatureProps> = ({ signedBy, greeting = "Cheers," }) => ( <Text className="font-semibold"> {greeting} <br /> {signedBy} </Text> );This change would make the component more flexible for different use cases or languages.
internal/resend/src/components/layout.tsx (2)
16-36: LGTM: Well-structured Layout component with a minor suggestion.The Layout component is well-structured and uses appropriate types. The use of Tailwind for styling is a good choice for maintainability and consistency.
Consider adding a
langattribute to the<Html>component for better accessibility and SEO. For example:- <Html> + <Html lang="en">
23-31: LGTM: Well-structured social media links section with a suggestion.The social media links section is well-organized and provides clear calls-to-action for users to connect on various platforms.
Consider adding UTM parameters to the social media links for better tracking of email engagement. For example:
- <Link href="https://x.com/unkeydev">X (formerly Twitter)</Link> + <Link href="https://x.com/unkeydev?utm_source=email&utm_medium=transactional&utm_campaign=social_connect">X (formerly Twitter)</Link>Apply similar UTM parameters to the Discord and GitHub links as well.
internal/resend/emails/payment_issue.tsx (2)
18-21: Structural changes improve consistency and readability.The use of the
Layoutcomponent and the updated heading style align well with the PR objectives. The larger, centered heading should improve the email's visual appeal.Consider adding a brief comment explaining the purpose of the
Layoutcomponent for better code documentation. For example:// Layout component provides consistent styling and structure for all email templates <Layout> {/* ... */} </Layout>
37-43: Improved closing and signature enhance professionalism and support.The updates to the closing text and the addition of the
Signaturecomponent are positive changes:
- The support email link provides a clear point of contact for users.
- The
Signaturecomponent likely ensures consistency across all emails.These changes align well with the PR objectives of improving email content and consistency.
Consider adding a brief comment explaining the purpose of the
Signaturecomponent, similar to the suggestion for theLayoutcomponent. For example:// Signature component provides a consistent closing for all email templates <Signature signedBy="Andreas" />internal/resend/tailwind.config.ts (1)
58-72: LGTM: Custom gray color palette addedThe addition of a custom gray color palette enhances the color customization options, which indirectly supports the PR objective by providing more options for styling emails consistently across different modes. The palette is well-defined with a logical progression from light to dark shades.
Consider extracting the color palette to a separate file (e.g.,
colors.ts) for better maintainability, especially if you plan to add more custom color palettes in the future. This would make the main configuration file cleaner and easier to manage.Example:
// colors.ts export const colors = { gray: { // ... other shades }, // ... other color palettes }; // tailwind.config.ts import { colors } from './colors'; export default { // ... theme: { // ... colors, }, } satisfies TailwindConfig;internal/resend/emails/subscription_ended.tsx (1)
16-19: LGTM: Improved layout and heading style.The use of the
Layoutcomponent and the updated heading style (larger and centered) improve the overall structure and readability of the email. This is in line with the PR objectives.Consider adding a
mb-4or similar class to theHeadingcomponent to add some bottom margin, improving the spacing between the heading and the following content.internal/resend/emails/secret_scanning_key_detected.tsx (4)
24-27: Good structural improvements, but consider wording carefully.The use of the
Layoutcomponent and the improved heading styling enhance the overall structure and readability of the email. However, changing "Alert!" to "Warning!" might reduce the perceived urgency of the message.Consider using "Alert!" or "Critical!" instead of "Warning!" to maintain the sense of urgency, given the serious nature of a key leak.
28-43: Improved content structure, but consider greeting formality.The use of an unordered list for key details greatly enhances readability and information hierarchy. This is a significant improvement in presenting critical information to the user.
The greeting "Hi there!" might be too casual for a security-related email. Consider a more neutral greeting like "Hello," which maintains a professional tone while still being friendly.
44-48: Improved button structure, but consider color choice.The use of a
Sectioncomponent for the button improves its positioning and spacing within the email. This change enhances the overall layout and user experience.The change from a black to a gray background for the button might reduce its visual prominence. Given the importance of this action, consider using a more attention-grabbing color (e.g., a shade of red or orange) to emphasize the urgency of the situation.
61-61: Great addition of a personalized signature!The inclusion of the
Signaturecomponent adds a personal touch to the email, which can help build trust with the user. Using a component ensures consistency across all emails.Consider passing the signatory name as a prop to the
SecretScanningKeyDetectedcomponent. This would allow for easy customization of the signature based on the sender or context of the email.internal/resend/emails/trial_ended.tsx (3)
21-23: Enhanced heading visibility and personalization.The updated heading with larger font size and centered alignment improves the visual hierarchy. Including the workspace name adds a personal touch.
Consider wrapping the workspace name in quotation marks for better visual separation:
- Your workspace <strong>{workspaceName}</strong> has reached the end of its trial. + Your workspace "<strong>{workspaceName}</strong>" has reached the end of its trial.
34-65: Well-structured benefits section with improved readability.The new benefits section effectively highlights the advantages of the Pro plan. The use of unordered lists and additional context for free users makes the information more digestible and compelling.
For consistency, consider removing the extra spaces before the list items:
- <li className="pb-4"> - {" "} + <li className="pb-4"> 1M monthly active keys included{" "}Apply this change to all list items for a cleaner code structure.
67-74: Improved call-to-action button.The centered, dark-styled button with updated text is more prominent and action-oriented. The direct link to the billing settings page streamlines the upgrade process.
Consider adding an
aria-labelto the button for improved accessibility:<Button href="https://unkey.com/app/settings/billing" className="bg-gray-900 text-gray-50 rounded-lg p-3 w-2/3" + aria-label="Upgrade to Unkey Pro plan" > Upgrade now </Button>internal/resend/src/client.tsx (2)
Line range hint
42-63: Resolve naming inconsistency and clarify method usageThere are a few concerns with this new method:
The method name
sendSubscriptionEndeddoesn't match the email subject "Your Unkey trial has ended". This inconsistency could lead to confusion.The TODO comment suggests this method might be deprecated or unused. If it's truly unused, consider removing it to avoid code bloat.
This method is very similar to the existing
sendTrialEndedmethod. Consider whether both are necessary or if they can be consolidated.To address these issues:
- Align the method name with its purpose. If it's for trial expiration, consider renaming it to
sendTrialEnded.- If the method is needed, remove the TODO comment and ensure it's being used appropriately.
- If the method is redundant with
sendTrialEnded, consider removing it or refactoring to use a single method for both cases.Example refactor if keeping both methods:
private async sendEndNotification(type: 'trial' | 'subscription', req: { email: string; name: string; workspace?: string }): Promise<void> { const Component = type === 'trial' ? TrialEnded : SubscriptionEnded; const html = render(<Component username={req.name} workspaceName={req.workspace} />); try { const result = await this.client.emails.send({ to: req.email, from: "[email protected]", reply_to: this.replyTo, subject: `Your Unkey ${type} has ended`, html, }); if (!result.error) { return; } throw result.error; } catch (error) { console.error(`Error occurred sending ${type} ended email `, JSON.stringify(error)); } } public sendTrialEnded(req: { email: string; name: string; workspace: string }): Promise<void> { return this.sendEndNotification('trial', req); } public sendSubscriptionEnded(req: { email: string; name: string }): Promise<void> { return this.sendEndNotification('subscription', req); }This refactor reduces duplication and makes it easier to maintain both methods if they are indeed needed.
Line range hint
1-63: Consider refactoring for improved maintainability and testabilityWhile reviewing the new
sendSubscriptionEndedmethod, I noticed some broader issues that affect the entireResendclass:
There's significant code duplication across all email sending methods. Each method follows a similar pattern of rendering an email component, sending it via the Resend client, and handling errors.
Error handling is consistent but might not be sufficient for all use cases. Currently, errors are only logged, which could lead to silent failures in production.
The heavy use of external dependencies (Resend client, React components) might make unit testing challenging.
Consider the following improvements:
- Extract the common email sending logic into a private method to reduce duplication:
private async sendEmail( to: string, subject: string, Component: React.ComponentType<any>, props: Record<string, any> ): Promise<void> { const html = render(<Component {...props} />); try { const result = await this.client.emails.send({ to, from: "[email protected]", reply_to: this.replyTo, subject, html, }); if (result.error) throw result.error; } catch (error) { console.error(`Error sending email: ${subject}`, JSON.stringify(error)); throw error; // Re-throw to allow caller to handle } }
- Improve error handling by re-throwing errors after logging. This allows callers to handle errors if needed:
public async sendTrialEnded(req: { email: string; name: string; workspace: string }): Promise<void> { try { await this.sendEmail( req.email, "Your Unkey trial has ended", TrialEnded, { username: req.name, workspaceName: req.workspace } ); } catch (error) { // Additional error handling if needed throw error; } }
- To improve testability, consider:
- Injecting the Resend client in the constructor instead of creating it internally.
- Using dependency injection for email components to allow easier mocking in tests.
These changes would significantly improve the maintainability and testability of the
Resendclass.internal/resend/emails/welcome_email.tsx (4)
39-39: Use consistent spacing in 'Rate Limiting' text.In the link text 'Ratelimiting Quickstart Guide', consider adding a space between 'Rate' and 'Limiting' for consistency and readability.
Apply this diff to fix the spacing:
-<Link href="https://go.unkey.com/ratelimit">Ratelimiting Quickstart Guide</Link> +<Link href="https://go.unkey.com/ratelimit">Rate Limiting Quickstart Guide</Link>
42-42: Remove extra space in link text.There's an unnecessary space before 'Why is Unkey secure?' inside the
<Link>component. Removing it will improve consistency.Apply this diff to fix the spacing:
-<Link href="https://unkey.com/docs/security"> Why is Unkey secure? </Link> +<Link href="https://unkey.com/docs/security">Why is Unkey secure?</Link>
46-46: Remove trailing space in link text.There's an unnecessary space after 'Unkey Community Discord' inside the
<Link>component. Consider removing it.Apply this diff to fix the spacing:
-<Link href="https://unkey.com/discord">Unkey Community Discord </Link> +<Link href="https://unkey.com/discord">Unkey Community Discord</Link>
65-65: Adjust punctuation in the 'P.S.' message.Consider replacing the hyphen after 'P.S.' with a colon and capitalizing 'If' for correct punctuation.
Apply this diff to adjust the punctuation:
-P.S. - if you have any questions or feedback, reply to this email. I read and reply to every +P.S.: If you have any questions or feedback, reply to this email. I read and reply to every
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
- internal/resend/emails/payment_issue.tsx (1 hunks)
- internal/resend/emails/secret_scanning_key_detected.tsx (2 hunks)
- internal/resend/emails/subscription_ended.tsx (1 hunks)
- internal/resend/emails/trial_ended.tsx (1 hunks)
- internal/resend/emails/welcome_email.tsx (1 hunks)
- internal/resend/package.json (1 hunks)
- internal/resend/src/client.tsx (1 hunks)
- internal/resend/src/components/layout.tsx (1 hunks)
- internal/resend/src/components/signature.tsx (1 hunks)
- internal/resend/tailwind.config.ts (2 hunks)
🔇 Additional comments (22)
internal/resend/src/components/signature.tsx (3)
1-2: LGTM: Appropriate imports for email template component.The import statements are well-structured and appropriate for a React component in an email template. Using
@react-email/textaligns with the PR objective of updating email styling, and importing React as a type is a good practice for TypeScript projects using React 17+.
4-6: LGTM: Well-defined prop interface.The
SignaturePropsinterface is concise and clearly defines the expected prop for the component. Using an interface for props is a good TypeScript practice, enhancing type safety and code readability.
1-14: Great addition: Reusable Signature component aligns with PR objectives.The introduction of this
Signaturecomponent is a valuable addition that aligns well with the PR objectives of updating email styling and improving consistency across transactional emails. Here's why this implementation is commendable:
- It promotes consistency by providing a standardized signature component for all emails.
- The component is type-safe and follows modern React and TypeScript best practices.
- Its simple yet flexible design allows for easy maintenance and adaptation to different use cases.
- The use of
@react-email/textis consistent with the goal of ensuring emails are legible in both light and dark modes.This component will contribute significantly to the overall improvement of email templates for Unkey users.
internal/resend/package.json (1)
21-21: LGTM! Verify dependency usage.The addition of
@react-email/bodyaligns with the PR objectives of updating email styling. This change looks good and should help with the email component restructuring.To ensure this new dependency is being utilized, please run the following script:
This will help confirm that the new dependency is actually being used in the codebase.
✅ Verification successful
Dependency Confirmed as Utilized.
The addition of
@react-email/bodyis successfully used ininternal/resend/src/components/layout.tsx, confirming its proper integration and alignment with the PR objectives.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of @react-email/body in the codebase # Test: Search for import statements of @react-email/body rg --type typescript --type javascript 'from\s+[\'"]@react-email/body[\'"]'Length of output: 93
Script:
#!/bin/bash # Description: Verify the usage of @react-email/body in the codebase # Test: Search for import statements of @react-email/body rg --type typescript --type javascript "from\s+['\"]@react-email/body['\"]"Length of output: 116
Script:
#!/bin/bash # Description: Verify the usage of @react-email/body in the codebase # Test: Search for import statements of @react-email/body in JavaScript and TypeScript files rg "from\s+['\"]@react-email/body['\"]" --glob '*.js' --glob '*.jsx' --glob '*.ts' --glob '*.tsx'Length of output: 187
internal/resend/src/components/layout.tsx (1)
1-14: LGTM: Imports and interface declaration are well-structured.The import statements are comprehensive, including all necessary components from @react-email and React types. The LayoutProps interface is correctly defined, ensuring type safety for the Layout component.
internal/resend/emails/payment_issue.tsx (4)
9-10: LGTM: New imports enhance modularity and consistency.The addition of
LayoutandSignaturecomponents from local paths is a good practice. This modular approach will likely improve consistency across different email templates and make future updates easier.
22-35: Content and styling changes enhance user experience.The updates to the email content and button styling are well-executed:
- The message remains clear and concise.
- The centered button with updated styling (background color, padding, and width) should improve visibility and clickability.
- Wrapping the button in a centered
Sectionenhances the overall layout.These changes align well with the PR objective of improving email styling and legibility.
Line range hint
47-50: LGTM: PreviewProps remain consistent.The unchanged
PreviewPropscorrectly reflect that the component's interface hasn't changed. This is in line with the PR objectives, which focus on styling improvements rather than functional changes.
Line range hint
1-53: Overall, excellent improvements to email styling and consistency.The changes in this file successfully address the PR objectives:
- Enhanced styling and layout using the new
Layoutcomponent.- Improved readability with updated text styles and button placement.
- Consistent closing with the new
Signaturecomponent.- Maintained functionality while focusing on visual improvements.
The modular approach with new components will likely make future updates easier and ensure consistency across different email templates. The minor suggestions for adding comments to the
LayoutandSignaturecomponents would further improve code documentation.Great job on these improvements!
internal/resend/tailwind.config.ts (2)
4-4: LGTM: Dark mode support addedThe addition of
darkMode: ["class"]enables dark mode support based on class usage. This change aligns well with the PR objective of ensuring emails are consistently legible in both light and dark modes.
Line range hint
1-75: Summary: Changes align well with PR objectivesThe modifications to the Tailwind configuration file effectively support the PR's goal of enhancing email styling and ensuring legibility in both light and dark modes. The addition of dark mode support and a custom gray color palette provides the necessary tools for creating visually consistent and appealing email designs.
These changes, combined with the custom email components mentioned in the PR summary, should significantly improve the overall quality and consistency of the transactional emails.
internal/resend/emails/subscription_ended.tsx (4)
8-9: LGTM: New component imports enhance modularity.The introduction of
LayoutandSignaturecomponents aligns well with the PR objectives of updating email styling. This modular approach promotes reusability and consistency across different email templates.
20-29: LGTM: Clear and concise email content.The email content effectively communicates the end of the subscription and provides clear next steps. The personalization with the username is maintained, which is a good practice for user engagement.
40-46: LGTM: Improved signature section.The addition of a horizontal rule and the use of a dedicated
Signaturecomponent enhance the visual structure of the email and promote consistency across different email templates. This aligns well with the PR objectives of improving email styling.
Line range hint
1-55: Overall assessment: Excellent improvements to email structure and styling.The changes made to the
SubscriptionEndedcomponent significantly enhance the email's structure, styling, and maintainability. The introduction of customLayoutandSignaturecomponents, along with improved button styling and content organization, aligns perfectly with the PR objectives of updating email styling and ensuring consistency.Key improvements:
- Modular structure with custom components
- Enhanced visual hierarchy with centered heading and button
- Clear separation of content sections
- Consistent styling that should work well in both light and dark modes
These changes should result in a more visually appealing and readable email, potentially improving user engagement. Great work on this update!
internal/resend/emails/secret_scanning_key_detected.tsx (2)
13-14: Excellent use of modular components!The addition of
LayoutandSignaturecomponents is a great improvement. This approach enhances code reusability and maintains consistency across different email templates. It also simplifies the main component by abstracting common elements.
49-60: Excellent additions to closing remarks!The changes in this section significantly improve the email's usefulness and user-friendliness:
- The
Hrcomponent provides clear visual separation between sections.- Including a link to the documentation about disabling Root Keys is very helpful.
- Adding contact information for support ensures users know where to get help if needed.
These additions enhance the overall quality and effectiveness of the email communication.
internal/resend/emails/trial_ended.tsx (5)
10-11: Improved modularity with new component imports.The addition of
LayoutandSignaturecomponents suggests a move towards a more modular and maintainable structure. This approach can enhance consistency across different email templates and simplify future updates.
24-32: Improved content structure and clarity.The restructured content with smaller paragraphs enhances readability. The more direct language effectively communicates the end of the trial and the need for action.
78-81: Enhanced support information.The addition of a clickable email link and the encouragement to reply directly to the email provide clear and accessible support options for users.
Line range hint
1-94: Overall improvements align well with PR objectives.The changes to this file significantly enhance the trial-ended email template, addressing the objectives outlined in the PR and linked issue #765. Key improvements include:
- Better visual hierarchy with updated heading and button styles.
- Improved content structure and readability.
- More compelling presentation of Pro plan benefits.
- Enhanced support information and personal touch with the signature.
These updates should result in a more effective and visually appealing email that encourages users to upgrade their plan.
83-83: Personal touch with Signature component.The addition of the Signature component adds a personal touch to the email, which can improve user engagement.
Could you clarify if "Andreas" is intended to be a static name for all emails, or if it should be dynamic based on the sender? If it's meant to be dynamic, we should consider passing it as a prop to the component.
|
Ahh yeah, I thought so but then I saw the original urla in the emails and
second-guessed
…On Mon, Sep 30, 2024, 11:00 AM James P ***@***.***> wrote:
✏️ Changes requested
<#2141 (review)>
—
Reply to this email directly, view it on GitHub
<#2141 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABYMHLCFIJJHJOCUDOTI4WTZZFRSJAVCNFSM6AAAAABO75BHXKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBTGQ2TOMRWG4>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
mcstepp
force-pushed
the
ENG-365-update-emails
branch
from
93547e1
to
850a0c0
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
internal/resend/emails/welcome_email.tsx (1)
19-64: LGTM: Improved email content with a suggestion.The email content has been significantly improved:
- Engaging introduction and clear explanation of Unkey's value proposition.
- Well-structured list of resources with descriptive links.
- Clear call-to-action with the dashboard button.
- Personal touch in the signature enhances user connection.
These changes align well with the PR objectives to improve email communication and engagement.
For consistency, consider updating the URL in the Button component:
- href="https://app.unkey.com/" + href="https://app.unkey.com"This change removes the trailing slash, making it consistent with the URL format mentioned in the past review comments.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- internal/resend/emails/welcome_email.tsx (1 hunks)
- internal/resend/src/components/layout.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- internal/resend/src/components/layout.tsx
🔇 Additional comments (4)
internal/resend/emails/welcome_email.tsx (4)
1-10: LGTM: Imports and "use client" directive are appropriate.The import statements are well-organized and include necessary components from the @react-email library. The custom
LayoutandSignaturecomponents are correctly imported. The "use client" directive at the top is appropriate for a client-side component in a Next.js application.
18-65: LGTM: Well-structured and modular component.The
WelcomeEmailcomponent is well-organized and uses a modular approach:
- Custom
Layoutcomponent as a wrapper improves reusability.- Semantic @react-email components (
Heading,Text,Section) enhance readability.- The
Buttoncomponent with Tailwind classes for styling is consistent with the project's approach.- Custom
Signaturecomponent at the end promotes modularity.This structure will make the email template easy to maintain and update in the future.
19-19: LGTM: Consistent styling with Tailwind CSS.The styling approach using Tailwind CSS classes is consistent and well-applied throughout the component. Notable improvements include:
- Correct usage of
font-semiboldfor the heading, addressing the issue mentioned in a past review comment.- Appropriate use of spacing and typography classes for improved readability.
- Consistent button styling with background color, text color, and rounded corners.
These styling choices contribute to a visually appealing and cohesive email design.
Also applies to: 29-29, 51-51, 61-61
11-14:⚠️ Potential issueAddress unused Props in WelcomeEmail component.
The
Propstype is defined withusernameanddateproperties, but these are not used in theWelcomeEmailcomponent. This issue was previously flagged in a past review comment. Consider either:
- Removing the unused
Propstype if it's not needed, or- Updating the component to accept and use these props.
If you decide to use the props, apply this diff:
-export function WelcomeEmail() { +export function WelcomeEmail({ username, date }: Props) {Then, use
usernameanddatewithin the component as needed.Also applies to: 16-16
* chore(email): update styling, copy, urls * update urls * fix class name * remove unused imports, update date previews * [autofix.ci] apply automated fixes * make James the signer of all emails * add biome ignore to prevent it from breaking an import * add biome ignore to other component * Update copy and links to use Dub * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: James Perkins <[email protected]> Co-authored-by: James P <[email protected]>
* chore(email): update styling, copy, urls * update urls * fix class name * remove unused imports, update date previews * [autofix.ci] apply automated fixes * make James the signer of all emails * add biome ignore to prevent it from breaking an import * add biome ignore to other component * Update copy and links to use Dub * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: James Perkins <[email protected]> Co-authored-by: James P <[email protected]>
What does this PR do?
Transactional emails now follow a consistent styling that is legible in light and dark modes with a default template that includes social media connection links.
Fixes #765
Type of change
How should this be tested?
Run internal/resend locally. Use Resend's "send email" to deliver test emails.
Key leaked (Desktop, Light)
Payment Issue (Desktop, Light)
Payment Issue (Mobile, Dark)
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
New Features
Layoutcomponent for improved email structure.Signaturecomponent for personalized sign-offs.Bug Fixes
Chores