use a simpler and more general approach

mattermost · Sep 26, 2024 · 888d351 · 888d351
1 parent 27d069b
commit 888d351
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 27 deletions.
diff --git 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<ViewStyle>;
+    buttonContainerStyle?: StyleProp<ViewStyle>;
     textStyle?: StyleProp<TextStyle>;
     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 (
         <ElementButton
-            buttonStyle={buttonContainerStyle}
+            buttonStyle={buttonStyle}
+            containerStyle={buttonContainerStyle}
             onPress={onPress}
             testID={testID}
             disabled={disabled}
             hitSlop={hitSlop}
         >
-            <View style={containerStyle}>
+            <View style={textContainerStyle}>
                 {icon}
                 <Text
                     style={txtStyle}

diff --git a/app/screens/review_app/index.tsx b/app/screens/review_app/index.tsx
@@ -63,11 +63,11 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
         flexDirection: 'row',
         width: '100%',
     },
-    leftButtonWrapper: {
+    leftButton: {
         flex: 1,
         marginRight: 5,
     },
-    rightButtonWrapper: {
+    rightButton: {
         flex: 1,
         marginLeft: 5,
     },
@@ -198,23 +198,21 @@ const ReviewApp = ({
                                 {intl.formatMessage({id: 'rate.subtitle', defaultMessage: 'Let us know what you think.'})}
                             </Text>
                             <View style={styles.buttonsWrapper}>
-                                <View style={styles.leftButtonWrapper}>
-                                    <Button
-                                        theme={theme}
-                                        size={'lg'}
-                                        emphasis={'tertiary'}
-                                        onPress={onPressNeedsWork}
-                                        text={intl.formatMessage({id: 'rate.button.needs_work', defaultMessage: 'Needs work'})}
-                                    />
-                                </View>
-                                <View style={styles.rightButtonWrapper}>
-                                    <Button
-                                        theme={theme}
-                                        size={'lg'}
-                                        onPress={onPressYes}
-                                        text={intl.formatMessage({id: 'rate.button.yes', defaultMessage: 'Love it!'})}
-                                    />
-                                </View>
+                                <Button
+                                    theme={theme}
+                                    size={'lg'}
+                                    emphasis={'tertiary'}
+                                    onPress={onPressNeedsWork}
+                                    text={intl.formatMessage({id: 'rate.button.needs_work', defaultMessage: 'Needs work'})}
+                                    buttonContainerStyle={styles.leftButton}
+                                />
+                                <Button
+                                    theme={theme}
+                                    size={'lg'}
+                                    onPress={onPressYes}
+                                    text={intl.formatMessage({id: 'rate.button.yes', defaultMessage: 'Love it!'})}
+                                    buttonContainerStyle={styles.rightButton}
+                                />
                             </View>
                             {hasAskedBefore && (
                                 <TouchableWithoutFeedback