From c9a278fb0f0db35818422e2604cdbfc6fe8c98a8 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 12 Nov 2020 15:18:35 -0800
Subject: [PATCH] Use predefined icons for Facebook family apps

Summary:
Ideally, we want to fetch app Icons from the device, but for now, we can at least for Facebook owned apps we can use a hardcoded set of icons, which probably even looks better.

For ` Lite` apps, the colors of the icon and background are reversed, which makes both variations recognizable.

Reviewed By: jknoxville

Differential Revision: D24920161

fbshipit-source-id: 5220093fb3a443ae535faa4c346a2029de9cbbd5
---
 .../sandy-chrome/appinspect/AppSelector.tsx   | 32 +++++++++++++++----
 desktop/app/src/ui/components/colors.tsx      | 13 ++++++++
 desktop/static/icons.json                     | 18 +++++++++++
 3 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx b/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
index a2960586b..41a7daffb 100644
--- a/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
+++ b/desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx
@@ -15,7 +15,7 @@ import {
   WindowsOutlined,
   CaretDownOutlined,
 } from '@ant-design/icons';
-import {Layout, styled} from '../../ui';
+import {Glyph, Layout, styled} from '../../ui';
 import {theme} from 'flipper-plugin';
 import {batch} from 'react-redux';
 import {Dispatch, useDispatch, useStore} from '../../utils/useStore';
@@ -29,6 +29,7 @@ import BaseDevice, {OS} from '../../devices/BaseDevice';
 import {getColorByApp} from '../../chrome/mainsidebar/sidebarUtils';
 import Client from '../../Client';
 import {State} from '../../reducers';
+import {brandIcons} from '../../ui/components/colors';
 
 const {Text} = Typography;
 
@@ -113,14 +114,33 @@ const AppInspectButton = styled(Button)({
   },
 });
 
-const AppIcon = styled.div<{appname?: string}>(({appname}) => ({
+function AppIcon({appname}: {appname?: string}) {
+  const brandName = appname?.replace(/ Lite$/, '');
+  const color = brandName
+    ? getColorByApp(brandName)
+    : theme.backgroundTransparentHover;
+  const icon = brandName && (brandIcons as any)[brandName];
+  return (
+    <AppIconContainer
+      style={{background: brandName != appname ? 'white' : color}}>
+      {icon && (
+        <Glyph
+          name={icon}
+          size={24}
+          variant="outline"
+          color={brandName != appname ? color : 'white'}
+        />
+      )}
+    </AppIconContainer>
+  );
+}
+
+const AppIconContainer = styled.div({
   borderRadius: 4,
   width: 36,
   height: 36,
-  background: appname
-    ? getColorByApp(appname)
-    : theme.backgroundTransparentHover,
-}));
+  padding: 6,
+});
 
 function computeEntries(
   devices: BaseDevice[],
diff --git a/desktop/app/src/ui/components/colors.tsx b/desktop/app/src/ui/components/colors.tsx
index 8de8d0850..c5b0366ee 100644
--- a/desktop/app/src/ui/components/colors.tsx
+++ b/desktop/app/src/ui/components/colors.tsx
@@ -280,5 +280,18 @@ export const brandColors = {
   Facebook: '#0D7BED',
   Messenger: '#0088FA',
   Instagram: '#E61E68',
+  WhatsApp: '#25D366',
+  Workplace: '#20262c',
+  'Work Chat': '#20262c',
   Flipper: theme.primaryColor,
 };
+
+// https://www.internalfb.com/intern/assets/set/facebook_icons/
+export const brandIcons = {
+  Facebook: 'app-facebook-f',
+  Messenger: 'app-messenger',
+  Instagram: 'app-instagram',
+  WhatsApp: 'app-whatsapp',
+  Workplace: 'app-workplace',
+  'Work Chat': 'app-work-chat',
+};
diff --git a/desktop/static/icons.json b/desktop/static/icons.json
index b2b04274e..f4d1fb7b8 100644
--- a/desktop/static/icons.json
+++ b/desktop/static/icons.json
@@ -538,5 +538,23 @@
   ],
   "bookmark-outline": [
     16
+  ],
+  "app-facebook-f-outline": [
+    24
+  ],
+  "app-messenger-outline": [
+    24
+  ],
+  "app-instagram-outline": [
+    24
+  ],
+  "app-whatsapp-outline": [
+    24
+  ],
+  "app-workplace-outline": [
+    24
+  ],
+  "app-work-chat-outline": [
+    24
   ]
 }
\ No newline at end of file