Fix team_icon to reference the pure component (#1507)

* Fix team_icon to reference the pure component

* Fix team icon in Android extension

* Fix team icon in select team screen

* Fix team switch divider in channel drawer

app/components/channel_drawer/channels_list/switch_teams_button/switch_teams_button.js

@@ -70,6 +70,7 @@ export default class SwitchTeamsButton extends React.PureComponent {
                             size={12}
                             style={styles.switcherArrow}
                         />
+                        <View style={styles.switcherDivider}/>
                         <TeamIcon
                             teamId={currentTeamId}
                             styleContainer={styles.teamIconContainer}
@@ -100,6 +101,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             color: theme.sidebarHeaderBg,
             marginRight: 3,
         },
+        switcherDivider: {
+            backgroundColor: theme.sidebarHeaderBg,
+            height: 15,
+            marginHorizontal: 6,
+            width: 1,
+        },
         teamIconContainer: {
             width: 26,
             height: 26,

app/screens/select_team/select_team.js

@@ -7,7 +7,6 @@ import {
     Alert,
     FlatList,
     InteractionManager,
-    StyleSheet,
     Text,
     TouchableOpacity,
     View,
@@ -261,7 +260,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         line: {
             backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
             width: '100%',
-            height: StyleSheet.hairlineWidth,
+            height: 1,
         },
         teamWrapper: {
             marginTop: 20,
@@ -275,8 +274,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         teamIconContainer: {
             width: 40,
             height: 40,
+            backgroundColor: theme.sidebarBg,
         },
         teamIconText: {
+            color: theme.sidebarText,
             fontSize: 18,
         },
         noTeam: {

share_extension/android/extension_teams/team_item/team_item.js

@@ -96,8 +96,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             paddingRight: 5,
         },
         teamIconContainer: {
+            backgroundColor: theme.sidebarBg,
             marginRight: 10,
         },
+        teamIconText: {
+            color: theme.sidebarText,
+        },
         checkmarkContainer: {
             alignItems: 'flex-end',
         },

share_extension/ios/extension_team_item.js

@@ -12,7 +12,7 @@ import {
 import {preventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
-import TeamIcon from 'app/components/team_icon';
+import TeamIcon from 'app/components/team_icon/team_icon';
 
 export default class TeamsListItem extends React.PureComponent {
     static propTypes = {
@@ -51,9 +51,11 @@ export default class TeamsListItem extends React.PureComponent {
                 <View style={styles.container}>
                     <View style={styles.item}>
                         <TeamIcon
-                            teamId={team.id}
                             styleContainer={styles.teamIconContainer}
                             styleText={styles.teamIconText}
+                            teamId={team.id}
+                            team={team}
+                            theme={theme}
                         />
                         <Text
                             style={[styles.text]}
@@ -96,8 +98,12 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             paddingRight: 5,
         },
         teamIconContainer: {
+            backgroundColor: theme.sidebarBg,
             marginRight: 10,
         },
+        teamIconText: {
+            color: theme.sidebarText,
+        },
         checkmarkContainer: {
             alignItems: 'flex-end',
         },