diff --git a/native/roles/role-panel-entry.react.js b/native/roles/role-panel-entry.react.js --- a/native/roles/role-panel-entry.react.js +++ b/native/roles/role-panel-entry.react.js @@ -1,9 +1,10 @@ // @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 = { @@ -15,13 +16,31 @@ 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} ); } @@ -34,17 +53,28 @@ 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;