mainScreenTabs: Change All-Messages icon from globe to list.

[dootMaster]

To match the mobile All-Messages icon with the icon found in browser.

Browser:

Previous:

Matched:

Fixes: #5303

[dootMaster]

@chrisbobbe

I've revised my PR according to some advice you left on another PR. Let me know if it checks. Thanks.

[dootMaster]

@alya @chrisbobbe

PR ready for review.

[chrisbobbe]

Thanks, @dootMaster!

One nit: the web app uses Font Awesome for this icon, and this PR would use Feather.

The difference is pretty small; the order of short and long lines is just reversed:

But we might as well use exactly the same icon while we're making this change.

It's a little tricky with the current code, but here's a not-too-complicated way that should work:

1. An [nfc] commit that inlines TopTabButton in just this callsite, so replacing

      <TopTabButton
        name="globe"
        onPress={() => {
          dispatch(doNarrow(HOME_NARROW));
        }}
      />

with

      <TopTabButtonGeneral
        onPress={() => {
          dispatch(doNarrow(HOME_NARROW));
        }}
      >
        <Icon size={24} style={{ textAlign: 'center' }} color={BRAND_COLOR} name="globe" />
      </TopTabButtonGeneral>

, with Icon imported like so:

import { Icon } from '../common/Icons';

2. A commit that adds something like

export const IconAllMessages: SpecificIconType = makeIcon(FontAwesome, 'align-left');

to src/common/Icons.js, and replaces this button's <Icon … name="globe" /> with <IconAllMessages … />.

[dootMaster]

@chrisbobbe

HAH! I actually considered this in a previous commit but then second guessed myself because the commit message seemed too long. I'll sort this out.