homescreen_icon: Swap icon 'globe' with 'list' for web UI parity.

Web Zulip's all-messages icon is an inverted list icon, so we're
swapping mobile's all-messages icon to match.

Fixes: zulip#5303

Author: Leslie Ngo

src/common/Icons.js

@@ -108,3 +108,4 @@ export const IconGroup: SpecificIconType = makeIcon(FontAwesome, 'group');
 export const IconPlus: SpecificIconType = makeIcon(Feather, 'plus');
 // eslint-disable-next-line react/function-component-definition
 export const IconWebPublic: SpecificIconType = props => <ZulipIcon name="globe" {...props} />;
+export const IconAllMessages: SpecificIconType = makeIcon(Feather, 'align-left');

src/main/HomeScreen.js

@@ -18,7 +18,7 @@ import LoadingBanner from '../common/LoadingBanner';
 import ServerCompatBanner from '../common/ServerCompatBanner';
 import ServerPushSetupBanner from '../common/ServerPushSetupBanner';
 import { OfflineNoticePlaceholder } from '../boot/OfflineNoticeProvider';
-import { Icon } from '../common/Icons';
+import { IconAllMessages } from '../common/Icons';
 
 const styles = createStyleSheet({
   wrapper: {
@@ -45,12 +45,15 @@ export default function HomeScreen(props: Props): Node {
       <OfflineNoticePlaceholder />
       <View style={styles.iconList}>
         <TopTabButtonGeneral
-          name="globe"
           onPress={() => {
             dispatch(doNarrow(HOME_NARROW));
           }}
         >
-          <Icon size={24} style={{ textAlign: 'center ' }} color={BRAND_COLOR} name="globe" />
+          <IconAllMessages
+            size={24}
+            style={{ textAlign: 'center', transform: [{ scaleY: -1 }] }}
+            color={BRAND_COLOR}
+          />
         </TopTabButtonGeneral>
         <TopTabButton
           name="star"