diff --git a/app/components/button/index.tsx b/app/components/button/index.tsx index 0d9aa5f6836..41ba1410bc8 100644 --- a/app/components/button/index.tsx +++ b/app/components/button/index.tsx @@ -14,6 +14,7 @@ type ConditionalProps = | {iconName: string; iconSize: number} | {iconName?: nev type Props = ConditionalProps & { theme: Theme; backgroundStyle?: StyleProp; + buttonContainerStyle?: StyleProp; textStyle?: StyleProp; size?: ButtonSize; emphasis?: ButtonEmphasis; @@ -25,7 +26,7 @@ type Props = ConditionalProps & { iconComponent?: ReactNode; disabled?: boolean; hitSlop?: Insets; -} +}; const styles = StyleSheet.create({ container: {flexDirection: 'row'}, @@ -35,6 +36,7 @@ const styles = StyleSheet.create({ const Button = ({ theme, backgroundStyle, + buttonContainerStyle, textStyle, size, emphasis, @@ -59,7 +61,7 @@ const Button = ({ textStyle, ], [theme, textStyle, size, emphasis, buttonType]); - const containerStyle = useMemo( + const textContainerStyle = useMemo( () => (iconSize ? [ styles.container, @@ -68,11 +70,11 @@ const Button = ({ [iconSize], ); - let buttonContainerStyle = StyleSheet.flatten(bgStyle); + let buttonStyle = StyleSheet.flatten(bgStyle); if (disabled) { - buttonContainerStyle = { - ...buttonContainerStyle, - backgroundColor: changeOpacity(buttonContainerStyle.backgroundColor! as string, 0.4), + buttonStyle = { + ...buttonStyle, + backgroundColor: changeOpacity(buttonStyle.backgroundColor! as string, 0.4), }; } @@ -93,13 +95,14 @@ const Button = ({ return ( - + {icon} ({ flexDirection: 'row', width: '100%', }, + leftButton: { + flex: 1, + marginRight: 5, + }, + rightButton: { + flex: 1, + marginLeft: 5, + }, close: { justifyContent: 'center', height: 44, @@ -83,14 +91,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({ marginBottom: 24, textAlign: 'center', }, - leftButton: { - flex: 1, - marginRight: 5, - }, - rightButton: { - flex: 1, - marginLeft: 5, - }, dontAsk: { ...typography('Body', 75, 'SemiBold'), color: theme.buttonBg, @@ -204,14 +204,14 @@ const ReviewApp = ({ emphasis={'tertiary'} onPress={onPressNeedsWork} text={intl.formatMessage({id: 'rate.button.needs_work', defaultMessage: 'Needs work'})} - backgroundStyle={styles.leftButton} + buttonContainerStyle={styles.leftButton} />