diff --git a/native/roles/role-panel-entry.react.js b/native/roles/role-panel-entry.react.js index b44ccf4b1..9c00ac4b6 100644 --- a/native/roles/role-panel-entry.react.js +++ b/native/roles/role-panel-entry.react.js @@ -1,50 +1,80 @@ // @flow import * as React from 'react'; -import { View, Text } from 'react-native'; +import { View, Text, TouchableOpacity } from 'react-native'; import CommIcon from '../components/comm-icon.react.js'; +import SWMansionIcon from '../components/swmansion-icon.react.js'; import { useStyles } from '../themes/colors.js'; type RolePanelEntryProps = { +roleName: string, +memberCount: number, }; function RolePanelEntry(props: RolePanelEntryProps): React.Node { const { roleName, memberCount } = props; const styles = useStyles(unboundStyles); + const menuButton = React.useMemo(() => { + if (roleName === 'Admins') { + return ; + } + return ( + + + + ); + }, [roleName, styles.rolePanelEmptyMenuButton, styles.rolePanelMenuButton]); + return ( {roleName} - - {memberCount} - - + + + {memberCount} + + + + {menuButton} ); } const unboundStyles = { rolePanelEntry: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 8, }, rolePanelNameEntry: { + flex: 1, color: 'panelForegroundLabel', fontWeight: '600', fontSize: 14, }, + rolePanelCountEntryContainer: { + marginRight: 40, + alignItmes: 'flex-end', + }, rolePanelCountEntry: { color: 'panelForegroundLabel', fontWeight: '600', fontSize: 14, - marginRight: 72, + marginRight: 22, padding: 8, }, + rolePanelEmptyMenuButton: { + marginRight: 22, + }, + rolePanelMenuButton: { + color: 'panelForegroundLabel', + }, }; export default RolePanelEntry;