Merge pull request #1611 from myxmaster/improve-channel-selection-mod…

…al-colors HopPicker: improve channel selection colors
ZeusLN · Aug 21, 2023 · c4b4824 · c4b4824
2 parents 86a5a13 + 97c2928
commit c4b4824
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 90 deletions.
diff --git a/components/Channels/ChannelItem.tsx b/components/Channels/ChannelItem.tsx
@@ -54,13 +54,17 @@ export function ChannelItem({
                 padding: 16,
                 justifyContent: 'space-around',
                 borderBottomColor: themeColor('secondary'),
-                borderBottomWidth: noBorder ? 0 : 1
+                borderBottomWidth: noBorder ? 0 : 1,
+                backgroundColor: selected ? themeColor('background') : undefined
             }}
         >
             <Row justify="space-between">
                 {title && (
                     <View style={{ flex: 1, paddingRight: 10 }}>
-                        <Body color={selected ? 'highlight' : 'text'}>
+                        <Body
+                            color={selected ? 'highlight' : 'text'}
+                            bold={selected}
+                        >
                             {PrivacyUtils.sensitiveValue(title)}
                         </Body>
                     </View>

diff --git a/components/HopPicker.tsx b/components/HopPicker.tsx
@@ -122,102 +122,92 @@ export default class ChannelPicker extends React.Component<
                         <View
                             style={{
                                 ...styles.modal,
-                                backgroundColor: themeColor('background')
+                                backgroundColor: themeColor('secondary')
                             }}
                         >
-                            {showChannelModal && (
-                                <>
-                                    <Text
-                                        style={{
-                                            ...styles.text,
-                                            color: themeColor('text'),
-                                            fontSize: 25
-                                        }}
-                                    >
-                                        {localeString(
-                                            'components.ChannelPicker.modal.title'
-                                        )}
-                                    </Text>
-                                    <Text
-                                        style={{
-                                            ...styles.text,
-                                            color: themeColor('text'),
-                                            paddingTop: 20,
-                                            paddingBottom: 20
-                                        }}
-                                    >
-                                        {localeString(
-                                            'components.ChannelPicker.modal.description'
-                                        )}
-                                    </Text>
+                            <Text
+                                style={{
+                                    ...styles.text,
+                                    color: themeColor('text'),
+                                    fontSize: 25
+                                }}
+                            >
+                                {localeString(
+                                    'components.ChannelPicker.modal.title'
+                                )}
+                            </Text>
+                            <Text
+                                style={{
+                                    ...styles.text,
+                                    color: themeColor('text'),
+                                    paddingTop: 20,
+                                    paddingBottom: 20
+                                }}
+                            >
+                                {localeString(
+                                    'components.ChannelPicker.modal.description'
+                                )}
+                            </Text>
 
-                                    <FlatList
-                                        data={channels}
-                                        renderItem={(item) =>
-                                            this.renderItem(item)
-                                        }
-                                        onEndReachedThreshold={50}
-                                        refreshing={loading}
-                                        onRefresh={() => getChannels()}
-                                    />
+                            <FlatList
+                                data={channels}
+                                renderItem={(item) => this.renderItem(item)}
+                                onEndReachedThreshold={50}
+                                refreshing={loading}
+                                onRefresh={() => getChannels()}
+                            />
 
-                                    <View style={styles.button}>
-                                        <Button
-                                            title={localeString(
-                                                'components.ChannelPicker.modal.set'
-                                            )}
-                                            onPress={() => {
-                                                const { channelSelected }: any =
-                                                    this.state;
+                            <View style={styles.button}>
+                                <Button
+                                    title={localeString(
+                                        'components.ChannelPicker.modal.set'
+                                    )}
+                                    onPress={() => {
+                                        const { channelSelected }: any =
+                                            this.state;
 
-                                                if (channelSelected) {
-                                                    const displayName =
-                                                        channelSelected.alias ||
-                                                        (nodes[
-                                                            channelSelected
-                                                                .remote_pubkey
-                                                        ] &&
-                                                            nodes[
-                                                                channelSelected
-                                                                    .remote_pubkey
-                                                            ].alias) ||
-                                                        (channelSelected &&
-                                                            channelSelected.remote_pubkey) ||
-                                                        (channelSelected &&
-                                                            channelSelected.channelId);
+                                        if (channelSelected) {
+                                            const displayName =
+                                                channelSelected.alias ||
+                                                (nodes[
+                                                    channelSelected
+                                                        .remote_pubkey
+                                                ] &&
+                                                    nodes[
+                                                        channelSelected
+                                                            .remote_pubkey
+                                                    ].alias) ||
+                                                (channelSelected &&
+                                                    channelSelected.remote_pubkey) ||
+                                                (channelSelected &&
+                                                    channelSelected.channelId);
 
-                                                    this.setState({
-                                                        showChannelModal: false,
-                                                        valueSet: displayName
-                                                    });
+                                            this.setState({
+                                                showChannelModal: false,
+                                                valueSet: displayName
+                                            });
 
-                                                    onValueChange(
-                                                        channelSelected
-                                                    );
-                                                } else {
-                                                    this.setState({
-                                                        showChannelModal: false
-                                                    });
-                                                }
-                                            }}
-                                        />
-                                    </View>
+                                            onValueChange(channelSelected);
+                                        } else {
+                                            this.setState({
+                                                showChannelModal: false
+                                            });
+                                        }
+                                    }}
+                                />
+                            </View>
 
-                                    <View style={styles.button}>
-                                        <Button
-                                            title={localeString(
-                                                'general.cancel'
-                                            )}
-                                            onPress={() =>
-                                                this.setState({
-                                                    showChannelModal: false
-                                                })
-                                            }
-                                            secondary
-                                        />
-                                    </View>
-                                </>
-                            )}
+                            <View style={styles.button}>
+                                <Button
+                                    title={localeString('general.cancel')}
+                                    onPress={() =>
+                                        this.setState({
+                                            showChannelModal: false
+                                        })
+                                    }
+                                    secondary
+                                />
+                            </View>
                         </View>
                     </View>
                 </Modal>