From fd4f9b23beb3fd8b55d4f5649d6eeadbd496a354 Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Mon, 17 Jul 2023 21:14:12 +0530
Subject: [PATCH 01/12] test:

---
 src/components/ButtonWithDropdownMenu.js | 18 +++++++++++++-----
 src/styles/styles.js                     |  5 ++---
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 1396ab601330..bdf05fbc93b3 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -10,6 +10,7 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import themeColors from '../styles/themes/default';
 import CONST from '../CONST';
+import variables from '../styles/variables';
 
 const propTypes = {
     /** Text to display for the menu header */
@@ -84,8 +85,10 @@ function ButtonWithDropdownMenu(props) {
                         shouldRemoveRightBorderRadius
                         style={[styles.flex1, styles.pr0]}
                         pressOnEnter
+                        medium
+                        innerStyles={[{height: 40}]}
                     />
-                    <View style={styles.buttonDivider} />
+
                     <Button
                         ref={caretButton}
                         success
@@ -93,11 +96,16 @@ function ButtonWithDropdownMenu(props) {
                         style={[styles.pl0]}
                         onPress={() => setIsMenuVisible(true)}
                         shouldRemoveLeftBorderRadius
+                        medium
+                        innerStyles={[{height: 40}]}
                     >
-                        <Icon
-                            src={Expensicons.DownArrow}
-                            fill={themeColors.textLight}
-                        />
+                        <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
+                            <View style={styles.buttonDivider} />
+                            <Icon
+                                src={Expensicons.DownArrow}
+                                fill={themeColors.textLight}
+                            />
+                        </View>
                     </Button>
                 </View>
             ) : (
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 25eb0a055afc..2f95945a0d3f 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -550,9 +550,8 @@ const styles = {
 
     buttonDivider: {
         width: 1,
-        alignSelf: 'stretch',
-        backgroundColor: themeColors.appBG,
-        marginVertical: 1,
+        backgroundColor: themeColors.text,
+        height: 28,
     },
 
     noBorderRadius: {

From 399fa555ca46cf303048dba1fecfbba3825e579f Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Tue, 1 Aug 2023 19:59:09 +0530
Subject: [PATCH 02/12] Adjust styling as per new design

---
 src/components/ButtonWithDropdownMenu.js | 18 +++++++++++-------
 src/styles/styles.js                     | 18 ++++++++++++++++++
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index bdf05fbc93b3..195941ce307d 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -86,7 +86,7 @@ function ButtonWithDropdownMenu(props) {
                         style={[styles.flex1, styles.pr0]}
                         pressOnEnter
                         medium
-                        innerStyles={[{height: 40}]}
+                        innerStyles={[styles.dropButtonHeight]}
                     />
 
                     <Button
@@ -97,14 +97,16 @@ function ButtonWithDropdownMenu(props) {
                         onPress={() => setIsMenuVisible(true)}
                         shouldRemoveLeftBorderRadius
                         medium
-                        innerStyles={[{height: 40}]}
+                        innerStyles={[styles.cartIconContainer]}
                     >
-                        <View style={[styles.flexRow, styles.justifyContentStart, styles.alignItemsCenter]}>
+                        <View style={[styles.cartIconView]}>
                             <View style={styles.buttonDivider} />
-                            <Icon
-                                src={Expensicons.DownArrow}
-                                fill={themeColors.textLight}
-                            />
+                            <View style={[styles.ph4]}>
+                                <Icon
+                                    src={Expensicons.DownArrow}
+                                    fill={themeColors.textLight}
+                                />
+                            </View>
                         </View>
                     </Button>
                 </View>
@@ -117,6 +119,8 @@ function ButtonWithDropdownMenu(props) {
                     text={selectedItem.text}
                     onPress={(event) => props.onPress(event, props.options[0].value)}
                     pressOnEnter
+                    medium
+                    innerStyles={[styles.dropButtonHeight]}
                 />
             )}
             {props.options.length > 1 && !_.isEmpty(popoverAnchorPosition) && (
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 673f73a70c5a..c6c63bb856fd 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3554,6 +3554,24 @@ const styles = {
     willChangeTransform: {
         willChange: 'transform',
     },
+
+    dropButtonHeight: {
+        height: variables.componentSizeNormal,
+    },
+
+    cartIconContainer: {
+        height: variables.componentSizeNormal,
+        paddingRight: 0,
+        paddingLeft: 0,
+    },
+
+    cartIconView: {
+        borderTopRightRadius: variables.buttonBorderRadius,
+        borderBottomRightRadius: variables.buttonBorderRadius,
+        height: variables.componentSizeNormal,
+        ...flex.flexRow,
+        ...flex.alignItemsCenter,
+    },
 };
 
 export default styles;

From cd58d75bcbfd8f2d8f60b782626d04f6c5bdcb14 Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Tue, 1 Aug 2023 20:39:11 +0530
Subject: [PATCH 03/12] remove height from another button

---
 src/components/ButtonWithDropdownMenu.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 195941ce307d..ee8b7812cebf 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -119,8 +119,6 @@ function ButtonWithDropdownMenu(props) {
                     text={selectedItem.text}
                     onPress={(event) => props.onPress(event, props.options[0].value)}
                     pressOnEnter
-                    medium
-                    innerStyles={[styles.dropButtonHeight]}
                 />
             )}
             {props.options.length > 1 && !_.isEmpty(popoverAnchorPosition) && (

From da12fd001396e6256d647e7a78cb2d99d4cce04e Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Wed, 2 Aug 2023 11:22:01 +0530
Subject: [PATCH 04/12] use borderwidth instead of normal width

---
 src/styles/styles.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index c6c63bb856fd..3a83ba253efb 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -560,9 +560,9 @@ const styles = {
     },
 
     buttonDivider: {
-        width: 1,
-        backgroundColor: themeColors.text,
         height: 28,
+        borderWidth: 1,
+        borderColor: themeColors.text,
     },
 
     noBorderRadius: {

From 76ace6f7266315c714446366aaceef421ad4ecc5 Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Wed, 2 Aug 2023 11:28:30 +0530
Subject: [PATCH 05/12] remove unused import

---
 src/components/ButtonWithDropdownMenu.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index ee8b7812cebf..e591099bdc39 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -10,7 +10,6 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import themeColors from '../styles/themes/default';
 import CONST from '../CONST';
-import variables from '../styles/variables';
 
 const propTypes = {
     /** Text to display for the menu header */

From 4655faa43a27530eaa8f374fe6730d7d6e47346e Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Thu, 3 Aug 2023 21:49:52 +0530
Subject: [PATCH 06/12] adjust border as per design

---
 src/styles/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 108144e4afe6..29af3fdd7f74 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -565,7 +565,7 @@ const styles = {
 
     buttonDivider: {
         height: 28,
-        borderWidth: 1,
+        borderWidth: 0.7,
         borderColor: themeColors.text,
     },
 

From 638d0326c631c60838e75d6b8c29d67b36e22c22 Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Tue, 8 Aug 2023 01:29:35 +0530
Subject: [PATCH 07/12] Added both size for dropDown option

---
 src/components/ButtonWithDropdownMenu.js      | 25 +++++++++++++------
 .../MoneyRequestConfirmationList.js           |  2 ++
 src/components/SettlementButton.js            |  5 ++++
 src/styles/StyleUtils.js                      | 17 +++++++++++++
 src/styles/styles.js                          |  8 +-----
 5 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index e591099bdc39..4fd8c47f690e 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -10,6 +10,7 @@ import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import themeColors from '../styles/themes/default';
 import CONST from '../CONST';
+import * as StyleUtils from '../styles/StyleUtils';
 
 const propTypes = {
     /** Text to display for the menu header */
@@ -21,6 +22,9 @@ const propTypes = {
     /** Whether we should show a loading state for the main button */
     isLoading: PropTypes.bool,
 
+    /** Whether the button size should be large */
+    buttonsizelarge: PropTypes.bool,
+
     /** Should the confirmation button be disabled? */
     isDisabled: PropTypes.bool,
 
@@ -46,6 +50,7 @@ const defaultProps = {
     isDisabled: false,
     menuHeaderText: '',
     style: [],
+    buttonsizelarge: false,
 };
 
 function ButtonWithDropdownMenu(props) {
@@ -55,6 +60,7 @@ function ButtonWithDropdownMenu(props) {
     const {windowWidth, windowHeight} = useWindowDimensions();
     const caretButton = useRef(null);
     const selectedItem = props.options[selectedItemIndex];
+    const innerStyleDropButton = StyleUtils.getButtonHeight(props.buttonsizelarge);
 
     useEffect(() => {
         if (!caretButton.current) {
@@ -84,8 +90,9 @@ function ButtonWithDropdownMenu(props) {
                         shouldRemoveRightBorderRadius
                         style={[styles.flex1, styles.pr0]}
                         pressOnEnter
-                        medium
-                        innerStyles={[styles.dropButtonHeight]}
+                        large={props.buttonsizelarge}
+                        medium={!props.buttonsizelarge}
+                        innerStyles={[innerStyleDropButton]}
                     />
 
                     <Button
@@ -95,12 +102,13 @@ function ButtonWithDropdownMenu(props) {
                         style={[styles.pl0]}
                         onPress={() => setIsMenuVisible(true)}
                         shouldRemoveLeftBorderRadius
-                        medium
-                        innerStyles={[styles.cartIconContainer]}
+                        large={props.buttonsizelarge}
+                        medium={!props.buttonsizelarge}
+                        innerStyles={[styles.cartIconContainerPadding, innerStyleDropButton]}
                     >
-                        <View style={[styles.cartIconView]}>
-                            <View style={styles.buttonDivider} />
-                            <View style={[styles.ph4]}>
+                        <View style={[styles.cartIconView, innerStyleDropButton]}>
+                            <View style={[styles.buttonDivider]} />
+                            <View style={[{marginLeft: 12, marginRight: 14}]}>
                                 <Icon
                                     src={Expensicons.DownArrow}
                                     fill={themeColors.textLight}
@@ -118,6 +126,9 @@ function ButtonWithDropdownMenu(props) {
                     text={selectedItem.text}
                     onPress={(event) => props.onPress(event, props.options[0].value)}
                     pressOnEnter
+                    large={props.buttonsizelarge}
+                    medium={!props.buttonsizelarge}
+                    innerStyles={[innerStyleDropButton]}
                 />
             )}
             {props.options.length > 1 && !_.isEmpty(popoverAnchorPosition) && (
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index e421dae4e37e..74dee5df3fbd 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -303,12 +303,14 @@ function MoneyRequestConfirmationList(props) {
                 currency={props.iouCurrencyCode}
                 policyID={props.policyID}
                 shouldShowPaymentOptions
+                buttonsizelarge
             />
         ) : (
             <ButtonWithDropdownMenu
                 isDisabled={shouldDisableButton}
                 onPress={(_event, value) => confirm(value)}
                 options={splitOrRequestOptions}
+                buttonsizelarge
             />
         );
     }, [confirm, props.selectedParticipants, props.bankAccountRoute, props.iouCurrencyCode, props.iouType, props.isReadOnly, props.policyID, selectedParticipants, splitOrRequestOptions]);
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
index 14afc30568cf..503933376153 100644
--- a/src/components/SettlementButton.js
+++ b/src/components/SettlementButton.js
@@ -57,6 +57,9 @@ const propTypes = {
     /** Total money amount in form <currency><amount> */
     formattedAmount: PropTypes.string,
 
+    /** Additional styles for button */
+    buttonsizelarge: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
@@ -71,6 +74,7 @@ const defaultProps = {
     iouReport: {},
     policyID: '',
     formattedAmount: '',
+    buttonsizelarge: false,
 };
 
 class SettlementButton extends React.Component {
@@ -178,6 +182,7 @@ class SettlementButton extends React.Component {
                         }}
                         options={this.getButtonOptionsFromProps()}
                         style={this.props.style}
+                        buttonsizelarge={this.props.buttonsizelarge}
                     />
                 )}
             </KYCWall>
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index fe910389c39c..49a05ca701eb 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -1302,6 +1302,22 @@ function getCheckboxContainerStyle(size, borderRadius) {
     };
 }
 
+/**
+ * Returns style object for the dropbutton height
+ * @param {Boolean} isLargeButton
+ * @returns {Object}
+ */
+function getButtonHeight(isLargeButton) {
+    if (isLargeButton) {
+        return {
+            height: variables.componentSizeLarge,
+        };
+    }
+    return {
+        height: variables.componentSizeNormal,
+    };
+}
+
 export {
     getAvatarSize,
     getAvatarWidthStyle,
@@ -1375,4 +1391,5 @@ export {
     getMenuItemTextContainerStyle,
     getDisabledLinkStyles,
     getCheckboxContainerStyle,
+    getButtonHeight,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 29af3fdd7f74..99b85a95e958 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3632,12 +3632,7 @@ const styles = {
         willChange: 'transform',
     },
 
-    dropButtonHeight: {
-        height: variables.componentSizeNormal,
-    },
-
-    cartIconContainer: {
-        height: variables.componentSizeNormal,
+    cartIconContainerPadding: {
         paddingRight: 0,
         paddingLeft: 0,
     },
@@ -3645,7 +3640,6 @@ const styles = {
     cartIconView: {
         borderTopRightRadius: variables.buttonBorderRadius,
         borderBottomRightRadius: variables.buttonBorderRadius,
-        height: variables.componentSizeNormal,
         ...flex.flexRow,
         ...flex.alignItemsCenter,
     },

From bd1c57fe7efead59da37c68ed8d917f156936538 Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Mon, 14 Aug 2023 12:51:09 +0530
Subject: [PATCH 08/12] code improvements

---
 src/components/ButtonWithDropdownMenu.js | 8 ++++----
 src/styles/StyleUtils.js                 | 4 ++--
 src/styles/styles.js                     | 9 +++++++--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 7f0c28a47b3d..3540919a4601 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -70,7 +70,7 @@ function ButtonWithDropdownMenu(props) {
     const {windowWidth, windowHeight} = useWindowDimensions();
     const caretButton = useRef(null);
     const selectedItem = props.options[selectedItemIndex];
-    const innerStyleDropButton = StyleUtils.getButtonHeight(props.buttonsizelarge);
+    const innerStyleDropButton = StyleUtils.getDropDownButtonHeight(props.buttonsizelarge);
 
     useEffect(() => {
         if (!caretButton.current) {
@@ -117,11 +117,11 @@ function ButtonWithDropdownMenu(props) {
                         shouldRemoveLeftBorderRadius
                         large={props.buttonsizelarge}
                         medium={!props.buttonsizelarge}
-                        innerStyles={[styles.cartIconContainerPadding, innerStyleDropButton]}
+                        innerStyles={[styles.dropDownButtonCartIconContainerPadding, innerStyleDropButton]}
                     >
-                        <View style={[styles.cartIconView, innerStyleDropButton]}>
+                        <View style={[styles.dropDownButtonCartIconView, innerStyleDropButton]}>
                             <View style={[styles.buttonDivider]} />
-                            <View style={[{marginLeft: 12, marginRight: 14}]}>
+                            <View style={[styles.dropDownButtonArrowContain]}>
                                 <Icon
                                     src={Expensicons.DownArrow}
                                     fill={themeColors.textLight}
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 49a05ca701eb..71373a110654 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -1307,7 +1307,7 @@ function getCheckboxContainerStyle(size, borderRadius) {
  * @param {Boolean} isLargeButton
  * @returns {Object}
  */
-function getButtonHeight(isLargeButton) {
+function getDropDownButtonHeight(isLargeButton) {
     if (isLargeButton) {
         return {
             height: variables.componentSizeLarge,
@@ -1391,5 +1391,5 @@ export {
     getMenuItemTextContainerStyle,
     getDisabledLinkStyles,
     getCheckboxContainerStyle,
-    getButtonHeight,
+    getDropDownButtonHeight,
 };
diff --git a/src/styles/styles.js b/src/styles/styles.js
index b20cdc9b71e6..d1502b9d5409 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -3642,12 +3642,17 @@ const styles = {
         willChange: 'transform',
     },
 
-    cartIconContainerPadding: {
+    dropDownButtonCartIconContainerPadding: {
         paddingRight: 0,
         paddingLeft: 0,
     },
 
-    cartIconView: {
+    dropDownButtonArrowContain: {
+        marginLeft: 12,
+        marginRight: 14,
+    },
+
+    dropDownButtonCartIconView: {
         borderTopRightRadius: variables.buttonBorderRadius,
         borderBottomRightRadius: variables.buttonBorderRadius,
         ...flex.flexRow,

From c1d97650b4faa8dc2e33dcb3d833eab5cc4c7cd2 Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Mon, 14 Aug 2023 14:49:25 +0530
Subject: [PATCH 09/12] Added size const and refactor code

---
 src/CONST.js                                  |  5 +++++
 src/components/ButtonWithDropdownMenu.js      | 21 ++++++++++---------
 .../MoneyRequestConfirmationList.js           |  4 ++--
 src/components/SettlementButton.js            |  9 ++++----
 src/styles/StyleUtils.js                      |  6 +++---
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/CONST.js b/src/CONST.js
index 4c19965837d9..233da0b13cb7 100755
--- a/src/CONST.js
+++ b/src/CONST.js
@@ -2534,6 +2534,11 @@ const CONST = {
         DISTANCE: 'distance',
     },
     STATUS_TEXT_MAX_LENGTH: 100,
+
+    DROPDOWN_BUTTON_SIZE: {
+        LARGE: 'large',
+        MEDIUM: 'medium',
+    },
 };
 
 export default CONST;
diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
index 3540919a4601..c8bdf0ec6d3c 100644
--- a/src/components/ButtonWithDropdownMenu.js
+++ b/src/components/ButtonWithDropdownMenu.js
@@ -22,8 +22,8 @@ const propTypes = {
     /** Whether we should show a loading state for the main button */
     isLoading: PropTypes.bool,
 
-    /** Whether the button size should be large */
-    buttonsizelarge: PropTypes.bool,
+    /** The size of button size */
+    buttonSize: PropTypes.oneOf(_.values(CONST.DROPDOWN_BUTTON_SIZE)),
 
     /** Should the confirmation button be disabled? */
     isDisabled: PropTypes.bool,
@@ -56,7 +56,7 @@ const defaultProps = {
     isDisabled: false,
     menuHeaderText: '',
     style: [],
-    buttonsizelarge: false,
+    buttonSize: CONST.DROPDOWN_BUTTON_SIZE.MEDIUM,
     anchorAlignment: {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
@@ -70,7 +70,8 @@ function ButtonWithDropdownMenu(props) {
     const {windowWidth, windowHeight} = useWindowDimensions();
     const caretButton = useRef(null);
     const selectedItem = props.options[selectedItemIndex];
-    const innerStyleDropButton = StyleUtils.getDropDownButtonHeight(props.buttonsizelarge);
+    const innerStyleDropButton = StyleUtils.getDropDownButtonHeight(props.buttonSize);
+    const isButtonSizeLarge = props.buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE;
 
     useEffect(() => {
         if (!caretButton.current) {
@@ -103,8 +104,8 @@ function ButtonWithDropdownMenu(props) {
                         shouldRemoveRightBorderRadius
                         style={[styles.flex1, styles.pr0]}
                         pressOnEnter
-                        large={props.buttonsizelarge}
-                        medium={!props.buttonsizelarge}
+                        large={isButtonSizeLarge}
+                        medium={!isButtonSizeLarge}
                         innerStyles={[innerStyleDropButton]}
                     />
 
@@ -115,8 +116,8 @@ function ButtonWithDropdownMenu(props) {
                         style={[styles.pl0]}
                         onPress={() => setIsMenuVisible(true)}
                         shouldRemoveLeftBorderRadius
-                        large={props.buttonsizelarge}
-                        medium={!props.buttonsizelarge}
+                        large={isButtonSizeLarge}
+                        medium={!isButtonSizeLarge}
                         innerStyles={[styles.dropDownButtonCartIconContainerPadding, innerStyleDropButton]}
                     >
                         <View style={[styles.dropDownButtonCartIconView, innerStyleDropButton]}>
@@ -139,8 +140,8 @@ function ButtonWithDropdownMenu(props) {
                     text={selectedItem.text}
                     onPress={(event) => props.onPress(event, props.options[0].value)}
                     pressOnEnter
-                    large={props.buttonsizelarge}
-                    medium={!props.buttonsizelarge}
+                    large={isButtonSizeLarge}
+                    medium={!isButtonSizeLarge}
                     innerStyles={[innerStyleDropButton]}
                 />
             )}
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
index 1788ab7d95b3..3912484bba0d 100755
--- a/src/components/MoneyRequestConfirmationList.js
+++ b/src/components/MoneyRequestConfirmationList.js
@@ -303,7 +303,7 @@ function MoneyRequestConfirmationList(props) {
                 currency={props.iouCurrencyCode}
                 policyID={props.policyID}
                 shouldShowPaymentOptions
-                buttonsizelarge
+                buttonSize={CONST.DROPDOWN_BUTTON_SIZE.LARGE}
                 anchorAlignment={{
                     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
@@ -314,7 +314,7 @@ function MoneyRequestConfirmationList(props) {
                 isDisabled={shouldDisableButton}
                 onPress={(_event, value) => confirm(value)}
                 options={splitOrRequestOptions}
-                buttonsizelarge
+                buttonSize={CONST.DROPDOWN_BUTTON_SIZE.LARGE}
             />
         );
     }, [confirm, props.selectedParticipants, props.bankAccountRoute, props.iouCurrencyCode, props.iouType, props.isReadOnly, props.policyID, selectedParticipants, splitOrRequestOptions]);
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
index 89c059e8279c..1f0d6f8dfad3 100644
--- a/src/components/SettlementButton.js
+++ b/src/components/SettlementButton.js
@@ -57,8 +57,9 @@ const propTypes = {
     /** Total money amount in form <currency><amount> */
     formattedAmount: PropTypes.string,
 
-    /** Additional styles for button */
-    buttonsizelarge: PropTypes.bool,
+    /** The size of button size */
+    buttonSize: PropTypes.oneOf(_.values(CONST.DROPDOWN_BUTTON_SIZE)),
+
     /** The anchor alignment of the popover menu */
 
     anchorAlignment: PropTypes.shape({
@@ -80,7 +81,7 @@ const defaultProps = {
     iouReport: {},
     policyID: '',
     formattedAmount: '',
-    buttonsizelarge: false,
+    buttonSize: CONST.DROPDOWN_BUTTON_SIZE.MEDIUM,
     anchorAlignment: {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
@@ -192,7 +193,7 @@ class SettlementButton extends React.Component {
                         }}
                         options={this.getButtonOptionsFromProps()}
                         style={this.props.style}
-                        buttonsizelarge={this.props.buttonsizelarge}
+                        buttonSize={this.props.buttonSize}
                         anchorAlignment={this.props.anchorAlignment}
                     />
                 )}
diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js
index 71373a110654..425c8ebea691 100644
--- a/src/styles/StyleUtils.js
+++ b/src/styles/StyleUtils.js
@@ -1304,11 +1304,11 @@ function getCheckboxContainerStyle(size, borderRadius) {
 
 /**
  * Returns style object for the dropbutton height
- * @param {Boolean} isLargeButton
+ * @param {String} buttonSize
  * @returns {Object}
  */
-function getDropDownButtonHeight(isLargeButton) {
-    if (isLargeButton) {
+function getDropDownButtonHeight(buttonSize) {
+    if (buttonSize === CONST.DROPDOWN_BUTTON_SIZE.LARGE) {
         return {
             height: variables.componentSizeLarge,
         };

From d70a51a157bdd78988105562f436f48cba2a2d84 Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Tue, 15 Aug 2023 01:21:52 +0530
Subject: [PATCH 10/12] unit test failed


From 1c35cb548a8995a11f3d258b5db31065908ee6cf Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Sat, 19 Aug 2023 01:36:46 +0530
Subject: [PATCH 11/12] use variable.js

---
 src/styles/styles.js    | 2 +-
 src/styles/variables.js | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index 698fc19e1dbe..e8ff523b3274 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -564,7 +564,7 @@ const styles = {
     },
 
     buttonDivider: {
-        height: 28,
+        height: variables.dropDownButtonDivider,
         borderWidth: 0.7,
         borderColor: themeColors.text,
     },
diff --git a/src/styles/variables.js b/src/styles/variables.js
index af4d81c93c79..c6c6d085cb6a 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -143,6 +143,7 @@ export default {
     addPaymentPopoverTopSpacing: 8,
     addPaymentPopoverRightSpacing: 13,
     anonymousReportFooterBreakpoint: 650,
+    dropDownButtonDivider: 28,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
     // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility

From 6ab178e0f1a6d601f44b9f1876e93f8508266faf Mon Sep 17 00:00:00 2001
From: dhairyasenjaliya <dhairyasenjaliya@gmail.com>
Date: Sat, 19 Aug 2023 01:46:01 +0530
Subject: [PATCH 12/12] name correction

---
 src/styles/styles.js    | 2 +-
 src/styles/variables.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/styles.js b/src/styles/styles.js
index e8ff523b3274..8ec6aefd274d 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -564,7 +564,7 @@ const styles = {
     },
 
     buttonDivider: {
-        height: variables.dropDownButtonDivider,
+        height: variables.dropDownButtonDividerHeight,
         borderWidth: 0.7,
         borderColor: themeColors.text,
     },
diff --git a/src/styles/variables.js b/src/styles/variables.js
index c6c6d085cb6a..b62e9e3cba7c 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -143,7 +143,7 @@ export default {
     addPaymentPopoverTopSpacing: 8,
     addPaymentPopoverRightSpacing: 13,
     anonymousReportFooterBreakpoint: 650,
-    dropDownButtonDivider: 28,
+    dropDownButtonDividerHeight: 28,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
     // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility