Merge pull request #13 from pnp/master

Update Content

Author: juliemturner

solutions/LeadsLOBSolution/README.md

@@ -69,6 +69,7 @@ This solution is compatible with SharePoint Online. Teams capability only works
 
 Version|Date|Comments
 -------|----|--------
+1.4.2|Jun 15, 2020|Extended with storing user's configuration in application's personal folder
 1.4.1|May 25, 2020|Switched to using preview Microsoft To Do APIs for creating lead reminders
 1.4.0|May 19, 2020|Extended with the ability to create a reminder in Planner for the specific lead
 1.3.0|May 18, 2020|Extended with Teams messaging extension

solutions/LeadsLOBSolution/webpart/config/package-solution.json

@@ -3,14 +3,18 @@
   "solution": {
     "name": "leads-lob-client-side-solution",
     "id": "2dc4f7fe-cd2e-4f2a-8a92-86acc494e909",
-    "version": "1.4.1.0",
+    "version": "1.4.2.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
     "webApiPermissionRequests": [
       {
         "resource": "Microsoft Graph",
         "scope": "Tasks.ReadWrite"
+      },
+      {
+        "resource": "Microsoft Graph",
+        "scope": "Files.ReadWrite"
       }
     ]
   },

solutions/LeadsLOBSolution/webpart/package.json

