Merge pull request #21131 from daraksha-dk/daraksha-dk-update-compose…

…r-height feat req: increase composer's height to 48px
Expensify · Jun 26, 2023 · 1e308ca · 1e308ca
2 parents f867c17 + 6b2bb9c
commit 1e308ca
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -953,7 +953,7 @@ class ReportActionCompose extends React.Component {
                                                     style={[
                                                         styles.dFlex,
                                                         styles.flexColumn,
-                                                        isFullComposerAvailable || this.props.isComposerFullSize ? styles.justifyContentBetween : styles.justifyContentEnd,
+                                                        isFullComposerAvailable || this.props.isComposerFullSize ? styles.justifyContentBetween : styles.justifyContentCenter,
                                                     ]}
                                                 >
                                                     {this.props.isComposerFullSize && (

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1274,7 +1274,7 @@ const styles = {
 
     createMenuPositionReportActionCompose: (windowHeight) => ({
         horizontal: 18 + variables.sideBarWidth,
-        vertical: windowHeight - 75,
+        vertical: windowHeight - 83,
     }),
 
     createMenuPositionRightSidepane: {
@@ -1550,7 +1550,7 @@ const styles = {
         backgroundColor: themeColors.componentBG,
         borderWidth: 1,
         borderRadius: variables.componentBorderRadiusRounded,
-        minHeight: variables.componentSizeNormal,
+        minHeight: variables.componentSizeMedium,
     },
 
     chatItemFullComposeBox: {
@@ -1636,8 +1636,8 @@ const styles = {
         alignSelf: 'flex-end',
         borderRadius: variables.componentBorderRadiusRounded,
         backgroundColor: themeColors.transparent,
-        height: 32,
-        padding: 6,
+        height: 40,
+        padding: 10,
         margin: 3,
         justifyContent: 'center',
     },
@@ -1704,9 +1704,9 @@ const styles = {
     chatItemEmojiButton: {
         alignSelf: 'flex-end',
         borderRadius: variables.buttonBorderRadius,
-        height: 32,
+        height: 40,
         marginVertical: 3,
-        paddingHorizontal: 6,
+        paddingHorizontal: 10,
         justifyContent: 'center',
     },
 
@@ -1727,6 +1727,7 @@ const styles = {
         margin: 3,
         borderRadius: variables.componentBorderRadiusRounded,
         backgroundColor: themeColors.transparent,
+        justifyContent: 'center',
     },
 
     chatItemAttachmentPlaceholder: {

diff --git a/src/styles/variables.js b/src/styles/variables.js
@@ -18,6 +18,7 @@ export default {
     contentHeaderHeight: getValueUsingPixelRatio(65, 100),
     componentSizeSmall: getValueUsingPixelRatio(28, 32),
     componentSizeNormal: 40,
+    componentSizeMedium: 48,
     inputComponentSizeNormal: 40,
     componentSizeLarge: 52,
     componentBorderRadius: 8,
@@ -26,7 +27,7 @@ export default {
     componentBorderRadiusNormal: 8,
     componentBorderRadiusLarge: 16,
     componentBorderRadiusCard: 12,
-    componentBorderRadiusRounded: 20,
+    componentBorderRadiusRounded: 24,
     buttonBorderRadius: 100,
     avatarSizeLarge: 80,
     avatarSizeHeader: 40,