diff --git a/native/components/enum-settings-option.react.js b/native/components/enum-settings-option.react.js --- a/native/components/enum-settings-option.react.js +++ b/native/components/enum-settings-option.react.js @@ -47,14 +47,6 @@ return icon; }, [icon, styles.enumIcon, colors.purpleButton]); - const infoContainerStyle = React.useMemo( - () => - props.icon - ? styles.enumInfoContainer - : { ...styles.enumInfoContainer, marginLeft: 10 }, - [props.icon, styles.enumInfoContainer], - ); - const enumInputStyles = React.useMemo(() => { const style = [styles.enumInput]; @@ -93,51 +85,73 @@ [enumValue, enumInputFilledStyles], ); + const touchableContainerStyle = React.useMemo(() => { + const style = [styles.touchableContainer]; + + if (enumValue) { + style.push(styles.touchableContainerSelected); + } + + return style; + }, [enumValue, styles.touchableContainer, styles.touchableContainerSelected]); + return ( - - {enumIcon} - - {name} - {description} - + - {enumInputFill} + {enumIcon} + + {name} + {description} + + + {enumInputFill} + ); } const unboundStyles = { - enumCell: { - flexDirection: 'row', - height: 96, + container: { backgroundColor: 'panelForeground', + paddingVertical: 4, + paddingHorizontal: 8, + }, + touchableContainer: { + flexDirection: 'row', + padding: 12, + }, + touchableContainerSelected: { + backgroundColor: 'panelSecondaryForeground', + borderRadius: 8, }, enumIcon: { - padding: 16, + paddingTop: 4, + paddingRight: 24, }, enumInfoContainer: { flex: 1, flexDirection: 'column', justifyContent: 'space-evenly', - padding: 8, }, enumInfoName: { color: 'panelForegroundLabel', fontSize: 18, lineHeight: 24, + marginBottom: 4, }, enumInfoDescription: { color: 'panelForegroundSecondaryLabel', lineHeight: 18, }, enumInputContainer: { - padding: 22, + padding: 16, + paddingRight: 0, justifyContent: 'center', alignItems: 'center', }, diff --git a/native/roles/create-roles-screen.react.js b/native/roles/create-roles-screen.react.js --- a/native/roles/create-roles-screen.react.js +++ b/native/roles/create-roles-screen.react.js @@ -309,7 +309,8 @@ marginTop: 10, }, permissionsListContentContainer: { - paddingBottom: 48, + paddingTop: 4, + paddingBottom: 56, }, activityIndicator: { paddingRight: 15,