diff --git a/app/mobile/src/session/sharing/sharingItem/SharingItem.jsx b/app/mobile/src/session/sharing/sharingItem/SharingItem.jsx new file mode 100644 index 00000000..b8f4aefe --- /dev/null +++ b/app/mobile/src/session/sharing/sharingItem/SharingItem.jsx @@ -0,0 +1,22 @@ +import { Text, View } from 'react-native'; +import { TouchableOpacity } from 'react-native-gesture-handler'; +import { Logo } from 'utils/Logo'; +import { styles } from './SharingItem.styled'; +import Colors from 'constants/Colors'; + +export function SharingItem({ item, selection, select }) { + + const container = (selection?.cardId === item.cardId && selection?.channelId === item.channelId) ? styles.active : styles.container; + + return ( + select({ cardId: item.cardId, channelId: item.channelId })}> + + + + { item.subject } + + { item.message } + + + ) +} diff --git a/app/mobile/src/session/sharing/sharingItem/SharingItem.styled.js b/app/mobile/src/session/sharing/sharingItem/SharingItem.styled.js new file mode 100644 index 00000000..def11ba4 --- /dev/null +++ b/app/mobile/src/session/sharing/sharingItem/SharingItem.styled.js @@ -0,0 +1,51 @@ +import { StyleSheet } from 'react-native'; +import { Colors } from 'constants/Colors'; + +export const styles = StyleSheet.create({ + container: { + display: 'flex', + flexShrink: 1, + flexDirection: 'row', + height: 48, + alignItems: 'center', + borderBottomWidth: 1, + borderColor: Colors.itemDivider, + paddingLeft: 16, + paddingRight: 16, + }, + active: { + display: 'flex', + flexShrink: 1, + flexDirection: 'row', + height: 48, + alignItems: 'center', + borderBottomWidth: 1, + borderColor: Colors.itemDivider, + paddingLeft: 16, + paddingRight: 16, + backgroundColor: Colors.background, + }, + detail: { + paddingLeft: 12, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + flexShrink: 1, + }, + subject: { + display: 'flex', + flexDirection: 'row', + flexShrink: 1, + }, + subjectIcon: { + paddingRight: 4, + }, + subjectText: { + color: Colors.text, + fontSize: 14, + }, + message: { + color: Colors.lightText, + fontSize: 12, + }, +})