PLT-5578 Add theming for channel info (#298)

app/scenes/channel_info/channel_info.js

@@ -10,29 +10,42 @@ import {
     View
 } from 'react-native';
 
-import ChannelInfoHeader from './channel_info_header';
-import ChannelInfoRow from './channel_info_row';
+import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 import {Constants} from 'service/constants';
 
-const style = StyleSheet.create({
-    container: {
-        flex: 1
-    },
-    footer: {
-        marginTop: 40
-    },
-    separator: {
-        flex: 1,
-        marginHorizontal: 15
-    },
-    separatorContainer: {
-        flex: 1,
-        backgroundColor: '#fff',
-        height: 1
-    },
-    scrollView: {
-        flex: 1
-    }
+import ChannelInfoHeader from './channel_info_header';
+import ChannelInfoRow from './channel_info_row';
+
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: theme.centerChannelBg
+        },
+        footer: {
+            marginTop: 40,
+            borderTopWidth: 1,
+            borderBottomWidth: 1,
+            borderTopColor: changeOpacity(theme.centerChannelColor, 0.1),
+            borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1)
+        },
+        rowsContainer: {
+            borderTopWidth: 1,
+            borderBottomWidth: 1,
+            borderTopColor: changeOpacity(theme.centerChannelColor, 0.1),
+            borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1),
+            backgroundColor: theme.centerChannelBg
+        },
+        separator: {
+            marginHorizontal: 15,
+            height: 1,
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.1)
+        },
+        scrollView: {
+            flex: 1,
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.03)
+        }
+    });
 });
 
 class ChannelInfo extends PureComponent {
@@ -42,6 +55,7 @@ class ChannelInfo extends PureComponent {
         currentChannel: PropTypes.object.isRequired,
         currentChannelCreatorName: PropTypes.string,
         currentChannelMemberCount: PropTypes.number,
+        theme: PropTypes.object.isRequired,
         isFavorite: PropTypes.bool.isRequired,
         leaveChannelRequest: PropTypes.object.isRequired,
         canManageUsers: PropTypes.bool.isRequired,
@@ -143,9 +157,12 @@ class ChannelInfo extends PureComponent {
             currentChannel,
             currentChannelCreatorName,
             currentChannelMemberCount,
-            canManageUsers
+            canManageUsers,
+            theme
         } = this.props;
 
+        const style = getStyleSheet(theme);
+
         return (
             <View style={style.container}>
                 <ScrollView
@@ -157,68 +174,70 @@ class ChannelInfo extends PureComponent {
                         displayName={currentChannel.display_name}
                         header={currentChannel.header}
                         purpose={currentChannel.purpose}
+                        theme={theme}
                     />
-                    <ChannelInfoRow
-                        action={this.handleFavorite}
-                        defaultMessage='Favorite'
-                        detail={this.state.isFavorite}
-                        icon='star-o'
-                        textId='mobile.routes.channelInfo.favorite'
-                        togglable={true}
-                    />
-                    <View style={style.separatorContainer}>
+                    <View style={style.rowsContainer}>
+                        <ChannelInfoRow
+                            action={this.handleFavorite}
+                            defaultMessage='Favorite'
+                            detail={this.state.isFavorite}
+                            icon='star-o'
+                            textId='mobile.routes.channelInfo.favorite'
+                            togglable={true}
+                            theme={theme}
+                        />
                         <View style={style.separator}/>
-                    </View>
-                    <ChannelInfoRow
-                        action={() => true}
-                        defaultMessage='Notification Preferences'
-                        icon='bell-o'
-                        textId='channel_header.notificationPreferences'
-                    />
-                    <View style={style.separatorContainer}>
+                        <ChannelInfoRow
+                            action={() => true}
+                            defaultMessage='Notification Preferences'
+                            icon='bell-o'
+                            textId='channel_header.notificationPreferences'
+                            theme={theme}
+                        />
                         <View style={style.separator}/>
-                    </View>
-                    <ChannelInfoRow
-                        action={this.props.actions.goToChannelMembers}
-                        defaultMessage={canManageUsers ? 'Manage Members' : 'View Members'}
-                        detail={currentChannelMemberCount}
-                        icon='users'
-                        textId={canManageUsers ? 'channel_header.manageMembers' : 'channel_header.viewMembers'}
-                    />
-                    <View style={style.separatorContainer}>
-                        <View style={style.separator}/>
-                    </View>
-                    {canManageUsers && this.renderLeaveOrDeleteChannelRow() &&
-                        <View>
-                            <ChannelInfoRow
-                                action={this.props.actions.goToChannelAddMembers}
-                                defaultMessage='Add Members'
-                                icon='user-plus'
-                                textId='channel_header.addMembers'
-                            />
-                            <View style={style.separatorContainer}>
+                        <ChannelInfoRow
+                            action={this.props.actions.goToChannelMembers}
+                            defaultMessage={canManageUsers ? 'Manage Members' : 'View Members'}
+                            detail={currentChannelMemberCount}
+                            icon='users'
+                            textId={canManageUsers ? 'channel_header.manageMembers' : 'channel_header.viewMembers'}
+                            theme={theme}
+                        />
+                        {canManageUsers && this.renderLeaveOrDeleteChannelRow() &&
+                            <View>
+                                <View style={style.separator}/>
+                                <ChannelInfoRow
+                                    action={this.props.actions.goToChannelAddMembers}
+                                    defaultMessage='Add Members'
+                                    icon='user-plus'
+                                    textId='channel_header.addMembers'
+                                    theme={theme}
+                                />
                                 <View style={style.separator}/>
                             </View>
-                        </View>
-                    }
-                    <ChannelInfoRow
-                        action={() => this.handleDeleteOrLeave('leave')}
-                        defaultMessage='Leave Channel'
-                        icon='sign-out'
-                        textId='navbar.leave'
-                        shouldRender={this.renderLeaveOrDeleteChannelRow()}
-                    />
-                    <View style={style.footer}>
+                        }
                         <ChannelInfoRow
-                            action={() => this.handleDeleteOrLeave('delete')}
-                            defaultMessage='Delete Channel'
-                            icon='trash'
-                            iconColor='#DA4A4A'
-                            textId='mobile.routes.channelInfo.delete_channel'
-                            textColor='#DA4A4A'
+                            action={() => this.handleDeleteOrLeave('leave')}
+                            defaultMessage='Leave Channel'
+                            icon='sign-out'
+                            textId='navbar.leave'
                             shouldRender={this.renderLeaveOrDeleteChannelRow()}
+                            theme={theme}
                         />
                     </View>
+                    {this.renderLeaveOrDeleteChannelRow() &&
+                        <View style={style.footer}>
+                            <ChannelInfoRow
+                                action={() => this.handleDeleteOrLeave('delete')}
+                                defaultMessage='Delete Channel'
+                                icon='trash'
+                                iconColor='#DA4A4A'
+                                textId='mobile.routes.channelInfo.delete_channel'
+                                textColor='#DA4A4A'
+                                theme={theme}
+                            />
+                        </View>
+                    }
                 </ScrollView>
             </View>
         );

app/scenes/channel_info/channel_info_header.js

@@ -11,56 +11,63 @@ import Icon from 'react-native-vector-icons/FontAwesome';
 
 import FormattedDate from 'app/components/formatted_date';
 import FormattedText from 'app/components/formatted_text';
+import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
-const style = StyleSheet.create({
-    container: {
-        backgroundColor: '#fff',
-        marginBottom: 40,
-        padding: 15
-    },
-    channelName: {
-        marginLeft: 5,
-        fontSize: 15,
-        fontWeight: '600'
-    },
-    channelNameContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingBottom: 10
-    },
-    createdBy: {
-        flexDirection: 'row',
-        fontSize: 11,
-        opacity: 0.5,
-        marginTop: 5
-    },
-    detail: {
-        fontSize: 13
-    },
-    header: {
-        fontSize: 12,
-        opacity: 0.5,
-        marginBottom: 10
-    },
-    section: {
-        marginTop: 15
-    },
-    url: {
-        fontSize: 11,
-        opacity: 0.5,
-        marginBottom: 10
-    }
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return StyleSheet.create({
+        container: {
+            backgroundColor: theme.centerChannelBg,
+            marginBottom: 40,
+            padding: 15,
+            borderBottomWidth: 1,
+            borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1)
+        },
+        channelName: {
+            marginLeft: 5,
+            fontSize: 15,
+            fontWeight: '600',
+            color: theme.centerChannelColor
+        },
+        channelNameContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingBottom: 10
+        },
+        createdBy: {
+            flexDirection: 'row',
+            fontSize: 11,
+            marginTop: 5,
+            color: changeOpacity(theme.centerChannelColor, 0.5),
+            backgroundColor: 'transparent'
+        },
+        detail: {
+            fontSize: 13,
+            color: theme.centerChannelColor
+        },
+        header: {
+            fontSize: 12,
+            marginBottom: 10,
+            color: theme.centerChannelColor,
+            backgroundColor: 'transparent'
+        },
+        section: {
+            marginTop: 15
+        }
+    });
 });
 
 function channelInfoHeader(props) {
-    const {createAt, creator, displayName, header, purpose} = props;
+    const {createAt, creator, displayName, header, purpose, theme} = props;
+
+    const style = getStyleSheet(theme);
+
     return (
         <View style={style.container}>
             <View style={style.channelNameContainer}>
                 <Icon
                     name='globe'
                     size={15}
-                    color='rgba(0, 0, 0, 0.7)'
+                    color={changeOpacity(theme.centerChannelColor, 0.7)}
                 />
                 <Text style={style.channelName}>{displayName}</Text>
             </View>
@@ -110,7 +117,8 @@ channelInfoHeader.propTypes = {
     creator: PropTypes.string,
     displayName: PropTypes.string.isRequired,
     header: PropTypes.string,
-    purpose: PropTypes.string
+    purpose: PropTypes.string,
+    theme: PropTypes.object.isRequired
 };
 
 export default channelInfoHeader;

app/scenes/channel_info/channel_info_row.js

@@ -12,28 +12,34 @@ import {
 import Icon from 'react-native-vector-icons/FontAwesome';
 
 import FormattedText from 'app/components/formatted_text';
+import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
-const style = StyleSheet.create({
-    container: {
-        backgroundColor: '#fff',
-        paddingHorizontal: 15,
-        flexDirection: 'row',
-        alignItems: 'center'
-    },
-    detail: {
-        marginHorizontal: 15,
-        color: 'rgba(0, 0, 0, 0.5)',
-        fontSize: 15
-    },
-    label: {
-        flex: 1,
-        marginLeft: 15,
-        fontSize: 15,
-        paddingVertical: 15
-    },
-    leftIcon: {
-        width: 17
-    }
+const getStyleSheet = makeStyleSheetFromTheme((theme) => {
+    return StyleSheet.create({
+        container: {
+            backgroundColor: theme.centerChannelBg,
+            paddingHorizontal: 15,
+            flexDirection: 'row',
+            alignItems: 'center'
+        },
+        detail: {
+            marginHorizontal: 15,
+            color: changeOpacity(theme.centerChannelColor, 0.5),
+            fontSize: 15
+        },
+        label: {
+            flex: 1,
+            marginLeft: 15,
+            fontSize: 15,
+            paddingVertical: 15
+        },
+        leftIcon: {
+            width: 17
+        },
+        rightIcon: {
+            color: changeOpacity(theme.centerChannelColor, 0.5)
+        }
+    });
 });
 
 function createTouchableComponent(children, action) {
@@ -45,21 +51,24 @@ function createTouchableComponent(children, action) {
 }
 
 function channelInfoRow(props) {
-    const {action, defaultMessage, detail, icon, iconColor, textColor, textId, togglable, shouldRender = true} = props;
+    const {action, defaultMessage, detail, icon, iconColor, textColor, textId, togglable, theme, shouldRender} = props;
 
     if (!shouldRender) {
         return null;
     }
+
+    const style = getStyleSheet(theme);
+
     const RowComponent = (
         <View style={style.container}>
             <Icon
                 name={icon}
                 size={15}
-                color={iconColor}
+                color={iconColor || changeOpacity(theme.centerChannelColor, 0.5)}
                 style={style.leftIcon}
             />
             <FormattedText
-                style={[style.label, {color: textColor}]}
+                style={[style.label, {color: textColor || theme.centerChannelColor}]}
                 id={textId}
                 defaultMessage={defaultMessage}
             />
@@ -72,7 +81,7 @@ function channelInfoRow(props) {
                 <Icon
                     name='chevron-right'
                     size={15}
-                    color='rgba(0, 0, 0, 0.7)'
+                    style={style.rightIcon}
                 />
             }
         </View>
@@ -97,13 +106,13 @@ channelInfoRow.propTypes = {
     iconColor: PropTypes.string,
     textId: PropTypes.string.isRequired,
     togglable: PropTypes.bool,
-    textColor: PropTypes.string
+    textColor: PropTypes.string,
+    theme: PropTypes.object.isRequired
 };
 
 channelInfoRow.defaultProps = {
-    iconColor: 'rgba(0, 0, 0, 0.7)',
-    textColor: '#000',
-    togglable: false
+    togglable: false,
+    shouldRender: true
 };
 
 export default channelInfoRow;