Make magic link expiry warning more visible

Users were missing the expiry notice and hitting link errors. Replace the
small gray footer text with a prominent yellow callout box in the HTML
email, and prefix the plain-text version with IMPORTANT.

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Bryan Frimin <bryan@probo.com>

packages/emails/src/MagicLink.tsx

@@ -18,7 +18,6 @@ import EmailLayout, {
   bodyText,
   button,
   buttonContainer,
-  footerText,
 } from "./components/EmailLayout";
 
 export const MagicLink = () => {
@@ -32,11 +31,29 @@ export const MagicLink = () => {
         </Button>
       </Section>
 
-      <Text style={footerText}>
+      <Section style={expiryBox}>
-        This link will expire in {"{{.DurationInMinutes}}"} minutes.
+        <Text style={expiryText}>
+          {"⚠️ This link expires in {{.DurationInMinutes}} minutes. Use it promptly after receiving this email."}
         </Text>
+      </Section>
     </EmailLayout>
   );
 };
 
+const expiryBox: React.CSSProperties = {
+  backgroundColor: "#fff8e1",
+  border: "1px solid #f9a825",
+  borderRadius: "6px",
+  padding: "12px 16px",
+  marginTop: "8px",
+};
+
+const expiryText: React.CSSProperties = {
+  margin: "0",
+  color: "#7a5900",
+  fontSize: "14px",
+  fontWeight: "600",
+  lineHeight: "20px",
+};
+
 export default MagicLink;

packages/emails/templates/magic-link.txt

@@ -6,7 +6,7 @@ Please use this link to connect to {{.OrganizationName}}'s Compliance Page:
 
 {{.MagicLinkURL}}
 
-This link will expire in {{.DurationInMinutes}} minutes.
+IMPORTANT: This link expires in {{.DurationInMinutes}} minutes. Use it promptly after receiving this email.
 
 {{.SenderCompanyHeadquarterAddress}}
 Powered By Prob