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 ( + + {icon && ( + + )} + + ); +} + +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