From 4c07cac031eac42b9af03fb303a184abed9a8caa Mon Sep 17 00:00:00 2001 From: Daraksha Date: Tue, 20 Jun 2023 20:07:23 +0530 Subject: [PATCH 1/9] add new var --- src/styles/variables.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/variables.js b/src/styles/variables.js index e0a9b78e60cb..96231e1b24ff 100644 --- 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, From 214a1906b7e74d36f6b2b8fc5fcb562aabc4f247 Mon Sep 17 00:00:00 2001 From: Daraksha Date: Tue, 20 Jun 2023 20:08:40 +0530 Subject: [PATCH 2/9] updat heights of composer and its buttons --- src/styles/styles.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/styles/styles.js b/src/styles/styles.js index 874205afa219..0dfe6edce787 100644 --- 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', }, @@ -1721,12 +1721,13 @@ const styles = { composerSizeButton: { alignSelf: 'center', - height: 32, + height: 40, width: 32, padding: 6, margin: 3, borderRadius: variables.componentBorderRadiusRounded, backgroundColor: themeColors.transparent, + justifyContent: 'center', }, chatItemAttachmentPlaceholder: { From c0d85905b9dd59824b416cecdb3c0d5dabe8deb0 Mon Sep 17 00:00:00 2001 From: Daraksha Date: Tue, 20 Jun 2023 21:55:51 +0530 Subject: [PATCH 3/9] make composeBox rounded --- src/styles/variables.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/variables.js b/src/styles/variables.js index 96231e1b24ff..c4b96fda8cac 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -27,7 +27,7 @@ export default { componentBorderRadiusNormal: 8, componentBorderRadiusLarge: 16, componentBorderRadiusCard: 12, - componentBorderRadiusRounded: 20, + componentBorderRadiusRounded: 100, buttonBorderRadius: 100, avatarSizeLarge: 80, avatarSizeHeader: 40, From 4d85b2bada89e21efec2617010e5ed1dbd1e602f Mon Sep 17 00:00:00 2001 From: Daraksha Date: Wed, 21 Jun 2023 16:37:03 +0530 Subject: [PATCH 4/9] reduced composer buttons' height and centered it --- src/pages/home/report/ReportActionCompose.js | 2 +- src/styles/styles.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 35e33bb5170a..8399ab039ba1 100644 --- 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 index 0dfe6edce787..01d50fc54df7 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1721,7 +1721,7 @@ const styles = { composerSizeButton: { alignSelf: 'center', - height: 40, + height: 32, width: 32, padding: 6, margin: 3, From bd305095e97c5a452608a2540b4a0fb9d5081f9f Mon Sep 17 00:00:00 2001 From: Daraksha Date: Wed, 21 Jun 2023 16:38:01 +0530 Subject: [PATCH 5/9] fix border radius --- src/styles/variables.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/variables.js b/src/styles/variables.js index c4b96fda8cac..e18062beb2e5 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -27,7 +27,7 @@ export default { componentBorderRadiusNormal: 8, componentBorderRadiusLarge: 16, componentBorderRadiusCard: 12, - componentBorderRadiusRounded: 100, + componentBorderRadiusRounded: 24, buttonBorderRadius: 100, avatarSizeLarge: 80, avatarSizeHeader: 40, From b6e8042c1a8627dce598c17931e9bbac2081c307 Mon Sep 17 00:00:00 2001 From: Daraksha Date: Fri, 23 Jun 2023 21:41:47 +0530 Subject: [PATCH 6/9] use minHeight for single button --- src/pages/home/report/ReportActionCompose.js | 4 ++-- src/styles/utilities/sizing.js | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 8399ab039ba1..fdbaf108c5dc 100644 --- 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.justifyContentCenter, + isFullComposerAvailable || this.props.isComposerFullSize ? styles.justifyContentBetween : styles.justifyContentEnd, ]} > {this.props.isComposerFullSize && ( @@ -1004,7 +1004,7 @@ class ReportActionCompose extends React.Component { this.actionButton.blur(); this.setMenuVisibility(true); }} - style={styles.composerSizeButton} + style={[styles.composerSizeButton, !this.props.isComposerFullSize && !isFullComposerAvailable ? styles.mnh10 : undefined]} disabled={isBlockedFromConcierge || this.props.disabled} accessibilityRole="button" accessibilityLabel={this.props.translate('reportActionCompose.addAction')} diff --git a/src/styles/utilities/sizing.js b/src/styles/utilities/sizing.js index 5d19b2e09dcc..7f07051f719a 100644 --- a/src/styles/utilities/sizing.js +++ b/src/styles/utilities/sizing.js @@ -20,6 +20,10 @@ export default { width: '25%', }, + mnh10: { + minHeight: 40, + }, + mnh100: { minHeight: '100%', }, From bf127b887704396fcef810245d7f6d9cecd399fb Mon Sep 17 00:00:00 2001 From: Daraksha Date: Fri, 23 Jun 2023 22:02:52 +0530 Subject: [PATCH 7/9] remove minHeight --- src/pages/home/report/ReportActionCompose.js | 2 +- src/styles/styles.js | 2 +- src/styles/utilities/sizing.js | 4 ---- 3 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index fdbaf108c5dc..05a87e68bc38 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -1004,7 +1004,7 @@ class ReportActionCompose extends React.Component { this.actionButton.blur(); this.setMenuVisibility(true); }} - style={[styles.composerSizeButton, !this.props.isComposerFullSize && !isFullComposerAvailable ? styles.mnh10 : undefined]} + style={[styles.composerSizeButton]} disabled={isBlockedFromConcierge || this.props.disabled} accessibilityRole="button" accessibilityLabel={this.props.translate('reportActionCompose.addAction')} diff --git a/src/styles/styles.js b/src/styles/styles.js index 01d50fc54df7..0dfe6edce787 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1721,7 +1721,7 @@ const styles = { composerSizeButton: { alignSelf: 'center', - height: 32, + height: 40, width: 32, padding: 6, margin: 3, diff --git a/src/styles/utilities/sizing.js b/src/styles/utilities/sizing.js index 7f07051f719a..5d19b2e09dcc 100644 --- a/src/styles/utilities/sizing.js +++ b/src/styles/utilities/sizing.js @@ -20,10 +20,6 @@ export default { width: '25%', }, - mnh10: { - minHeight: 40, - }, - mnh100: { minHeight: '100%', }, From bc9fecbd1488631b351d1bf2b7109f5f692971c9 Mon Sep 17 00:00:00 2001 From: Daraksha Date: Fri, 23 Jun 2023 22:07:30 +0530 Subject: [PATCH 8/9] undo --- src/pages/home/report/ReportActionCompose.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 05a87e68bc38..35e33bb5170a 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -1004,7 +1004,7 @@ class ReportActionCompose extends React.Component { this.actionButton.blur(); this.setMenuVisibility(true); }} - style={[styles.composerSizeButton]} + style={styles.composerSizeButton} disabled={isBlockedFromConcierge || this.props.disabled} accessibilityRole="button" accessibilityLabel={this.props.translate('reportActionCompose.addAction')} From 6b2bb9c6aee222199ac5752e507ad0e833f378d6 Mon Sep 17 00:00:00 2001 From: Daraksha Date: Sat, 24 Jun 2023 10:53:15 +0530 Subject: [PATCH 9/9] use justifyCenter for single icon in composer --- src/pages/home/report/ReportActionCompose.js | 2 +- src/styles/styles.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 35e33bb5170a..8399ab039ba1 100644 --- 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 index 0dfe6edce787..01d50fc54df7 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1721,7 +1721,7 @@ const styles = { composerSizeButton: { alignSelf: 'center', - height: 40, + height: 32, width: 32, padding: 6, margin: 3,