🔨 Fix the notification template (#234)

* Fix notification template * Remove `!` from the email subject * Fix asset links
Joystream · Nov 10, 2023 · d709e3a · d709e3a
1 parent fc42f77
commit d709e3a
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 25 deletions.
diff --git a/scripts/generate-emails.js b/scripts/generate-emails.js
@@ -7,8 +7,9 @@ const mjml2html = require('mjml')
 const { compile } = require('handlebars')
 
 const ghRaw = 'https://raw.githubusercontent.com/Joystream'
-const gleevLogos = `${ghRaw}/atlas-notification-assets/main/logos/gleev`
-const gleevRoot = 'https://atlas-git-fork-thesan-feature-orion-notifications-joystream.vercel.app'
+const emailAssets = 'https://eu-central-1.linodeobjects.com/atlas-assets/email'
+const gleevLogos = `${emailAssets}/logos/gleev`
+const gleevRoot = 'https://atlas-git-notifications-joystream.vercel.app'
 const contexts = {
   gleev: {
     title: 'Hi alice,',
@@ -29,7 +30,7 @@ const contexts = {
       link: `${gleevRoot}/video/1?commentId=METAPROTOCOL-OLYMPIA-3882-2`,
       date: '07 Jul 2023 at 10:41',
       avatar: `${ghRaw}/founding-members/main/avatars/primary-avatar/1.png`,
-      icon: `${ghRaw}/atlas-notification-assets/main/icons/follow.png`,
+      icon: `${emailAssets}/icons/follow.png`,
       iconColor: '#5A58FF',
     },
   },

diff --git a/src/auth-server/emails/templates/mjml/notification.html.mst.mjml b/src/auth-server/emails/templates/mjml/notification.html.mst.mjml
@@ -1,8 +1,12 @@
 <mjml>
   <mj-head>
+    <mj-font
+      name="IBM Plex Sans"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600"
+    />
     <mj-attributes>
       <mj-all
-        font-family="sans"
+        font-family="'IBM Plex Sans', sans-serif"
         font-size="12px"
         line-height="16px"
         color="#000000"
@@ -19,16 +23,16 @@
         font-size="14px"
         inner-padding="0 10px"
         font-weight="600"
-        color="#FFFFFF"
+        color="#000000"
         padding="0"
       />
     </mj-attributes>
   </mj-head>
 
-  <mj-body background-color="#DAE2EB">
+  <mj-body>
     <!-- Header -->
     <mj-section padding="24px 0 0">
-      <mj-column background-color="#4038FF">
+      <mj-column>
         <mj-image
           src="{{ app.logo }}"
           alt="{{ app.name }}"
@@ -44,7 +48,7 @@
       <!-- Greeting -->
       <mj-section padding="0">
         <mj-column>
-          <mj-text mj-class="bold" padding="0" font-size="18px" line-height="24px">
+          <mj-text mj-class="bold" padding="0" font-size="24px" line-height="24px">
             {{ title }}
           </mj-text>
           <mj-text mj-class="big" padding="8px 0 24px 0">{{ subTitle }}</mj-text>
@@ -71,14 +75,20 @@
 
           <!-- Text -->
           <mj-column vertical-align="middle" width="90%">
-            <mj-button mj-class="link" href="{{ notification.link }}" padding="0 0 0 20px">
+            <mj-button
+              mj-class="link"
+              href="{{ notification.link }}"
+              padding="0 0 0 20px"
+              font-weight="500"
+            >
               {{ notification.text }}
             </mj-button>
             <mj-button
               mj-class="link"
               href="{{ notification.link }}"
               padding="4px 0 0 20px"
               color="#52616B"
+              font-weight="500"
             >
               {{ notification.date }}
             </mj-button>
@@ -106,19 +116,19 @@
 
     <!-- Footer -->
     <mj-section padding="0">
-      <mj-column background-color="#000000">
+      <mj-column background-color="#DAE2EB">
         <mj-image
           src="{{ app.logoAlt }}"
           alt="{{ app.name }}"
-          width="96px"
-          height="88px"
-          padding="0px"
+          width="35px"
+          height="30px"
+          padding="24px 0 10px"
         ></mj-image>
       </mj-column>
     </mj-section>
 
     <mj-section padding="0">
-      <mj-group background-color="#000000">
+      <mj-group background-color="#DAE2EB">
         <mj-column>
           <mj-button
             mj-class="link footer-link"
@@ -138,8 +148,8 @@
     </mj-section>
 
     <mj-section padding="0 0 24px">
-      <mj-column background-color="#000000" padding="16px 16px 24px">
-        <mj-text color="#FFFFFF" align="center" padding="0">
+      <mj-column background-color="#DAE2EB" padding="16px 16px 24px">
+        <mj-text color="#343D44" align="center" padding="0">
           You can
           <a href="{{ app.unsubscribeLink }}" target="_blank" style="color: currentColor">
             unsubscribe

diff --git a/src/mail-scheduler/utils.ts b/src/mail-scheduler/utils.ts
@@ -24,7 +24,7 @@ export async function executeMailDelivery(
   const resp = await sendGridSend({
     from: await config.get(ConfigVariable.SendgridFromEmail, em),
     to: toAccount.email,
-    subject: `New notification from ${appName}!`,
+    subject: `New notification from ${appName}`,
     content,
   })
   const className = Object.prototype.toString.call(resp)
@@ -56,15 +56,16 @@ export async function createMailContent(
   const name = appKey === 'viewer' ? appName : 'Studio'
 
   const appAssetStorage = await config.get(ConfigVariable.AppAssetStorage, em)
+  const logosAssetsRoot = `${appAssetStorage}/logos/${appName.toLowerCase()}`
   const appNameAlt = await config.get(ConfigVariable.AppNameAlt, em)
 
   const content = notificationEmailContent({
     ...(await getMessage(em, notification)),
     app: {
       name,
       nameAlt: appNameAlt,
-      logo: `${appAssetStorage}/header-${appKey}.png`,
-      logoAlt: `${appAssetStorage}/footer.png`,
+      logo: `${logosAssetsRoot}/header-${appKey}.png`,
+      logoAlt: `${logosAssetsRoot}/footer.png`,
       homeLink: appRoot,
       notificationLink,
       unsubscribeLink,

diff --git a/src/utils/notification/notificationAvatars.ts b/src/utils/notification/notificationAvatars.ts
@@ -1,7 +1,6 @@
 import { EntityManager } from 'typeorm'
 import { Channel, MemberMetadata } from '../../model'
-
-const PLACEHOLDER = 'https://example.com/avatar.png'
+import { ConfigVariable, config } from '../config'
 
 export const getNotificationAvatar = async (
   em: EntityManager,
@@ -13,7 +12,8 @@ export const getNotificationAvatar = async (
     const avatar = channel?.avatarPhoto
 
     if (!avatar || !avatar.isAccepted || !avatar.resolvedUrls[0]) {
-      return PLACEHOLDER
+      const notificationAssetRoot = await config.get(ConfigVariable.AppAssetStorage, em)
+      return `${notificationAssetRoot}/placeholder/avatar.png`
     }
 
     return avatar.resolvedUrls[0]
@@ -24,7 +24,8 @@ export const getNotificationAvatar = async (
 
   // AvatarObject is not yet supported
   if (!avatar || avatar.isTypeOf === 'AvatarObject') {
-    return PLACEHOLDER
+    const notificationAssetRoot = await config.get(ConfigVariable.AppAssetStorage, em)
+    return `${notificationAssetRoot}/placeholder/avatar.png`
   }
 
   return avatar.avatarUri

diff --git a/src/utils/notification/notificationIcons.ts b/src/utils/notification/notificationIcons.ts
@@ -17,6 +17,6 @@ export const getNotificationIcon = async (
   em: EntityManager,
   icon: NotificationIconType
 ): Promise<string> => {
-  const notificationAssetRoot = await config.get(ConfigVariable.AppRootDomain, em)
-  return `${notificationAssetRoot}/${icon}.png`
+  const notificationAssetRoot = await config.get(ConfigVariable.AppAssetStorage, em)
+  return `${notificationAssetRoot}/icons/${icon}.png`
 }