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,66 @@ +// @flow + +import * as React from 'react'; +import { View, TouchableOpacity } from 'react-native'; +import Icon from 'react-native-vector-icons/FontAwesome'; + +import { useStyles } from '../themes/colors'; + +const ICON_SIZE = 20; +const PADDING_HORIZONTAL = 7.5; + +type Props = { + +onPress: () => void, +}; + +function ExpandButton(props: Props): React.Node { + const styles = useStyles(unboundStyles); + return ( + + + + + + ); +} + +function ExpandButtonDisabled(): React.Node { + const styles = useStyles(unboundStyles); + return ( + + ); +} + +function ExpandButtonExpanded(props: Props): 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, ExpandButtonExpanded }; diff --git a/native/themes/colors.js b/native/themes/colors.js --- a/native/themes/colors.js +++ b/native/themes/colors.js @@ -155,6 +155,8 @@ vibrantGreenButton: '#00C853', vibrantRedButton: '#F53100', tooltipBackground: '#1F1F1F', + drawerExpandButton: '#808080', + drawerExpandButtonDisabled: '#404040', }); const colors = { light, dark };