From 26c6d0d58346f9c78cff3db678b5adeb82d1e341 Mon Sep 17 00:00:00 2001
From: Emiliano Magliocca <emiliano.magliocca@outlook.com>
Date: Tue, 14 Apr 2020 11:18:06 +0300
Subject: [PATCH 1/3] Replace Segoe UI and Fabric icons with FontAwesome

---
 src/App.tsx                                |  6 ++--
 src/common/const.ts                        | 39 +++++++++++++++++++++-
 src/common/services/discord.ts             |  2 +-
 src/components/ProjectCard.tsx             | 36 +++++++++++---------
 src/components/ProjectReviewPanel.tsx      |  6 ++--
 src/components/PromiseVisualizer.tsx       |  8 +++--
 src/components/forms/CreateProjectForm.tsx | 12 ++++---
 src/index.tsx                              |  5 ---
 src/views/Home.tsx                         | 16 +++------
 src/views/Projects.tsx                     |  6 ++--
 src/views/dashboard.tsx                    | 18 +++++-----
 11 files changed, 97 insertions(+), 57 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b20254d5..b4d95e90 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,7 +12,8 @@ import { Stack } from "office-ui-fabric-react";
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab, faDiscord, faMedium, faGithub } from '@fortawesome/free-brands-svg-icons';
-import { fas, faGlobe, faArrowCircleDown } from '@fortawesome/free-solid-svg-icons';
+import { fas, faGlobe, faArrowCircleDown, faPlusSquare, faCode, faRobot, 
+  faList, faHammer, faFrown, faBoxOpen, faRocket, faTimes, faCheckCircle, faInbox, faUserClock } from '@fortawesome/free-solid-svg-icons';
 
 import { withRouter } from 'react-router-dom';
 import { NotFound } from "./views/NotFound";
@@ -21,7 +22,8 @@ import { createMarkdownPage } from './components/markdown-loader'
 import { prerenderedLoader } from './components/prerender-loader'
 
 library.add(fab, faDiscord, faMedium, faGithub);
-library.add(fab, fas, faGlobe, faArrowCircleDown, faDiscord, faMedium, faGithub);
+library.add(fas, faGlobe, faArrowCircleDown, faPlusSquare, faCode, faRobot, faList, faHammer, 
+  faFrown, faBoxOpen, faRocket, faTimes, faCheckCircle, faInbox, faUserClock);
 
 const AppHeaderWithRouter = withRouter(props => <AppHeader {...props} />);
 const PrivacyPolicy = prerenderedLoader(() => createMarkdownPage('/privacy-policy.md'));
diff --git a/src/common/const.ts b/src/common/const.ts
index c2c8464a..dd6e1b3c 100644
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -1,4 +1,5 @@
 import { isLocalhost } from "./helpers";
