Replace Segoe UI and Fabric icons with FontAwesome

src/App.tsx

@@ -12,16 +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 } 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(fab, fas, faGlobe, faArrowCircleDown, faDiscord, faMedium, faGithub);
+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'));

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;

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 ? (<>

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);

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">

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} />
                                 )}

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>}