Skip to content

Commit

Permalink
fix(email): Fixes an issue with Outlook not correctly displaying the …
Browse files Browse the repository at this point in the history
…OneMAC logo and header (#972)
  • Loading branch information
tbolt authored Jan 6, 2025
1 parent 0625112 commit 322bb23
Show file tree
Hide file tree
Showing 13 changed files with 2,096 additions and 3,042 deletions.
22 changes: 8 additions & 14 deletions lib/libs/email/content/email-components.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Text, Link, Section, Row, Column, Hr, Heading } from "@react-email/components";
import { Attachment, AttachmentTitle, AttachmentKey } from "shared-types";
import { createRef, forwardRef, ReactNode } from "react";
import { Column, Heading, Hr, Link, Row, Section, Text } from "@react-email/components";
import { ReactNode } from "react";
import { Attachment, AttachmentKey, AttachmentTitle } from "shared-types";
import { styles } from "./email-styles";
import { ONEMAC_LOGO_BASE64 } from "./onemac-logo-base64";

export const EMAIL_CONFIG = {
DEV_EMAIL: "[email protected]",
Expand Down Expand Up @@ -44,24 +45,17 @@ const Textarea = ({ children }: { children: React.ReactNode }) => (
</Text>
);

const LogoContainer = forwardRef<HTMLSpanElement, { url: string }>(({ url }, ref) => (
<header ref={ref} style={styles.logo.container}>
<Link href={url} target="_blank" style={styles.logo.link}>
const EmailNav = ({ appEndpointUrl }: { appEndpointUrl: string }) => (
<Section style={styles.logo.container}>
<Link href={appEndpointUrl} target="_blank" style={styles.logo.link}>
<img
height={40}
width={112}
style={{ maxWidth: "112px" }}
src={`${url}onemac-logo.png`}
src={`data:image/png;base64,${ONEMAC_LOGO_BASE64}`}
alt="OneMAC Logo"
/>
<img alt="" />
</Link>
</header>
));

const EmailNav = ({ appEndpointUrl }: { appEndpointUrl: string }) => (
<Section>
<LogoContainer ref={createRef()} url={appEndpointUrl} />
</Section>
);

Expand Down
2 changes: 2 additions & 0 deletions lib/libs/email/content/onemac-logo-base64.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const ONEMAC_LOGO_BASE64 =
"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"; // pragma: allowlist secret
Loading

0 comments on commit 322bb23

Please sign in to comment.