Add device level icons

Summary: Gave every device an icon, and use it as fallback in case we don't have a client icon. Added an icon for the Flipper client. This gets (largely) rid of the 'blank' icons

Reviewed By: fabiomassimo

Differential Revision: D26691054

fbshipit-source-id: d83012e755ae5edb230747e88f9b2eac45450b19

desktop/app/src/devices/AndroidDevice.tsx

@@ -31,7 +31,7 @@ export default class AndroidDevice extends BaseDevice {
   ) {
     super(serial, deviceType, title, 'Android', specs);
     this.adb = adb;
-    this.icon = 'icons/android.svg';
+    this.icon = 'mobile';
     this.abiList = abiList;
     this.sdkVersion = sdkVersion;
     this.adb.openLogcat(this.serial).then((reader) => {

desktop/app/src/devices/ArchivedDevice.tsx

@@ -25,6 +25,7 @@ export default class ArchivedDevice extends BaseDevice {
     supportRequestDetails?: SupportFormRequestDetailsState;
   }) {
     super(options.serial, options.deviceType, options.title, options.os);
+    this.icon = 'box';
     this.connected.set(false);
     this.source = options.source || '';
     this.supportRequestDetails = options.supportRequestDetails;

desktop/app/src/devices/IOSDevice.tsx

@@ -47,7 +47,7 @@ export default class IOSDevice extends BaseDevice {
 
   constructor(serial: string, deviceType: DeviceType, title: string) {
     super(serial, deviceType, title, 'iOS');
-    this.icon = 'icons/ios.svg';
+    this.icon = 'mobile';
     this.buffer = '';
     this.startLogListener();
   }

desktop/app/src/devices/MacDevice.tsx

@@ -12,6 +12,7 @@ import BaseDevice from './BaseDevice';
 export default class MacDevice extends BaseDevice {
   constructor() {
     super('', 'physical', 'Mac', 'MacOS');
+    this.icon = 'app-apple';
   }
 
   teardown() {}

desktop/app/src/devices/WindowsDevice.tsx

@@ -12,6 +12,7 @@ import BaseDevice from './BaseDevice';
 export default class WindowsDevice extends BaseDevice {
   constructor() {
     super('', 'physical', 'Windows', 'Windows');
+    this.icon = 'app-microsoft-windows';
   }
 
   teardown() {}

desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx

@@ -102,7 +102,7 @@ export function AppSelector() {
         }>
         <AppInspectButton title="Select the device / app to inspect">
           <Layout.Horizontal gap center>
-            <AppIcon appname={client?.query.app} />
+            <AppIcon appname={client?.query.app} device={selectedDevice} />
             <Layout.Container grow shrink>
               <Text strong>{client?.query.app ?? ''}</Text>
               <Text>{selectedDevice?.title || 'Available devices'}</Text>
@@ -137,13 +137,19 @@ const AppInspectButton = styled(Button)({
   },
 });
 
-function AppIcon({appname}: {appname?: string}) {
+function AppIcon({
+  appname,
+  device,
+}: {
+  appname?: string;
+  device?: BaseDevice | null;
+}) {
   const invert = appname?.endsWith('Lite') ?? false;
   const brandName = appname?.replace(/ Lite$/, '');
   const color = brandName
     ? getColorByApp(brandName)
     : theme.backgroundTransparentHover;
-  const icon = brandName && (brandIcons as any)[brandName];
+  const icon = (brandName && (brandIcons as any)[brandName]) ?? device?.icon;
   return (
     <AppIconContainer style={{background: invert ? 'white' : color}}>
       {icon && (

desktop/app/src/ui/components/colors.tsx

@@ -296,4 +296,5 @@ export const brandIcons = {
   WhatsApp: 'app-whatsapp',
   Workplace: 'app-workplace',
   'Work Chat': 'app-work-chat',
+  Flipper: 'list-gear', // used for the self inspection client
 };