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;