Update notification text

src/list/NotificationList.ts

@@ -120,16 +120,65 @@
     super();
     this.valueKey = 'target_url';
     this.renderOption = (notification: Notification): TemplateResult => {
-      const styles: StyleInfo = {
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'flex-start',
-      };
+      let icon = null;
+      let body = null;
+      const color = '#333';
 
-      if (!notification.is_seen) {
-        styles['fontWeight'] = '400';
+      if (notification.type === 'incident:started') {
+        if (notification.incident.type === 'org:flagged') {
+          icon = Icon.incidents;
+          body =
+            'Your workspace was flagged, please contact support for assistance.';
+        } else if (notification.incident.type === 'org:suspended') {
+          icon = Icon.incidents;
+          body =
+            'Your workspace was suspended, please contact support for assistance.';
+        } else if (notification.incident.type === 'channel:disconnected') {
+          icon = Icon.channel;
+          body = 'Your android channel is not connected';
+        } else if (notification.incident.type === 'webhooks:unhealthy') {
+          icon = Icon.webhook;
+          body = 'Your webhook calls are not working properly.';
+        }
+      } else if (notification.type === 'import:finished') {
+        if (notification.import.type === 'contact') {
+          icon = Icon.contact_import;
+          body = `Imported ${notification.import.num_records.toLocaleString()} contacts`;
+        }
+      } else if (notification.type === 'export:finished') {
+        if (notification.export.type === 'contact') {
+          icon = Icon.contact_export;
+          body = 'Exported contacts';
+        } else if (notification.export.type === 'message') {
+          icon = Icon.message_export;
+          body = 'Exported messages';
+        }
+      } else if (notification.type === 'tickets:activity') {
+        icon = Icon.tickets;
+        body = 'New ticket activity';
+      } else if (notification.type === 'tickets:opened') {
+        icon = Icon.tickets;
+        body = 'New unassigned ticket';
       }
-      return html` ${getNotification(notification)} `;
+      return html`<div
+        style="color:${color};display:flex;align-items:flex-start;flex-direction:row;font-weight:${notification.is_seen
+          ? 300
+          : 400}"
+      >
+        ${icon
+          ? html`<div style="margin-right:0.6em">
+              <temba-icon name="${icon}"></temba-icon>
+            </div>`
+          : null}
+        <div style="display:flex;flex-direction:column">
+          <div style="line-height:1.1em">${body}</div>
+          <temba-date
+            style="font-size:80%"
+            value=${notification.created_on}
+            display="duration"
+          ></temba-date>
+        </div>
+      </div>`;
     };
   }
 

src/vectoricon/index.ts

@@ -1,5 +1,5 @@
 // for cache busting we dynamically generate a fingerprint, use yarn svg to update
-export const SVG_FINGERPRINT = '66c82f285562aa77cfca6afe6800468e';
+export const SVG_FINGERPRINT = '963a11882da2ee8b18c878e911d8eaf1';
 
 // only icons below are included in the sprite sheet
 export enum Icon {
@@ -75,8 +75,8 @@ export enum Icon {
   contact = 'user-01',
   contact_archived = 'archive',
   contact_blocked = 'message-x-square',
-  contact_export = 'users-down',
-  contact_import = 'users-up',
+  contact_export = 'download-cloud-01',
+  contact_import = 'upload-cloud-01',
   contact_stopped = 'slash-octagon',
   contact_updated = 'user-edit',
   contacts = 'user-01',
@@ -126,6 +126,7 @@ export enum Icon {
   menu = 'menu-01',
   menu_collapse = 'chevron-left-double',
   message = 'message-square-02',
+  message_export = 'download-cloud-01',
   messages = 'message-square-02',
   missing = 'maximize-02',
   missed_call = 'phone-x',