add logo

Author: hhvrc

email-templates/emails/_lib/components.tsx

@@ -6,6 +6,7 @@ import {
   Heading,
   Hr,
   Html,
+  Img,
   Link,
   Preview,
   Section,
@@ -43,7 +44,12 @@ export function Layout({
 function Header() {
   return (
     <Section style={styles.header}>
-      <Text style={styles.brand}>OpenShock</Text>
+      <Img
+        src="https://wiki.openshock.org/branding/Logo128.png"
+        height="32"
+        alt="OpenShock"
+        style={styles.brandLogo}
+      />
     </Section>
   );
 }

email-templates/emails/_lib/styles.ts

@@ -42,12 +42,16 @@ export const styles = {
     backgroundColor: colors.accent,
     color: colors.accentText,
   },
-  brand: {
-    margin: '0',
-    fontSize: '18px',
+  brandLogo: {
+    display: 'block',
+    margin: '0 auto',
+    // Styles below apply to the `alt` text when the image is blocked,
+    // so the OpenShock wordmark still looks like a header in that case.
+    fontSize: '20px',
     fontWeight: '700',
     letterSpacing: '0.5px',
     color: colors.accentText,
+    textDecoration: 'none',
   },
   content: {
     padding: '28px 32px 8px',