@@ -1,7 +1,7 @@
 {
   "name": "leads-lob",
   "main": "lib/index.js",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "private": true,
   "engines": {
     "node": ">=0.10.0"

solutions/LeadsLOBSolution/webpart/src/LeadsSettings.ts

@@ -1,4 +1,4 @@
-import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http";
+import { SPHttpClient, SPHttpClientResponse, MSGraphClient, HttpClient, HttpClientResponse, HttpClientConfiguration } from "@microsoft/sp-http";
 
 export interface ILeadsSettings {
   demo: boolean;
@@ -7,28 +7,60 @@ export interface ILeadsSettings {
 }
 
 export class LeadsSettings {
-  private static settingsStorageKey: string = 'LeadsSettings';
+  private static settingsFileName: string = 'LeadsSettings.json';
+  private static settingsFileUrl: string = `/me/drive/special/approot:/${LeadsSettings.settingsFileName}`;
+  private static graphClient: MSGraphClient;
+  private static httpClient: HttpClient;
+
+  public static initialize(graphHttpClient: MSGraphClient, httpClient: HttpClient): void {
+    this.graphClient = graphHttpClient;
+    this.httpClient = httpClient;
+  }
+
+  public static getSettings(): Promise<ILeadsSettings> {
+    if (!this.graphClient) {
+      throw 'Initialize LeadsSettings before managing settings';
+    }
 
-  public static getSettings(): ILeadsSettings {
     const defaultSettings: ILeadsSettings = {
       demo: true,
       quarterlyOnly: true
     };
 
-    try {
-      const settingsString: string = window.localStorage.getItem(this.settingsStorageKey);
-      if (settingsString) {
-        const settings: ILeadsSettings = JSON.parse(settingsString);
-        return settings;
-      }
-    }
-    catch (e) { }
+    return this.graphClient
+      .api(`${LeadsSettings.settingsFileUrl}[email protected]`)
+      .get()
+      .then((response: { '@microsoft.graph.downloadUrl': string }): Promise<HttpClientResponse> => {
+        return this.httpClient
+          .get(response['@microsoft.graph.downloadUrl'], HttpClient.configurations.v1);
+      })
+      .then((response: HttpClientResponse): Promise<string> => {
+        if (response.ok) {
+          return response.text();
+        }
 
-    return defaultSettings;
+        return Promise.reject(response.statusText);
+      })
+      .then((settingsString: string): Promise<ILeadsSettings> => {
+        try {
+          const settings: ILeadsSettings = JSON.parse(settingsString);
+          return Promise.resolve(settings);
+        }
+        catch (e) {
+          return Promise.resolve(defaultSettings);
+        }
+      }, _ => Promise.resolve(defaultSettings));
   }
 
-  public static setSettings(settings: ILeadsSettings): void {
-    window.localStorage.setItem(this.settingsStorageKey, JSON.stringify(settings));
+  public static setSettings(settings: ILeadsSettings): Promise<void> {
+    if (!this.graphClient) {
+      throw 'Initialize LeadsSettings before managing settings';
+    }
+
+    return this.graphClient
+      .api(`${LeadsSettings.settingsFileUrl}:/content`)
+      .header('content-type', 'text/plain')
+      .put(JSON.stringify(settings));
   }
 
   public static getLeadsApiUrl(spHttpClient: SPHttpClient, siteUrl: string): Promise<string> {

solutions/LeadsLOBSolution/webpart/src/webparts/leads/LeadsWebPart.manifest.json

@@ -12,7 +12,7 @@
   // Components that allow authors to embed arbitrary script code should set this to true.
   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
   "requiresCustomScript": false,
-  "supportedHosts": ["TeamsTab", "SharePointFullPage", "TeamsPersonalApp", "SharePointFullPage"],
+  "supportedHosts": ["TeamsTab", "SharePointFullPage", "TeamsPersonalApp", "SharePointWebPart"],
   "preconfiguredEntries": [{
     "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
     "group": { "default": "LOB" },

solutions/LeadsLOBSolution/webpart/src/webparts/leads/LeadsWebPart.ts

@@ -33,13 +33,20 @@ export default class LeadsWebPart extends BaseClientSideWebPart<ILeadsWebPartPro
   private queryParameters: UrlQueryParameterCollection;
   private view?: LeadView;
   private msGraphClient: MSGraphClient;
+  private settings?: ILeadsSettings;
 
   protected onInit(): Promise<void> {
     return this.context.msGraphClientFactory
       .getClient()
-      .then((client: MSGraphClient): Promise<void> => {
+      .then((client: MSGraphClient): Promise<ILeadsSettings> => {
         this.msGraphClient = client;
 
+        LeadsSettings.initialize(this.msGraphClient, this.context.httpClient);
+        return LeadsSettings.getSettings();
+      })
+      .then((settings: ILeadsSettings): Promise<void> => {
+        this.settings = settings;
+
         if (this.properties.demo) {
           this.needsConfiguration = false;
           return Promise.resolve();
@@ -200,7 +207,7 @@ export default class LeadsWebPart extends BaseClientSideWebPart<ILeadsWebPartPro
             this.render();
           }
           resolve();
-        }, () => resolve());
+        }, _ => resolve());
     });
   }
 
@@ -210,12 +217,9 @@ export default class LeadsWebPart extends BaseClientSideWebPart<ILeadsWebPartPro
     this.view = this.getLeadView();
 
     if (this.context.microsoftTeams && typeof this.view !== 'undefined') {
-      const settings: ILeadsSettings = LeadsSettings.getSettings();
-      if (settings) {
-        props.demo = settings.demo;
-        props.quarterlyOnly = settings.quarterlyOnly;
-        props.region = settings.region;
-      }
+      props.demo = this.settings.demo;
+      props.quarterlyOnly = this.settings.quarterlyOnly;
+      props.region = this.settings.region;
     }
 
     return props;

solutions/LeadsLOBSolution/webpart/src/webparts/leads/components/LeadCardActions/LeadCardActions.module.scss

@@ -23,6 +23,26 @@
         cursor: pointer;
       }
     }
+
+    :global {
+      .icon div {
+        background-repeat: no-repeat;
+        background-size: 16px;
+        background-position: center center;
+      }
+
+      .icon.share div {
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiPjxwYXRoIGQ9Ik0xNDA4IDE1MzZsMTI4LTEyOHYzODRIMFY1MTJoMTI4djExNTJoMTI4MHYtMTI4em0tMTI4LTUxMnEtMTI4IDAtMjUwIDI1dC0yMzcgNzUtMjE3IDEyMS0xOTIgMTYzdi0xMjhxMC0xMjQgMzItMjM4dDkwLTIxNCAxNDAtMTgxIDE4MS0xNDAgMjE0LTkxIDIzOS0zMlYwbDcwNCA3MDQtNzA0IDcwNHYtMzg0em0xMDEtNTEycS01NiAwLTEwNSAxdC05NyA2LTk2IDE4LTEwMiAzNXEtODcgMzYtMTYxIDkyVDY4NyA3OTF0LTk5IDE1NS02MCAxNzZxMTY4LTExMiAzNTktMTY5dDM5My01N2gxMjh2MjAzbDM5NS0zOTUtMzk1LTM5NXYyMDNoLTI3eiIgZmlsbD0iIzMzMzMzMyI+PC9wYXRoPjwvc3ZnPg==");
+      }
+
+      .icon.view div {
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiPjxwYXRoIGQ9Ik0xMDI0IDc2OHE3OSAwIDE0OSAzMHQxMjIgODIgODMgMTIzIDMwIDE0OXEwIDgwLTMwIDE0OXQtODIgMTIyLTEyMyA4My0xNDkgMzBxLTgwIDAtMTQ5LTMwdC0xMjItODItODMtMTIyLTMwLTE1MHEwLTc5IDMwLTE0OXQ4Mi0xMjIgMTIyLTgzIDE1MC0zMHptMCA2NDBxNTMgMCA5OS0yMHQ4Mi01NSA1NS04MSAyMC0xMDBxMC01My0yMC05OXQtNTUtODItODEtNTUtMTAwLTIwcS01MyAwLTk5IDIwdC04MiA1NS01NSA4MS0yMCAxMDBxMCA1MyAyMCA5OXQ1NSA4MiA4MSA1NSAxMDAgMjB6bTAtMTE1MnExNDMgMCAyODQgMzV0MjY2IDEwNSAyMjYgMTcwIDE2NiAyMzRxNDAgODMgNjEgMTcxdDIxIDE4MWgtMTI4cTAtMTE4LTM2LTIyMXQtOTktMTg4LTE1MC0xNTItMTg1LTExMy0yMDktNzAtMjE3LTI0cS0xMDggMC0yMTcgMjR0LTIwOCA3MC0xODYgMTEzLTE0OSAxNTItMTAwIDE4OC0zNiAyMjFIMHEwLTkyIDIxLTE4MHQ2MS0xNzJxNjQtMTMyIDE2NS0yMzN0MjI3LTE3MSAyNjYtMTA0IDI4NC0zNnoiIGZpbGw9IiMzMzMzMzMiPjwvcGF0aD48L3N2Zz4=");
+      }
+
+      .icon.alarmClock div {
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiPjxwYXRoIGQ9Ik0xNDA4IDExNTJ2MTI4SDg5NlY2NDBoMTI4djUxMmgzODR6bTI0MC0xMDI0cTgzIDAgMTU2IDMxdDEyNyA4NiA4NSAxMjcgMzIgMTU2cTAgNTAtMTIgOTd0LTM1IDkxLTU2IDgwLTc0IDY0cTI1IDcxIDM3IDE0NHQxMiAxNDhxMCAxNjItNTYgMzEzdC0xNjMgMjc0bDIwMCAyMDAtOTAgOTAtMjAwLTIwMHEtMTIyIDEwNi0yNzMgMTYydC0zMTQgNTdxLTE2MiAwLTMxMy01NnQtMjc0LTE2M2wtMjAwIDIwMC05MC05MCAyMDAtMjAwcS0xMDYtMTIyLTE2Mi0yNzN0LTU3LTMxNHEwLTc1IDEyLTE0OHQzNy0xNDRxLTQxLTI3LTc0LTY0dC01Ni04MC0zNS05MC0xMi05OHEwLTgzIDMxLTE1NnQ4Ni0xMjcgMTI3LTg1IDE1Ni0zMnE0OSAwIDk3IDEydDkxIDM1IDgwIDU2IDY0IDc0cTcxLTI1IDE0NC0zN3QxNDgtMTJxNzUgMCAxNDggMTJ0MTQ0IDM3cTI3LTQxIDY0LTc0dDgwLTU2IDkwLTM1IDk4LTEyek00MDAgMjU2cS01NiAwLTEwNSAyMXQtODcgNTktNTggODYtMjIgMTA2cTAgNjIgMjYgMTE3dDc1IDk0cTY0LTEyNCAxNjEtMjIxdDIyMS0xNjFxLTM4LTQ4LTkzLTc0dC0xMTgtMjd6bTYyNCAxNjY0cTE1OSAwIDI5OC02MHQyNDQtMTY1IDE2NS0yNDQgNjEtMjk5cTAtMTU5LTYwLTI5OHQtMTY1LTI0NC0yNDQtMTY1LTI5OS02MXEtMTU5IDAtMjk4IDYwVDQ4MiA2MDkgMzE3IDg1M3QtNjEgMjk5cTAgMTU5IDYwIDI5OHQxNjUgMjQ0IDI0NCAxNjUgMjk5IDYxem03OTUtMTE4MXE0OC0zOCA3NC05M3QyNy0xMThxMC01Ni0yMS0xMDV0LTU5LTg3LTg2LTU4LTEwNi0yMnEtNjIgMC0xMTcgMjZ0LTk0IDc1cTEyNCA2NCAyMjEgMTYxdDE2MSAyMjF6IiBmaWxsPSIjMzMzMzMzIj48L3BhdGg+PC9zdmc+");
+      }
+    }
   }
 
   .metrics {
@@ -32,14 +52,7 @@
     justify-content: flex-end;
 
     .metric {
-      margin-left: 8px;      
-
-      :global {
-        .ms-Icon {
-          font-size: 16px;
-          vertical-align: top;
-        }
-      }
+      margin-left: 8px;
 
       &.change {
         &.up {
@@ -57,5 +70,36 @@
         }
       }
     }
+
+    :global {
+      :local(.metric) {
+        &.icon {
+          background-repeat: no-repeat;
+          background-size: 16px;
+          background-position: left center;
+          padding-left: 20px;
+
+          &.circleRing {
+            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiPjxwYXRoIGQ9Ik0xMDI0IDBxMTQxIDAgMjcyIDM2dDI0NCAxMDQgMjA3IDE2MCAxNjEgMjA3IDEwMyAyNDUgMzcgMjcycTAgMTQxLTM2IDI3MnQtMTA0IDI0NC0xNjAgMjA3LTIwNyAxNjEtMjQ1IDEwMy0yNzIgMzdxLTE0MSAwLTI3Mi0zNnQtMjQ0LTEwNC0yMDctMTYwLTE2MS0yMDctMTAzLTI0NS0zNy0yNzJxMC0xNDEgMzYtMjcydDEwNC0yNDQgMTYwLTIwNyAyMDctMTYxVDc1MiAzN3QyNzItMzd6bTAgMTkyMHExMjQgMCAyMzgtMzJ0MjE0LTkwIDE4MS0xNDAgMTQwLTE4MSA5MS0yMTQgMzItMjM5cTAtMTI0LTMyLTIzOHQtOTAtMjE0LTE0MC0xODEtMTgxLTE0MC0yMTQtOTEtMjM5LTMycS0xMjQgMC0yMzggMzJ0LTIxNCA5MC0xODEgMTQwLTE0MCAxODEtOTEgMjE0LTMyIDIzOXEwIDEyNCAzMiAyMzh0OTAgMjE0IDE0MCAxODEgMTgxIDE0MCAyMTQgOTEgMjM5IDMyeiIgZmlsbD0iIzMzMzMzMyI+PC9wYXRoPjwvc3ZnPg==");
+          }
+
+          &.circleFill {
+            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiPjxwYXRoIGQ9Ik0xMDI0IDBxMTQxIDAgMjcyIDM2dDI0NCAxMDQgMjA3IDE2MCAxNjEgMjA3IDEwMyAyNDUgMzcgMjcycTAgMTQxLTM2IDI3MnQtMTA0IDI0NC0xNjAgMjA3LTIwNyAxNjEtMjQ1IDEwMy0yNzIgMzdxLTE0MSAwLTI3Mi0zNnQtMjQ0LTEwNC0yMDctMTYwLTE2MS0yMDctMTAzLTI0NS0zNy0yNzJxMC0xNDEgMzYtMjcydDEwNC0yNDQgMTYwLTIwNyAyMDctMTYxVDc1MiAzN3QyNzItMzd6IiBmaWxsPSIjMzMzMzMzIj48L3BhdGg+PC9zdmc+");
+          }
+
+          &.circleHalfFull {
+            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiPjxwYXRoIGQ9Ik0xMDI0IDEyOHExMjQgMCAyMzggMzJ0MjE0IDkwIDE4MSAxNDAgMTQwIDE4MSA5MSAyMTQgMzIgMjM5cTAgMTI0LTMyIDIzOHQtOTAgMjE0LTE0MCAxODEtMTgxIDE0MC0yMTQgOTEtMjM5IDMycS0xMjQgMC0yMzgtMzJ0LTIxNC05MC0xODEtMTQwLTE0MC0xODEtOTEtMjE0LTMyLTIzOXEwLTEyNCAzMi0yMzh0OTAtMjE0IDE0MC0xODEgMTgxLTE0MCAyMTQtOTEgMjM5LTMyem0wIDEyOHEtMTA2IDAtMjA0IDI3dC0xODMgNzgtMTU2IDEyMC0xMjAgMTU1LTc3IDE4NC0yOCAyMDRoMTUzNnEwLTEwNi0yNy0yMDR0LTc4LTE4My0xMjAtMTU2LTE1NS0xMjAtMTg0LTc3LTIwNC0yOHoiIGZpbGw9IiMzMzMzMzMiPjwvcGF0aD48L3N2Zz4=");
+          }
+
+          &.stockUp {
+            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiPjxwYXRoIGQ9Ik0xMDI0IDM4NGw2NDAgMTI4MEgzODRsNjQwLTEyODB6IiBmaWxsPSIjMTA3YzEwIj48L3BhdGg+PC9zdmc+");
+          }
+          
+          &.stockDown {
+            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiPjxwYXRoIGQ9Ik0zODQgMzg0aDEyODBsLTY0MCAxMjgwTDM4NCAzODR6IiBmaWxsPSIjZTgxMTIzIj48L3BhdGg+PC9zdmc+");
+          }
+        }
+      }
+    }
   }
 }

solutions/LeadsLOBSolution/webpart/src/webparts/leads/components/LeadCardActions/LeadCardActions.tsx

@@ -1,28 +1,27 @@
 import * as React from 'react';
 import { ILeadCardActionsProps } from ".";
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
 import styles from './LeadCardActions.module.scss';
 
 export class LeadCardActions extends React.Component<ILeadCardActionsProps, {}> {
   private getPercentCompleteIconName(percentComplete: number): string {
     switch (percentComplete) {
       case 0:
-        return 'CircleRing';
+        return 'circleRing';
       case 100:
-        return 'CircleFill';
+        return 'circleFill';
       default:
-        return 'CircleHalfFull';
+        return 'circleHalfFull';
     }
   }
 
   private getChangeIconName(change: number): string {
     if (change >= 0) {
-      return 'StockUp';
+      return 'stockUp';
     }
     else {
-      return 'StockDown';
+      return 'stockDown';
     }
   }
 
@@ -36,11 +35,11 @@ export class LeadCardActions extends React.Component<ILeadCardActionsProps, {}>
             <IconButton {...a} />
           </div>)}
         <div className={styles.metrics}>
-          <div className={css('ms-DocumentCardActions-views', styles.metric, styles.change, change >= 0 ? styles.up : styles.down)}>
-            <Icon iconName={this.getChangeIconName(change)} /> {(change >= 0 ? '+' : '')}{change}%
+          <div className={css('ms-DocumentCardActions-views icon', styles.metric, styles.change, change >= 0 ? styles.up : styles.down, this.getChangeIconName(change))}>
+            {(change >= 0 ? '+' : '')}{change}%
           </div>
-          <div className={css('ms-DocumentCardActions-views', styles.metric)}>
-            <Icon iconName={this.getPercentCompleteIconName(percentComplete)} /> {percentComplete}%
+          <div className={css('ms-DocumentCardActions-views icon', styles.metric, this.getPercentCompleteIconName(percentComplete))}>
+            {percentComplete}%
           </div>
         </div>
       </div>

solutions/LeadsLOBSolution/webpart/src/webparts/leads/components/Leads/Leads.module.scss

@@ -47,6 +47,12 @@
         position: absolute;
         right: 8px;
         margin-top: 8px;
+        width: 16px;
+        height: 16px;
+        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDQ4IDIwNDgiPjxwYXRoIGQ9Ik05NjAgMTkyMHEtMTMzIDAtMjU1LTM0dC0yMzAtOTYtMTk0LTE1MC0xNTAtMTk1LTk3LTIyOVQwIDk2MHEwLTEzMyAzNC0yNTV0OTYtMjMwIDE1MC0xOTQgMTk1LTE1MCAyMjktOTdUOTYwIDBxMTMzIDAgMjU1IDM0dDIzMCA5NiAxOTQgMTUwIDE1MCAxOTUgOTcgMjI5IDM0IDI1NnEwIDEzMy0zNCAyNTV0LTk2IDIzMC0xNTAgMTk0LTE5NSAxNTAtMjI5IDk3LTI1NiAzNHptMC0xNzkycS0xMTUgMC0yMjEgMzB0LTE5OCA4NC0xNjkgMTMwLTEzMCAxNjgtODQgMTk5LTMwIDIyMXEwIDExNCAzMCAyMjB0ODQgMTk5IDEzMCAxNjkgMTY4IDEzMCAxOTkgODQgMjIxIDMwcTExNCAwIDIyMC0zMHQxOTktODQgMTY5LTEzMCAxMzAtMTY4IDg0LTE5OSAzMC0yMjFxMC0xMTQtMzAtMjIwdC04NC0xOTktMTMwLTE2OS0xNjgtMTMwLTE5OS04NC0yMjEtMzB6bS02NCA2NDBoMTI4djY0MEg4OTZWNzY4em0wLTI1NmgxMjh2MTI4SDg5NlY1MTJ6IiBmaWxsPSIjYTgwMDAwIj48L3BhdGg+PC9zdmc+");
+        background-size: 16px;
+        background-repeat: no-repeat;
+        background-position: center center;
       }
 
       :global {

solutions/LeadsLOBSolution/webpart/src/webparts/leads/components/Leads/Leads.tsx

@@ -330,7 +330,7 @@ export class Leads extends React.Component<ILeadsProps, ILeadsState> {
                       <div>
                         <LeadCardPreview previewItems={this.getCommentsForCard(l.comments.reverse())} />
                         {l.requiresAttention === true &&
-                          <Icon iconName='Info' className={styles.urgent} />}
+                          <div className={styles.urgent} />}
                         <DocumentCardLocation location={l.account} locationHref='#' />
                         <DocumentCardTitle title={l.title} shouldTruncate={true} />
                         <div className={styles.titleSecondary}><DocumentCardTitle title={l.description!} shouldTruncate={true} /></div>
@@ -353,17 +353,17 @@ export class Leads extends React.Component<ILeadsProps, ILeadsState> {
                           actions={
                             [
                               {
-                                iconProps: { iconName: 'Share' },
+                                className: 'icon share',
                                 onClick: this.leadShared,
                                 ariaLabel: 'Share Lead'
                               },
                               {
-                                iconProps: { iconName: 'View' },
+                                className: 'icon view',
                                 onClick: this.leadFollowed,
                                 ariaLabel: 'Follow Lead'
                               },
                               {
-                                iconProps: { iconName: 'AlarmClock' },
+                                className: 'icon alarmClock',
                                 onClick: this.showCreateLeadReminderDialog,
                                 ariaLabel: 'Remind me about this lead',
                                 'data-leadid': l.id