+import { CSSProperties } from "react";
 
 export const Links = {
   thisSiteRepo: "https://github.com/UWPCommunity/uwpcommunity.github.io/",
@@ -51,4 +52,40 @@ export const MicrosoftStoreAppCategories = [
 
 export function getBackendHost(): string {
   return isLocalhost ? "localhost:5000" : "uwpcommunity-site-backend.herokuapp.com"
-}
\ No newline at end of file
+}
+
+export const FaIcon16Style: CSSProperties = {
+  color: "black",
+  height: "16px",
+  width: "16px"
+};
+
+export const FaIcon25Style: CSSProperties = {
+  color: "black",
+  height: "25px",
+  width: "25px"
+};
+
+export const FaIcon35Style: CSSProperties = {
+  color: "black",
+  height: "35px",
+  width: "35px"
+};
+
+export const FaIcon38Style: CSSProperties = {
+  color: "black",
+  height: "38px",
+  width: "38px"
+};
+
+export const FaIcon55Style: CSSProperties = {
+  color: "black",
+  height: "55px",
+  width: "55px"
+};
+
+export const FaIcon65Style: CSSProperties = {
+  color: "black",
+  height: "65px",
+  width: "65px"
+};
\ No newline at end of file
diff --git a/src/common/services/discord.ts b/src/common/services/discord.ts
index 1815b659..7861d093 100644
--- a/src/common/services/discord.ts
+++ b/src/common/services/discord.ts
@@ -1,5 +1,5 @@
 import { getBackendHost } from "../const";
-import { isLocalhost, fetchBackend } from "../helpers";
+import { fetchBackend } from "../helpers";
 
 export const uwpCommunityGuildId = 372137812037730304;
 export const developerRoleId = 372142246625017871;
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index 0f9cdbee..65240aa0 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -1,10 +1,12 @@
 import { IProject, DeleteProject, ModifyProject, IModifyProjectsRequestBody, IProjectCollaborator } from "../common/services/projects";
-import { DocumentCard, ImageFit, DocumentCardDetails, DocumentCardTitle, Text, Stack, DocumentCardActions, IButtonProps, PrimaryButton, Dialog, FontIcon, DefaultButton, DialogType, TooltipHost, TooltipDelay, Modal, Image, Link } from "office-ui-fabric-react";
+import { DocumentCard, ImageFit, DocumentCardDetails, DocumentCardTitle, Text, Stack, DocumentCardActions, IButtonProps, PrimaryButton, Dialog, DefaultButton, DialogType, TooltipHost, TooltipDelay, Modal, Image, Link } from "office-ui-fabric-react";
 import * as React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { EditProjectDetailsForm } from "./forms/EditProjectDetailsForm";
 import { IDiscordUser, GetDiscordUser, AssignUserRole } from "../common/services/discord";
 import styled from "styled-components";
+import { FaIcon16Style, FaIcon25Style } from "../common/const";
+import { CSSProperties } from "react";
 
 enum ButtonType {
   Github, Download, External
@@ -14,11 +16,6 @@ interface ICustomButtonRenderProps {
   type: ButtonType;
   link: string;
 }
-const FaIconStyle: React.CSSProperties = {
-  color: "black",
-  height: "25px",
-  width: "25px"
-};
 
 const PointerOnHover = styled.span`
   &:hover {
@@ -26,6 +23,13 @@ const PointerOnHover = styled.span`
   }
 `;
 
+const FaIconStyle: CSSProperties = {
+  color: "black",
+  height: "26px",
+  width: "26px",
+  padding: "0px 5px"
+};
+
 export interface IProjectCard {
   project: IProject;
   editable?: boolean;
@@ -97,14 +101,14 @@ export const ProjectCard = (props: IProjectCard) => {
     switch (buttonData.type.valueOf()) {
       case ButtonType.Download:
         if (buttonData.link && buttonData.link.includes("microsoft.com")) {
-          return <FontAwesomeIcon style={FaIconStyle} icon={["fab", "microsoft"]} />
+          return <FontAwesomeIcon style={FaIcon25Style} icon={["fab", "microsoft"]} />
         } else {
-          return <FontAwesomeIcon style={FaIconStyle} icon="arrow-circle-down" />
+          return <FontAwesomeIcon style={FaIcon25Style} icon="arrow-circle-down" />
         }
       case ButtonType.External:
-        return <FontAwesomeIcon style={FaIconStyle} icon={["fas", "globe"]} />
+        return <FontAwesomeIcon style={FaIcon25Style} icon={["fas", "globe"]} />
       case ButtonType.Github:
-        return <FontAwesomeIcon style={FaIconStyle} icon={["fab", "github"]} />
+        return <FontAwesomeIcon style={FaIcon25Style} icon={["fab", "github"]} />
       default: return null;
     }
   }
@@ -172,8 +176,8 @@ export const ProjectCard = (props: IProjectCard) => {
                     <Text> | </Text>
                     <Text variant="smallPlus">{projectOwner.username}#{projectOwner.discriminator}</Text>
                   </>) : <>No owner data</>}
-                <Link style={{ margin: 10 }} onClick={() => setShowProjectDetailsModal(false)}>
-                  <FontIcon style={{ fontSize: 16, color: "black" }} iconName="ChromeClose" />
+                <Link style={{ margin: 10 }} onClick={() => setShowProjectDetailsModal(false)}>                           
+                  <FontAwesomeIcon style={FaIcon16Style} icon={["fas", "times"]} />   
                 </Link>
               </Stack>
             </Stack>
@@ -275,13 +279,13 @@ export const ProjectCard = (props: IProjectCard) => {
       <DocumentCardDetails>
         <Stack horizontal tokens={{ padding: 5 }} verticalAlign="center">
           {ViewModel.needsManualReview ?
-            <TooltipHost content="Waiting for approval" delay={TooltipDelay.zero}>
-              <FontIcon style={{ fontSize: 26, padding: "0px 5px" }} iconName="Manufacturing" />
+            <TooltipHost content="Waiting for approval" delay={TooltipDelay.zero}>              
+              <FontAwesomeIcon style={FaIconStyle} icon={["fas", "hammer"]} />
             </TooltipHost>
             : <></>}
           {(ViewModel.awaitingLaunchApproval && props.modOptions) || ViewModel.launchYear ?
-            <TooltipHost content={ViewModel.launchYear ? `Launch ${ViewModel.launchYear} participant` : "Awaiting Launch approval"} delay={TooltipDelay.zero}>
-              <FontIcon style={{ fontSize: 24, padding: "0px 5px" }} iconName="Rocket" />
+            <TooltipHost content={ViewModel.launchYear ? `Launch ${ViewModel.launchYear} participant` : "Awaiting Launch approval"} delay={TooltipDelay.zero}>   
+              <FontAwesomeIcon style={FaIconStyle} icon={["fas", "rocket"]} />
             </TooltipHost>
             : <></>}
           <DocumentCardTitle styles={{ root: { padding: "5px 5px", height: "auto", fontWeight: 600 } }} title={ViewModel.appName} />
diff --git a/src/components/ProjectReviewPanel.tsx b/src/components/ProjectReviewPanel.tsx
index 358577e4..99c5077c 100644
--- a/src/components/ProjectReviewPanel.tsx
+++ b/src/components/ProjectReviewPanel.tsx
@@ -1,8 +1,10 @@
 import * as React from "react";
 import { IProject, GetAllProjects_Unfiltered } from "../common/services/projects";
-import { Stack, Text, FontIcon } from "office-ui-fabric-react";
+import { Stack, Text } from "office-ui-fabric-react";
 import { ProjectCard } from "./ProjectCard";
 import { PromiseVisualizer } from "./PromiseVisualizer";
+import { FaIcon55Style } from "../common/const";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface IProjectReviewPanelState {
     promise: Promise<IProject[]>;
@@ -38,7 +40,7 @@ export const ProjectReviewPanel = (props: IProjectReviewPanelProps) => {
                     <ProjectCard modOptions editable key={i} project={project} onProjectRemove={(project) => setState({ ...state, data: state.data && state.data.filter(p => p.appName !== project.appName) })} />
                 )) : (
                         <Stack horizontalAlign="center" verticalAlign="center" tokens={{ padding: 20 }}>
-                            <FontIcon iconName="sad" style={{ fontSize: 55 }}></FontIcon>
+                            <FontAwesomeIcon style={FaIcon55Style} icon={["fas", "frown"]} />
                             <Text variant="xLarge">{(() => {
                                 switch (props.type) {
                                     case ReviewType.Launch: return "No submissions";
diff --git a/src/components/PromiseVisualizer.tsx b/src/components/PromiseVisualizer.tsx
index 928da20e..a40a21f8 100644
--- a/src/components/PromiseVisualizer.tsx
+++ b/src/components/PromiseVisualizer.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
-import { Stack, Spinner, FontIcon, Text } from "office-ui-fabric-react";
+import { Stack, Spinner, Text } from "office-ui-fabric-react";
 import { usePromise } from "../common/helpers";
+import { FaIcon55Style } from "../common/const";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface IPromiseVisualizerProps<T> {
     loadingMessage?: string
@@ -24,8 +26,8 @@ export function PromiseVisualizer<T>(props: IPromiseVisualizerProps<T>) {
 
     if (promiseState.error) {
         return (
-            <Stack horizontalAlign="center" style={props.errorStyle}>
-                <FontIcon iconName="sad" style={{ fontSize: 55 }}></FontIcon>
+            <Stack horizontalAlign="center" style={props.errorStyle}>                
+                <FontAwesomeIcon style={FaIcon55Style} icon={["fas", "frown"]} />
                 <Text variant="xLarge">Something went wrong</Text>
             </Stack>
         )
diff --git a/src/components/forms/CreateProjectForm.tsx b/src/components/forms/CreateProjectForm.tsx
index 3884a03c..ad19cfeb 100644
--- a/src/components/forms/CreateProjectForm.tsx
+++ b/src/components/forms/CreateProjectForm.tsx
@@ -1,8 +1,10 @@
 import { EditProjectDetailsForm, IEditProjectDetailsFormProps } from './EditProjectDetailsForm';
 import React from "react";
 import { IProject } from '../../common/services/projects';
-import { Stack, Text, PrimaryButton, DefaultButton, DirectionalHint, Link, TeachingBubble, TextField, FontIcon } from 'office-ui-fabric-react';
+import { Stack, Text, PrimaryButton, DefaultButton, DirectionalHint, Link, TeachingBubble, TextField } from 'office-ui-fabric-react';
 import { fetchBackend } from '../../common/helpers';
+import { FaIcon25Style, FaIcon38Style } from '../../common/const';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export interface ICreateProjectFormProps extends IEditProjectDetailsFormProps {
 
@@ -40,11 +42,11 @@ export const CreateProjectForm = (props: ICreateProjectFormProps) => {
                 <Stack tokens={{ childrenGap: 10, padding: 5 }}>
                     <Text variant="large">Before we begin...</Text>
                     <Stack horizontal tokens={{ childrenGap: 5 }}>
-                        <FontIcon iconName="ReceiptCheck" style={{ fontSize: 25 }} />
+                        <FontAwesomeIcon style={FaIcon25Style} icon={["fas", "check-circle"]} />
                         <Text variant="medium">Is your app public and already in the store?</Text>
                     </Stack>
                     <Stack horizontal tokens={{ childrenGap: 5 }}>
-                        <FontIcon iconName="ReceiptCheck" style={{ fontSize: 25 }} />
+                        <FontAwesomeIcon style={FaIcon25Style} icon={["fas", "check-circle"]} />
                         <Text variant="medium">Do you have a "Publisher support" email listed on your apps' MS Store page?</Text>
                     </Stack>
                     <Stack style={{ marginTop: 20 }} horizontal tokens={{ childrenGap: 15 }} horizontalAlign="space-evenly">
@@ -177,7 +179,7 @@ export const ProjectCodeVerifier = (props: IProjectCodeVerifierProps) => {
                         case VerficationState.WaitingForCode:
                             return <Stack tokens={{ childrenGap: 10 }}>
                                 <Stack grow horizontal tokens={{ childrenGap: 5 }} verticalAlign="end">
-                                    <FontIcon iconName="InboxCheck" style={{ fontSize: 24 }} />
+                                    <FontAwesomeIcon style={FaIcon25Style} icon={["fas", "inbox"]} />
                                     <Text variant="xLarge">Check your inbox / junk mail</Text>
                                 </Stack>
                                 <Text variant="mediumPlus">Enter the code we sent you</Text>
@@ -188,7 +190,7 @@ export const ProjectCodeVerifier = (props: IProjectCodeVerifierProps) => {
                             </Stack>;
                         case VerficationState.Verified:
                             return <Stack horizontalAlign="center" tokens={{ childrenGap: 15, padding: 10 }}>
-                                <FontIcon style={{ fontSize: 38 }} iconName="ReminderPerson" />
+                                <FontAwesomeIcon style={FaIcon38Style} icon={["fas", "user-clock"]} />
                                 <Text variant="xxLarge">Identity verified!</Text>
                                 <div style={{ display: "none" }}>
                                     {setTimeout(() => props.onSuccess({
diff --git a/src/index.tsx b/src/index.tsx
index afbf9c73..79ca6100 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,12 +1,7 @@
 import React from "react";
 import { hydrate, render } from "react-dom";
-import { initializeIcons } from "@uifabric/icons";
 import {App} from './App';
 
-// Initializes the UI Fabric icons that we can use
-// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons
-initializeIcons();
-
 const rootElement = document.getElementById("root");
 if (rootElement && rootElement.hasChildNodes()) {
   hydrate(<App />, rootElement);
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index 6c98eb64..9bbc8c38 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -1,17 +1,11 @@
-import React, { CSSProperties } from "react";
+import React from "react";
 import { Stack, Text, PrimaryButton, Image, ImageFit, ImageCoverStyle } from "office-ui-fabric-react";
-import { Links, Images } from "../common/const";
+import { Links, Images, FaIcon65Style } from "../common/const";
 import styled from 'styled-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import HoverBox from '../components/HoverBox';
 import { Depths } from "@uifabric/fluent-theme/lib/fluent/FluentDepths";
 
-const FaIconStyle: CSSProperties = {
-  color: "black",
-  height: "65px",
-  width: "65px"
-};
-
 const LinkCard = styled.section`
     font-family: Segoe UI, sans-serif;
     padding: 7px;
@@ -78,7 +72,7 @@ export const Home: React.StatelessComponent = () => {
                     <Text>Discuss the platform with other enthusiasts, get help as a developer, and interact with the devs of your favorite apps</Text>
                     <Link href={Links.discordServerInvite} target="_blank"> Join our discord server </Link>
                   </Stack>
-                  <FontAwesomeIcon style={FaIconStyle} icon={["fab", "discord"]} />
+                  <FontAwesomeIcon style={FaIcon65Style} icon={["fab", "discord"]} />
                 </Stack>
 
               </Stack>
@@ -94,7 +88,7 @@ export const Home: React.StatelessComponent = () => {
                     <Text>Many of our projects are open source, so others can learn or build with them</Text>
                     <Link href={Links.githubOrganization} target="_blank">See our open source projects</Link>
                   </Stack>
-                  <FontAwesomeIcon style={FaIconStyle} icon={["fab", "github"]} />
+                  <FontAwesomeIcon style={FaIcon65Style} icon={["fab", "github"]} />
                 </Stack>
               </Stack>
             </LinkCard>
@@ -109,7 +103,7 @@ export const Home: React.StatelessComponent = () => {
                     <Text>As a community of talented developers, each year we Launch our projects together in an annual event known as <code>Launch</code></Text>
                     <Link href={Links.launch2019Medium} target="_blank">Read about Launch 2019</Link>
                   </Stack>
-                  <FontAwesomeIcon style={FaIconStyle} icon={["fab", "medium"]} />
+                  <FontAwesomeIcon style={FaIcon65Style} icon={["fab", "medium"]} />
                 </Stack>
               </Stack>
             </LinkCard>
diff --git a/src/views/Projects.tsx b/src/views/Projects.tsx
index 3883f6ae..8ebd9b67 100644
--- a/src/views/Projects.tsx
+++ b/src/views/Projects.tsx
@@ -1,8 +1,10 @@
 import * as React from "react";
-import { Stack, Text, FontIcon } from "office-ui-fabric-react";
+import { Stack, Text } from "office-ui-fabric-react";
 import { GetAllProjects, IProject } from "../common/services/projects";
 import { ProjectCard } from "../components/ProjectCard";
 import { PromiseVisualizer } from "../components/PromiseVisualizer";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FaIcon55Style } from "../common/const";
 
 export const Projects: React.StatelessComponent = () => {
   const [state, setState] = React.useState<IProject[]>();
@@ -16,7 +18,7 @@ export const Projects: React.StatelessComponent = () => {
             <ProjectCard key={i} onProjectRemove={project => setState(state.filter(p => p.appName !== project.appName))} project={project}></ProjectCard>
           )) : (
               <Stack horizontalAlign="center" >
-                <FontIcon iconName="sad" style={{ fontSize: 55 }}></FontIcon>
+                <FontAwesomeIcon style={FaIcon55Style} icon={["fas", "frown"]} />
                 <Text variant="xLarge">No projects, yet</Text>
               </Stack>
             )
diff --git a/src/views/dashboard.tsx b/src/views/dashboard.tsx
index ab6d78cf..f590bf4b 100644
--- a/src/views/dashboard.tsx
+++ b/src/views/dashboard.tsx
@@ -1,4 +1,4 @@
-import { Text, Stack, Persona, PersonaSize, Icon, Link, Dialog, DialogType, DefaultButton, PrimaryButton, FontIcon, PivotItem, Pivot } from "office-ui-fabric-react";
+import { Text, Stack, Persona, PersonaSize, Link, Dialog, DialogType, DefaultButton, PrimaryButton, PivotItem, Pivot } from "office-ui-fabric-react";
 import React from "react";
 import { GetUserAvatar, GetCurrentDiscordUser, IDiscordUser, discordAuthEndpoint, GetUserRoles, AssignUserRole } from "../common/services/discord";
 
@@ -8,6 +8,8 @@ import { IProject } from "../common/services/projects";
 import { ProjectCard } from "../components/ProjectCard";
 import { GetUserProjects } from "../common/services/users";
 import { ProjectReviewPanel, ReviewType } from "../components/ProjectReviewPanel";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FaIcon35Style, FaIcon55Style } from "../common/const";
 
 const DashboardHeader = styled.header`
 background: linear-gradient(to bottom,#005799 0,#0076d1);
@@ -76,8 +78,6 @@ export const Dashboard = () => {
     }
     `;
 
-    const SectionTitleIconFontSize = 34;
-
     const DashboardColumnFiller = styled.div`
     @media only screen and (max-width: 807px) {
         display: none;
@@ -95,21 +95,21 @@ export const Dashboard = () => {
                         {roles.includes("Developer") ?
                             <Link style={{ color: "white", width: "150px", textDecoration: "none" }} onClick={() => setAppRegistrationShown(true)}>
                                 <Stack verticalAlign="end" horizontalAlign="center" tokens={{ childrenGap: 5 }}>
-                                    <Icon style={{ fontSize: 35, userSelect: "none" }} iconName="AppIconDefaultAdd"></Icon>
+                                    <FontAwesomeIcon style={FaIcon35Style} icon={["fas", "plus-square"]} />
                                     <Text variant="mediumPlus">Register an app</Text>
                                 </Stack>
                             </Link>
                             :
                             <Link style={{ color: "white", width: "150px", textDecoration: "none" }} onClick={() => setDevRegistrationShown(true)}>
                                 <Stack verticalAlign="end" horizontalAlign="center" tokens={{ childrenGap: 5 }}>
-                                    <Icon style={{ fontSize: 35, userSelect: "none" }} iconName="code"></Icon>
+                                    <FontAwesomeIcon style={FaIcon35Style} icon={["fas", "code"]} />
                                     <Text variant="mediumPlus">Become a Developer</Text>
                                 </Stack>
                             </Link>
                         }
                         <Link style={{ color: "gray", width: "150px", textDecoration: "none" }} to="/dashboard/registerapp">
                             <Stack verticalAlign="end" horizontalAlign="center" tokens={{ childrenGap: 5 }}>
-                                <Icon style={{ fontSize: 35, color: "gray", userSelect: "none" }} iconName="Robot"></Icon>
+                                <FontAwesomeIcon style={FaIcon35Style} icon={["fas", "robot"]} />
                                 <Text style={{ color: "gray" }} variant="mediumPlus">Manage your roles</Text>
                             </Stack>
                         </Link>
@@ -125,7 +125,7 @@ export const Dashboard = () => {
                     roles.includes("Developer") ?
                         <Stack style={{ margin: 50 }} horizontalAlign="center" tokens={{ childrenGap: 10 }}>
                             <Stack horizontal tokens={{ childrenGap: 15 }}>
-                                <Icon iconName="AppIconDefaultList" style={{ fontSize: SectionTitleIconFontSize }} />
+                                <FontAwesomeIcon style={FaIcon35Style} icon={["fas", "list"]} />
                                 <Text variant="xLarge" style={{ fontWeight: 600 }}>My apps</Text>
                             </Stack>
 
@@ -139,7 +139,7 @@ export const Dashboard = () => {
                         </Stack>
                         :
                         <Stack horizontalAlign="center">
-                            <Icon iconName="BuildDefinition" style={{ fontSize: 55 }} />
+                            <FontAwesomeIcon style={FaIcon55Style} icon={["fas", "hammer"]} />
                             <Text variant="xLarge" style={{ fontWeight: 600 }}>Under construction</Text>
                             <Text variant="large">For now, this area is primarily for developers. Check back later for more</Text>
                         </Stack>}
@@ -158,7 +158,7 @@ export const Dashboard = () => {
                     type: DialogType.largeHeader, title: "Become a developer"
                 }}>
                     <Stack tokens={{ childrenGap: 10 }} horizontalAlign="center">
-                        <FontIcon iconName="GiftboxOpen" style={{ fontSize: 56 }} />
+                        <FontAwesomeIcon style={FaIcon55Style} icon={["fas", "box-open"]} />
                         <Text variant="xLarge">Let's build something, together</Text>
                         <Text variant="medium">Everyone, from seasoned veterans to enthusiastic novices can become a developer with just a click</Text>
                         <Text variant="medium">You'll be given the Developer role in the UWP Community Discord server, and become eligible for app services exclusive to devs</Text>

From d6f6088c752db2d56a7d025a66203e6ca7d649ca Mon Sep 17 00:00:00 2001
From: Arlo Godfrey <arlo.godfrey@outlook.com>
Date: Mon, 20 Apr 2020 21:21:57 -0500
Subject: [PATCH 2/3] Partially revert "Replace Segoe UI and Fabric icons with
 FontAwesome"

This reverts commit 26c6d0d58346f9c78cff3db678b5adeb82d1e341.
---
 src/common/const.ts                        | 39 +---------------------
 src/common/services/discord.ts             |  2 +-
 src/components/ProjectCard.tsx             | 36 +++++++++-----------
 src/components/ProjectReviewPanel.tsx      |  6 ++--
 src/components/PromiseVisualizer.tsx       |  8 ++---
 src/components/forms/CreateProjectForm.tsx | 12 +++----
 src/index.tsx                              |  5 +++
 src/views/Home.tsx                         | 16 ++++++---
 src/views/Projects.tsx                     |  6 ++--
 src/views/dashboard.tsx                    | 18 +++++-----
 10 files changed, 55 insertions(+), 93 deletions(-)

diff --git a/src/common/const.ts b/src/common/const.ts
index dd6e1b3c..c2c8464a 100644
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -1,5 +1,4 @@
 import { isLocalhost } from "./helpers";
-import { CSSProperties } from "react";
 
 export const Links = {
   thisSiteRepo: "https://github.com/UWPCommunity/uwpcommunity.github.io/",
@@ -52,40 +51,4 @@ export const MicrosoftStoreAppCategories = [
 
 export function getBackendHost(): string {
   return isLocalhost ? "localhost:5000" : "uwpcommunity-site-backend.herokuapp.com"
-}
-
-export const FaIcon16Style: CSSProperties = {
-  color: "black",
-  height: "16px",
-  width: "16px"
-};
-
-export const FaIcon25Style: CSSProperties = {
-  color: "black",
-  height: "25px",
-  width: "25px"
-};
-
-export const FaIcon35Style: CSSProperties = {
-  color: "black",
-  height: "35px",
-  width: "35px"
-};
-
-export const FaIcon38Style: CSSProperties = {
-  color: "black",
-  height: "38px",
-  width: "38px"
-};
-
-export const FaIcon55Style: CSSProperties = {
-  color: "black",
-  height: "55px",
-  width: "55px"
-};
-
-export const FaIcon65Style: CSSProperties = {
-  color: "black",
-  height: "65px",
-  width: "65px"
-};
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/common/services/discord.ts b/src/common/services/discord.ts
index 7861d093..1815b659 100644
--- a/src/common/services/discord.ts
+++ b/src/common/services/discord.ts
@@ -1,5 +1,5 @@
 import { getBackendHost } from "../const";
-import { fetchBackend } from "../helpers";
+import { isLocalhost, fetchBackend } from "../helpers";
 
 export const uwpCommunityGuildId = 372137812037730304;
 export const developerRoleId = 372142246625017871;
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index 65240aa0..0f9cdbee 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -1,12 +1,10 @@
 import { IProject, DeleteProject, ModifyProject, IModifyProjectsRequestBody, IProjectCollaborator } from "../common/services/projects";
-import { DocumentCard, ImageFit, DocumentCardDetails, DocumentCardTitle, Text, Stack, DocumentCardActions, IButtonProps, PrimaryButton, Dialog, DefaultButton, DialogType, TooltipHost, TooltipDelay, Modal, Image, Link } from "office-ui-fabric-react";
+import { DocumentCard, ImageFit, DocumentCardDetails, DocumentCardTitle, Text, Stack, DocumentCardActions, IButtonProps, PrimaryButton, Dialog, FontIcon, DefaultButton, DialogType, TooltipHost, TooltipDelay, Modal, Image, Link } from "office-ui-fabric-react";
 import * as React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { EditProjectDetailsForm } from "./forms/EditProjectDetailsForm";
 import { IDiscordUser, GetDiscordUser, AssignUserRole } from "../common/services/discord";
 import styled from "styled-components";
-import { FaIcon16Style, FaIcon25Style } from "../common/const";
-import { CSSProperties } from "react";
 
 enum ButtonType {
   Github, Download, External
@@ -16,6 +14,11 @@ interface ICustomButtonRenderProps {
   type: ButtonType;
   link: string;
 }
+const FaIconStyle: React.CSSProperties = {
+  color: "black",
+  height: "25px",
+  width: "25px"
+};
 
 const PointerOnHover = styled.span`
   &:hover {
@@ -23,13 +26,6 @@ const PointerOnHover = styled.span`
   }
 `;
 
-const FaIconStyle: CSSProperties = {
-  color: "black",
-  height: "26px",
-  width: "26px",
-  padding: "0px 5px"
-};
-
 export interface IProjectCard {
   project: IProject;
   editable?: boolean;
@@ -101,14 +97,14 @@ export const ProjectCard = (props: IProjectCard) => {
     switch (buttonData.type.valueOf()) {
       case ButtonType.Download:
         if (buttonData.link && buttonData.link.includes("microsoft.com")) {
-          return <FontAwesomeIcon style={FaIcon25Style} icon={["fab", "microsoft"]} />
+          return <FontAwesomeIcon style={FaIconStyle} icon={["fab", "microsoft"]} />
         } else {
-          return <FontAwesomeIcon style={FaIcon25Style} icon="arrow-circle-down" />
+          return <FontAwesomeIcon style={FaIconStyle} icon="arrow-circle-down" />
         }
       case ButtonType.External:
-        return <FontAwesomeIcon style={FaIcon25Style} icon={["fas", "globe"]} />
+        return <FontAwesomeIcon style={FaIconStyle} icon={["fas", "globe"]} />
       case ButtonType.Github:
-        return <FontAwesomeIcon style={FaIcon25Style} icon={["fab", "github"]} />
+        return <FontAwesomeIcon style={FaIconStyle} icon={["fab", "github"]} />
       default: return null;
     }
   }
@@ -176,8 +172,8 @@ export const ProjectCard = (props: IProjectCard) => {
                     <Text> | </Text>
                     <Text variant="smallPlus">{projectOwner.username}#{projectOwner.discriminator}</Text>
                   </>) : <>No owner data</>}
-                <Link style={{ margin: 10 }} onClick={() => setShowProjectDetailsModal(false)}>                           
-                  <FontAwesomeIcon style={FaIcon16Style} icon={["fas", "times"]} />   
+                <Link style={{ margin: 10 }} onClick={() => setShowProjectDetailsModal(false)}>
+                  <FontIcon style={{ fontSize: 16, color: "black" }} iconName="ChromeClose" />
                 </Link>
               </Stack>
             </Stack>
@@ -279,13 +275,13 @@ export const ProjectCard = (props: IProjectCard) => {
       <DocumentCardDetails>
         <Stack horizontal tokens={{ padding: 5 }} verticalAlign="center">
           {ViewModel.needsManualReview ?
-            <TooltipHost content="Waiting for approval" delay={TooltipDelay.zero}>              
-              <FontAwesomeIcon style={FaIconStyle} icon={["fas", "hammer"]} />
+            <TooltipHost content="Waiting for approval" delay={TooltipDelay.zero}>
+              <FontIcon style={{ fontSize: 26, padding: "0px 5px" }} iconName="Manufacturing" />
             </TooltipHost>
             : <></>}
           {(ViewModel.awaitingLaunchApproval && props.modOptions) || ViewModel.launchYear ?
-            <TooltipHost content={ViewModel.launchYear ? `Launch ${ViewModel.launchYear} participant` : "Awaiting Launch approval"} delay={TooltipDelay.zero}>   
-              <FontAwesomeIcon style={FaIconStyle} icon={["fas", "rocket"]} />
+            <TooltipHost content={ViewModel.launchYear ? `Launch ${ViewModel.launchYear} participant` : "Awaiting Launch approval"} delay={TooltipDelay.zero}>
+              <FontIcon style={{ fontSize: 24, padding: "0px 5px" }} iconName="Rocket" />
             </TooltipHost>
             : <></>}
           <DocumentCardTitle styles={{ root: { padding: "5px 5px", height: "auto", fontWeight: 600 } }} title={ViewModel.appName} />
diff --git a/src/components/ProjectReviewPanel.tsx b/src/components/ProjectReviewPanel.tsx
index 99c5077c..358577e4 100644
--- a/src/components/ProjectReviewPanel.tsx
+++ b/src/components/ProjectReviewPanel.tsx
@@ -1,10 +1,8 @@
 import * as React from "react";
 import { IProject, GetAllProjects_Unfiltered } from "../common/services/projects";
-import { Stack, Text } from "office-ui-fabric-react";
+import { Stack, Text, FontIcon } from "office-ui-fabric-react";
 import { ProjectCard } from "./ProjectCard";
 import { PromiseVisualizer } from "./PromiseVisualizer";
-import { FaIcon55Style } from "../common/const";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface IProjectReviewPanelState {
     promise: Promise<IProject[]>;
@@ -40,7 +38,7 @@ export const ProjectReviewPanel = (props: IProjectReviewPanelProps) => {
                     <ProjectCard modOptions editable key={i} project={project} onProjectRemove={(project) => setState({ ...state, data: state.data && state.data.filter(p => p.appName !== project.appName) })} />
                 )) : (
                         <Stack horizontalAlign="center" verticalAlign="center" tokens={{ padding: 20 }}>
-                            <FontAwesomeIcon style={FaIcon55Style} icon={["fas", "frown"]} />
+                            <FontIcon iconName="sad" style={{ fontSize: 55 }}></FontIcon>
                             <Text variant="xLarge">{(() => {
                                 switch (props.type) {
                                     case ReviewType.Launch: return "No submissions";
diff --git a/src/components/PromiseVisualizer.tsx b/src/components/PromiseVisualizer.tsx
index a40a21f8..928da20e 100644
--- a/src/components/PromiseVisualizer.tsx
+++ b/src/components/PromiseVisualizer.tsx
@@ -1,8 +1,6 @@
 import * as React from "react";
-import { Stack, Spinner, Text } from "office-ui-fabric-react";
+import { Stack, Spinner, FontIcon, Text } from "office-ui-fabric-react";
 import { usePromise } from "../common/helpers";
-import { FaIcon55Style } from "../common/const";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 interface IPromiseVisualizerProps<T> {
     loadingMessage?: string
@@ -26,8 +24,8 @@ export function PromiseVisualizer<T>(props: IPromiseVisualizerProps<T>) {
 
     if (promiseState.error) {
         return (
-            <Stack horizontalAlign="center" style={props.errorStyle}>                
-                <FontAwesomeIcon style={FaIcon55Style} icon={["fas", "frown"]} />
+            <Stack horizontalAlign="center" style={props.errorStyle}>
+                <FontIcon iconName="sad" style={{ fontSize: 55 }}></FontIcon>
                 <Text variant="xLarge">Something went wrong</Text>
             </Stack>
         )
diff --git a/src/components/forms/CreateProjectForm.tsx b/src/components/forms/CreateProjectForm.tsx
index ad19cfeb..3884a03c 100644
--- a/src/components/forms/CreateProjectForm.tsx
+++ b/src/components/forms/CreateProjectForm.tsx
@@ -1,10 +1,8 @@
 import { EditProjectDetailsForm, IEditProjectDetailsFormProps } from './EditProjectDetailsForm';
 import React from "react";
 import { IProject } from '../../common/services/projects';
-import { Stack, Text, PrimaryButton, DefaultButton, DirectionalHint, Link, TeachingBubble, TextField } from 'office-ui-fabric-react';
+import { Stack, Text, PrimaryButton, DefaultButton, DirectionalHint, Link, TeachingBubble, TextField, FontIcon } from 'office-ui-fabric-react';
 import { fetchBackend } from '../../common/helpers';
-import { FaIcon25Style, FaIcon38Style } from '../../common/const';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export interface ICreateProjectFormProps extends IEditProjectDetailsFormProps {
 
@@ -42,11 +40,11 @@ export const CreateProjectForm = (props: ICreateProjectFormProps) => {
                 <Stack tokens={{ childrenGap: 10, padding: 5 }}>
                     <Text variant="large">Before we begin...</Text>
                     <Stack horizontal tokens={{ childrenGap: 5 }}>
-                        <FontAwesomeIcon style={FaIcon25Style} icon={["fas", "check-circle"]} />
+                        <FontIcon iconName="ReceiptCheck" style={{ fontSize: 25 }} />
                         <Text variant="medium">Is your app public and already in the store?</Text>
                     </Stack>
                     <Stack horizontal tokens={{ childrenGap: 5 }}>
-                        <FontAwesomeIcon style={FaIcon25Style} icon={["fas", "check-circle"]} />
+                        <FontIcon iconName="ReceiptCheck" style={{ fontSize: 25 }} />
                         <Text variant="medium">Do you have a "Publisher support" email listed on your apps' MS Store page?</Text>
                     </Stack>
                     <Stack style={{ marginTop: 20 }} horizontal tokens={{ childrenGap: 15 }} horizontalAlign="space-evenly">
@@ -179,7 +177,7 @@ export const ProjectCodeVerifier = (props: IProjectCodeVerifierProps) => {
                         case VerficationState.WaitingForCode:
                             return <Stack tokens={{ childrenGap: 10 }}>
                                 <Stack grow horizontal tokens={{ childrenGap: 5 }} verticalAlign="end">
-                                    <FontAwesomeIcon style={FaIcon25Style} icon={["fas", "inbox"]} />
+                                    <FontIcon iconName="InboxCheck" style={{ fontSize: 24 }} />
                                     <Text variant="xLarge">Check your inbox / junk mail</Text>
                                 </Stack>
                                 <Text variant="mediumPlus">Enter the code we sent you</Text>
@@ -190,7 +188,7 @@ export const ProjectCodeVerifier = (props: IProjectCodeVerifierProps) => {
                             </Stack>;
                         case VerficationState.Verified:
                             return <Stack horizontalAlign="center" tokens={{ childrenGap: 15, padding: 10 }}>
-                                <FontAwesomeIcon style={FaIcon38Style} icon={["fas", "user-clock"]} />
+                                <FontIcon style={{ fontSize: 38 }} iconName="ReminderPerson" />
                                 <Text variant="xxLarge">Identity verified!</Text>
                                 <div style={{ display: "none" }}>
                                     {setTimeout(() => props.onSuccess({
diff --git a/src/index.tsx b/src/index.tsx
index 79ca6100..afbf9c73 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,12 @@
 import React from "react";
 import { hydrate, render } from "react-dom";
+import { initializeIcons } from "@uifabric/icons";
 import {App} from './App';
 
+// Initializes the UI Fabric icons that we can use
+// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons
+initializeIcons();
+
 const rootElement = document.getElementById("root");
 if (rootElement && rootElement.hasChildNodes()) {
   hydrate(<App />, rootElement);
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index 9bbc8c38..6c98eb64 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -1,11 +1,17 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { Stack, Text, PrimaryButton, Image, ImageFit, ImageCoverStyle } from "office-ui-fabric-react";
-import { Links, Images, FaIcon65Style } from "../common/const";
+import { Links, Images } from "../common/const";
 import styled from 'styled-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import HoverBox from '../components/HoverBox';
 import { Depths } from "@uifabric/fluent-theme/lib/fluent/FluentDepths";
 
+const FaIconStyle: CSSProperties = {
+  color: "black",
+  height: "65px",
+  width: "65px"
+};
+
 const LinkCard = styled.section`
     font-family: Segoe UI, sans-serif;
     padding: 7px;
@@ -72,7 +78,7 @@ export const Home: React.StatelessComponent = () => {
                     <Text>Discuss the platform with other enthusiasts, get help as a developer, and interact with the devs of your favorite apps</Text>
                     <Link href={Links.discordServerInvite} target="_blank"> Join our discord server </Link>
                   </Stack>
-                  <FontAwesomeIcon style={FaIcon65Style} icon={["fab", "discord"]} />
+                  <FontAwesomeIcon style={FaIconStyle} icon={["fab", "discord"]} />
                 </Stack>
 
               </Stack>
@@ -88,7 +94,7 @@ export const Home: React.StatelessComponent = () => {
                     <Text>Many of our projects are open source, so others can learn or build with them</Text>
                     <Link href={Links.githubOrganization} target="_blank">See our open source projects</Link>
                   </Stack>
-                  <FontAwesomeIcon style={FaIcon65Style} icon={["fab", "github"]} />
+                  <FontAwesomeIcon style={FaIconStyle} icon={["fab", "github"]} />
                 </Stack>
               </Stack>
             </LinkCard>
@@ -103,7 +109,7 @@ export const Home: React.StatelessComponent = () => {
                     <Text>As a community of talented developers, each year we Launch our projects together in an annual event known as <code>Launch</code></Text>
                     <Link href={Links.launch2019Medium} target="_blank">Read about Launch 2019</Link>
                   </Stack>
-                  <FontAwesomeIcon style={FaIcon65Style} icon={["fab", "medium"]} />
+                  <FontAwesomeIcon style={FaIconStyle} icon={["fab", "medium"]} />
                 </Stack>
               </Stack>
             </LinkCard>
diff --git a/src/views/Projects.tsx b/src/views/Projects.tsx
index 8ebd9b67..3883f6ae 100644
--- a/src/views/Projects.tsx
+++ b/src/views/Projects.tsx
@@ -1,10 +1,8 @@
 import * as React from "react";
-import { Stack, Text } from "office-ui-fabric-react";
+import { Stack, Text, FontIcon } from "office-ui-fabric-react";
 import { GetAllProjects, IProject } from "../common/services/projects";
 import { ProjectCard } from "../components/ProjectCard";
 import { PromiseVisualizer } from "../components/PromiseVisualizer";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { FaIcon55Style } from "../common/const";
 
 export const Projects: React.StatelessComponent = () => {
   const [state, setState] = React.useState<IProject[]>();
@@ -18,7 +16,7 @@ export const Projects: React.StatelessComponent = () => {
             <ProjectCard key={i} onProjectRemove={project => setState(state.filter(p => p.appName !== project.appName))} project={project}></ProjectCard>
           )) : (
               <Stack horizontalAlign="center" >
-                <FontAwesomeIcon style={FaIcon55Style} icon={["fas", "frown"]} />
+                <FontIcon iconName="sad" style={{ fontSize: 55 }}></FontIcon>
                 <Text variant="xLarge">No projects, yet</Text>
               </Stack>
             )
diff --git a/src/views/dashboard.tsx b/src/views/dashboard.tsx
index f590bf4b..ab6d78cf 100644
--- a/src/views/dashboard.tsx
+++ b/src/views/dashboard.tsx
@@ -1,4 +1,4 @@
-import { Text, Stack, Persona, PersonaSize, Link, Dialog, DialogType, DefaultButton, PrimaryButton, PivotItem, Pivot } from "office-ui-fabric-react";
+import { Text, Stack, Persona, PersonaSize, Icon, Link, Dialog, DialogType, DefaultButton, PrimaryButton, FontIcon, PivotItem, Pivot } from "office-ui-fabric-react";
 import React from "react";
 import { GetUserAvatar, GetCurrentDiscordUser, IDiscordUser, discordAuthEndpoint, GetUserRoles, AssignUserRole } from "../common/services/discord";
 
@@ -8,8 +8,6 @@ import { IProject } from "../common/services/projects";
 import { ProjectCard } from "../components/ProjectCard";
 import { GetUserProjects } from "../common/services/users";
 import { ProjectReviewPanel, ReviewType } from "../components/ProjectReviewPanel";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { FaIcon35Style, FaIcon55Style } from "../common/const";
 
 const DashboardHeader = styled.header`
 background: linear-gradient(to bottom,#005799 0,#0076d1);
@@ -78,6 +76,8 @@ export const Dashboard = () => {
     }
     `;
 
+    const SectionTitleIconFontSize = 34;
+
     const DashboardColumnFiller = styled.div`
     @media only screen and (max-width: 807px) {
         display: none;
@@ -95,21 +95,21 @@ export const Dashboard = () => {
                         {roles.includes("Developer") ?
                             <Link style={{ color: "white", width: "150px", textDecoration: "none" }} onClick={() => setAppRegistrationShown(true)}>
                                 <Stack verticalAlign="end" horizontalAlign="center" tokens={{ childrenGap: 5 }}>
-                                    <FontAwesomeIcon style={FaIcon35Style} icon={["fas", "plus-square"]} />
+                                    <Icon style={{ fontSize: 35, userSelect: "none" }} iconName="AppIconDefaultAdd"></Icon>
                                     <Text variant="mediumPlus">Register an app</Text>
                                 </Stack>
                             </Link>
                             :
                             <Link style={{ color: "white", width: "150px", textDecoration: "none" }} onClick={() => setDevRegistrationShown(true)}>
                                 <Stack verticalAlign="end" horizontalAlign="center" tokens={{ childrenGap: 5 }}>
-                                    <FontAwesomeIcon style={FaIcon35Style} icon={["fas", "code"]} />
+                                    <Icon style={{ fontSize: 35, userSelect: "none" }} iconName="code"></Icon>
                                     <Text variant="mediumPlus">Become a Developer</Text>
                                 </Stack>
                             </Link>
                         }
                         <Link style={{ color: "gray", width: "150px", textDecoration: "none" }} to="/dashboard/registerapp">
                             <Stack verticalAlign="end" horizontalAlign="center" tokens={{ childrenGap: 5 }}>
-                                <FontAwesomeIcon style={FaIcon35Style} icon={["fas", "robot"]} />
+                                <Icon style={{ fontSize: 35, color: "gray", userSelect: "none" }} iconName="Robot"></Icon>
                                 <Text style={{ color: "gray" }} variant="mediumPlus">Manage your roles</Text>
                             </Stack>
                         </Link>
@@ -125,7 +125,7 @@ export const Dashboard = () => {
                     roles.includes("Developer") ?
                         <Stack style={{ margin: 50 }} horizontalAlign="center" tokens={{ childrenGap: 10 }}>
                             <Stack horizontal tokens={{ childrenGap: 15 }}>
-                                <FontAwesomeIcon style={FaIcon35Style} icon={["fas", "list"]} />
+                                <Icon iconName="AppIconDefaultList" style={{ fontSize: SectionTitleIconFontSize }} />
                                 <Text variant="xLarge" style={{ fontWeight: 600 }}>My apps</Text>
                             </Stack>
 
@@ -139,7 +139,7 @@ export const Dashboard = () => {
                         </Stack>
                         :
                         <Stack horizontalAlign="center">
-                            <FontAwesomeIcon style={FaIcon55Style} icon={["fas", "hammer"]} />
+                            <Icon iconName="BuildDefinition" style={{ fontSize: 55 }} />
                             <Text variant="xLarge" style={{ fontWeight: 600 }}>Under construction</Text>
                             <Text variant="large">For now, this area is primarily for developers. Check back later for more</Text>
                         </Stack>}
@@ -158,7 +158,7 @@ export const Dashboard = () => {
                     type: DialogType.largeHeader, title: "Become a developer"
                 }}>
                     <Stack tokens={{ childrenGap: 10 }} horizontalAlign="center">
-                        <FontAwesomeIcon style={FaIcon55Style} icon={["fas", "box-open"]} />
+                        <FontIcon iconName="GiftboxOpen" style={{ fontSize: 56 }} />
                         <Text variant="xLarge">Let's build something, together</Text>
                         <Text variant="medium">Everyone, from seasoned veterans to enthusiastic novices can become a developer with just a click</Text>
                         <Text variant="medium">You'll be given the Developer role in the UWP Community Discord server, and become eligible for app services exclusive to devs</Text>

From 792c6d352de160fdcf7d2208e12697df5a716405 Mon Sep 17 00:00:00 2001
From: Arlo Godfrey <arlo.godfrey@outlook.com>
Date: Mon, 20 Apr 2020 22:11:36 -0500
Subject: [PATCH 3/3] Cleaned up icon implementation and console warnings

---
 src/App.tsx                    | 36 ++++++++++++++++++++++++++++++----
 src/common/services/discord.ts |  2 +-
 src/components/ProjectCard.tsx |  8 ++++----
 src/index.tsx                  |  5 -----
 src/views/Home.tsx             |  2 +-
 src/views/Launch.tsx           |  6 +++---
 src/views/dashboard.tsx        |  6 +++---
 7 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index b4d95e90..debc25d3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,18 +12,46 @@ import { Stack } from "office-ui-fabric-react";
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab, faDiscord, faMedium, faGithub } from '@fortawesome/free-brands-svg-icons';
-import { fas, faGlobe, faArrowCircleDown, faPlusSquare, faCode, faRobot, 
-  faList, faHammer, faFrown, faBoxOpen, faRocket, faTimes, faCheckCircle, faInbox, faUserClock } from '@fortawesome/free-solid-svg-icons';
+import {
+  fas, faGlobe, faArrowCircleDown, faPlusSquare, faCode, faRobot,
+  faList, faHammer, faFrown, faBoxOpen, faRocket, faTimes, faCheckCircle, faInbox, faUserClock, faTrashAlt
+} from '@fortawesome/free-solid-svg-icons';
 
 import { withRouter } from 'react-router-dom';
 import { NotFound } from "./views/NotFound";
+import { registerIcons } from '@uifabric/styling';
 
 import { createMarkdownPage } from './components/markdown-loader'
 import { prerenderedLoader } from './components/prerender-loader'
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 library.add(fab, faDiscord, faMedium, faGithub);
-library.add(fas, faGlobe, faArrowCircleDown, faPlusSquare, faCode, faRobot, faList, faHammer, 
-  faFrown, faBoxOpen, faRocket, faTimes, faCheckCircle, faInbox, faUserClock);
+library.add(fas, faGlobe, faArrowCircleDown, faPlusSquare, faCode, faRobot, faList, faHammer,
+  faFrown, faBoxOpen, faRocket, faTimes, faCheckCircle, faInbox, faUserClock, faTrashAlt);
+
+registerIcons({
+  icons: {
+    'Rocket': <FontAwesomeIcon icon={['fas', 'rocket']} />,
+    'Robot': <FontAwesomeIcon icon={['fas', 'robot']} />,
+    'sad': <FontAwesomeIcon icon={['fas', 'frown']} />,
+    'ChromeClose': <FontAwesomeIcon icon={['fas', 'times']} />,
+    'Manufacturing': <FontAwesomeIcon icon={['fas', 'hammer']} />,
+    'ReceiptCheck': <FontAwesomeIcon icon={['fas', 'check-circle']} />,
+    'InboxCheck': <FontAwesomeIcon icon={['fas', 'inbox']} />,
+    'ReminderPerson': <FontAwesomeIcon icon={['fas', 'user-clock']} />,
+    'AppIconDefaultAdd': <FontAwesomeIcon icon={['fas', 'plus-square']} />,
+    'code': <FontAwesomeIcon icon={['fas', 'code']} />,
+    'AppIconDefaultList': <FontAwesomeIcon icon={['fas', 'list']} />,
+    'BuildDefinition': <FontAwesomeIcon icon={['fas', 'hammer']} />,
+    'GiftboxOpen': <FontAwesomeIcon icon={['fas', 'box-open']} />,
+    'delete': <FontAwesomeIcon icon={['fas', 'trash-alt']} />,
+    'edit': <FontAwesomeIcon icon={['fas', 'edit']} />,
+    'signout': <FontAwesomeIcon icon={['fas', 'sign-out-alt']} />,
+    'editcontact': <FontAwesomeIcon icon={['fas', 'user-edit']} />,
+    'viewdashboard': <FontAwesomeIcon icon={['fas', 'columns']} />,
+    'chevrondown': <FontAwesomeIcon icon={['fas', 'chevron-down']} />
+  },
+});
 
 const AppHeaderWithRouter = withRouter(props => <AppHeader {...props} />);
 const PrivacyPolicy = prerenderedLoader(() => createMarkdownPage('/privacy-policy.md'));
diff --git a/src/common/services/discord.ts b/src/common/services/discord.ts
index 1815b659..7861d093 100644
--- a/src/common/services/discord.ts
+++ b/src/common/services/discord.ts
@@ -1,5 +1,5 @@
 import { getBackendHost } from "../const";
-import { isLocalhost, fetchBackend } from "../helpers";
+import { fetchBackend } from "../helpers";
 
 export const uwpCommunityGuildId = 372137812037730304;
 export const developerRoleId = 372142246625017871;
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index 0f9cdbee..6cf6b1ae 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -276,12 +276,12 @@ export const ProjectCard = (props: IProjectCard) => {
         <Stack horizontal tokens={{ padding: 5 }} verticalAlign="center">
           {ViewModel.needsManualReview ?
             <TooltipHost content="Waiting for approval" delay={TooltipDelay.zero}>
-              <FontIcon style={{ fontSize: 26, padding: "0px 5px" }} iconName="Manufacturing" />
+              <FontIcon style={{ fontSize: 20, padding: "0px 5px" }} iconName="Manufacturing" />
             </TooltipHost>
             : <></>}
           {(ViewModel.awaitingLaunchApproval && props.modOptions) || ViewModel.launchYear ?
             <TooltipHost content={ViewModel.launchYear ? `Launch ${ViewModel.launchYear} participant` : "Awaiting Launch approval"} delay={TooltipDelay.zero}>
-              <FontIcon style={{ fontSize: 24, padding: "0px 5px" }} iconName="Rocket" />
+              <FontIcon style={{ fontSize: 20, padding: "0px 5px" }} iconName="Rocket" />
             </TooltipHost>
             : <></>}
           <DocumentCardTitle styles={{ root: { padding: "5px 5px", height: "auto", fontWeight: 600 } }} title={ViewModel.appName} />
@@ -291,8 +291,8 @@ export const ProjectCard = (props: IProjectCard) => {
         </Stack>
         <Stack horizontal tokens={{ childrenGap: 5, padding: 5 }} verticalAlign="center">
           {props.editable !== undefined ? (<>
-            <PrimaryButton iconProps={{ iconName: "edit", style: { fontSize: 18 } }} style={{ minWidth: 45, padding: 0 }} onClick={() => { setShowEditDialog(true) }} />
-            <PrimaryButton iconProps={{ iconName: "delete", style: { fontSize: 18 } }} style={{ minWidth: 45, padding: 0 }} onClick={() => { setShowDeleteProjectDialog(true) }} />
+            <PrimaryButton iconProps={{ iconName: "edit", style: { fontSize: 14 } }} style={{ minWidth: 45, padding: 0 }} onClick={() => { setShowEditDialog(true) }} />
+            <PrimaryButton iconProps={{ iconName: "delete", style: { fontSize: 14 } }} style={{ minWidth: 45, padding: 0 }} onClick={() => { setShowDeleteProjectDialog(true) }} />
           </>) : <></>}
 
           {props.modOptions !== undefined && ViewModel.needsManualReview ? (<>
diff --git a/src/index.tsx b/src/index.tsx
index afbf9c73..79ca6100 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,12 +1,7 @@
 import React from "react";
 import { hydrate, render } from "react-dom";
-import { initializeIcons } from "@uifabric/icons";
 import {App} from './App';
 
-// Initializes the UI Fabric icons that we can use
-// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons
-initializeIcons();
-
 const rootElement = document.getElementById("root");
 if (rootElement && rootElement.hasChildNodes()) {
   hydrate(<App />, rootElement);
diff --git a/src/views/Home.tsx b/src/views/Home.tsx
index 6c98eb64..bc762db9 100644
--- a/src/views/Home.tsx
+++ b/src/views/Home.tsx
@@ -56,7 +56,7 @@ export const Home: React.StatelessComponent = () => {
       <Stack wrap horizontal horizontalAlign="space-around" tokens={{ childrenGap: 25 }}>
 
         <LargeCard>
-          <Stack horizontal wrap maxWidth="1400px" horizontalAlign="space-evenly">
+          <Stack horizontal wrap tokens={{ maxWidth: 1400 }} horizontalAlign="space-evenly">
             <Image className="heroImage" coverStyle={ImageCoverStyle.landscape} imageFit={ImageFit.cover} src={Images.launchAppsHero} />
 
             <Stack style={{ margin: 30 }} tokens={{ childrenGap: 5 }} verticalAlign="center">
diff --git a/src/views/Launch.tsx b/src/views/Launch.tsx
index cee193e2..1c92b696 100644
--- a/src/views/Launch.tsx
+++ b/src/views/Launch.tsx
@@ -21,7 +21,7 @@ const PaddedProjectHolder = styled.div`
 
 export const Launch = () => {
     const [launchProjects, setLaunchProjects] = React.useState<IProject[]>();
-    const [user, setUser] = React.useState<IDiscordUser>();
+    const [, setUser] = React.useState<IDiscordUser>();
 
     React.useEffect(()=>{
         (async () => {
@@ -31,7 +31,7 @@ export const Launch = () => {
 
     return (
         <Stack tokens={{childrenGap: 25}} horizontalAlign="center">
-            <Stack horizontal wrap style={{ boxShadow: Depths.depth16 }} maxWidth="1200px">
+            <Stack horizontal wrap style={{ boxShadow: Depths.depth16 }} tokens={{maxWidth: 1200}}>
                 <Image width="100%" height="400px" src={Images.launchAppsHero} coverStyle={ImageCoverStyle.landscape} imageFit={ImageFit.cover} />
                 <Stack style={{margin: "20px 50px 20px 50px"}}>
 
@@ -48,7 +48,7 @@ export const Launch = () => {
                     <Stack horizontalAlign="center" tokens={{ childrenGap: 15 }}>
 
                         <Text variant="xLarge">Launch 2020 Participants</Text>
-                        <Stack horizontal wrap horizontalAlign="center" maxWidth={1800} tokens={{ childrenGap: 25 }}>
+                        <Stack horizontal wrap horizontalAlign="center" tokens={{ childrenGap: 25, maxWidth: 1800 }}>
                             {launchProjects && launchProjects.length && launchProjects.map((project, i) => 
                                 <ProjectCard key={i} project={project} />
                                 )}
diff --git a/src/views/dashboard.tsx b/src/views/dashboard.tsx
index ab6d78cf..84aa7206 100644
--- a/src/views/dashboard.tsx
+++ b/src/views/dashboard.tsx
@@ -76,7 +76,7 @@ export const Dashboard = () => {
     }
     `;
 
-    const SectionTitleIconFontSize = 34;
+    const SectionTitleIconFontSize = 24;
 
     const DashboardColumnFiller = styled.div`
     @media only screen and (max-width: 807px) {
@@ -132,14 +132,14 @@ export const Dashboard = () => {
                             <Stack horizontal wrap tokens={{ childrenGap: 15 }}>
                                 {
                                     (apps && apps.length > 0 ? apps.map(project =>
-                                        <ProjectCard onProjectRemove={(project) => setApps(apps.filter(p => p.appName !== project.appName))} editable={true} project={project}></ProjectCard>
+                                        <ProjectCard key={project.appName} onProjectRemove={(project) => setApps(apps.filter(p => p.appName !== project.appName))} editable={true} project={project}></ProjectCard>
                                     ) : <Text variant="large">You don't have any registered apps</Text>)
                                 }
                             </Stack>
                         </Stack>
                         :
                         <Stack horizontalAlign="center">
-                            <Icon iconName="BuildDefinition" style={{ fontSize: 55 }} />
+                            <Icon iconName="BuildDefinition" style={{ fontSize: SectionTitleIconFontSize }} />
                             <Text variant="xLarge" style={{ fontWeight: 600 }}>Under construction</Text>
                             <Text variant="large">For now, this area is primarily for developers. Check back later for more</Text>
                         </Stack>}