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;