diff --git a/native/navigation/expand-buttons.react.js b/native/navigation/expand-buttons.react.js new file mode 100644 --- /dev/null +++ b/native/navigation/expand-buttons.react.js @@ -0,0 +1,56 @@ +// @flow + +import Icon from '@expo/vector-icons/FontAwesome'; +import * as React from 'react'; +import { TouchableOpacity } from 'react-native'; + +import { useStyles } from '../themes/colors'; + +const ICON_SIZE = 20; +const PADDING_HORIZONTAL = 7.5; + +type Props = { + +onPress: () => void, + +expanded: boolean, +}; + +function ExpandButton(props: Props): React.Node { + const styles = useStyles(unboundStyles); + const style = props.expanded + ? styles.expandButtonExpanded + : styles.expandButton; + const icon = props.expanded ? 'caret-down' : 'caret-right'; + return ( + + + + ); +} + +function ExpandButtonDisabled(): React.Node { + const styles = useStyles(unboundStyles); + return ( + + ); +} + +const unboundStyles = { + expandButton: { + color: 'drawerExpandButton', + paddingHorizontal: PADDING_HORIZONTAL, + }, + expandButtonDisabled: { + color: 'drawerExpandButtonDisabled', + paddingHorizontal: PADDING_HORIZONTAL, + }, + expandButtonExpanded: { + color: 'drawerExpandButton', + paddingHorizontal: PADDING_HORIZONTAL, + }, +}; + +export { ExpandButton, ExpandButtonDisabled }; diff --git a/native/themes/colors.js b/native/themes/colors.js --- a/native/themes/colors.js +++ b/native/themes/colors.js @@ -87,6 +87,8 @@ logInText: 'white', siweButton: 'white', siweButtonText: '#1F1F1F', + drawerExpandButton: '#808080', + drawerExpandButtonDisabled: '#404040', }); export type Colors = $Exact; @@ -167,6 +169,8 @@ logInText: 'white', siweButton: 'white', siweButtonText: '#1F1F1F', + drawerExpandButton: '#808080', + drawerExpandButtonDisabled: '#404040', }); const colors = { light, dark };