[HOLD for payment 2023-09-12] [$1000] MEDIUM: Polish: Display Receipts in-Chat Design Edits

[dylanexpensify]

We've created the ability to display receipts in chat, however we need a few design elements updated to reflect our standards. See below:

• For the scanning label, can we make sure that everything is aligned to the left? There should be 12px of gap between the badge and the text:
  

• Also notice that we want to keep a smaller gap between the bottom of the header avatar and the badge, it should be just 12px apart

• The text in the Scanning banner shouldn't be right-aligned:

• The receipt thumbnail in the request view on desktop/web shouldn't be full width:
  

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ce3c3935c5b256ff
• Upwork Job ID: 1696487150157152256
• Last Price Increase: 2023-08-29

[melvin-bot]

Current assignee @dylanexpensify is eligible for the NewFeature assigner, not assigning anyone new.

[neonbhai]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Polish: Display Receipts in-Chat Design Edits

What is the root cause of that problem?

New Feature

What changes do you think we should make in order to solve the problem?

• To left align:
  The wrapping view should have styles.justifyContentStart here:

  App/src/components/MoneyRequestHeaderStatusBar.js

  Line 17 in c975de8

  styles.justifyContentBetween,

• To fix the spacing between scanning badge and the text:

  The current right margin comes from the css for this badge define in moneyRequestHeaderStatusBarBadge in styles.css here. For the correct spacing the value of marginRight in this CSS should be 12:

  App/src/styles/styles.js

  Lines 3793 to 3798 in c975de8

  	moneyRequestHeaderStatusBarBadge: {
  	padding: 8,
  	borderRadius: variables.componentBorderRadiusMedium,
  	marginRight: 16,
  	backgroundColor: themeColors.border,
  	},

• To fix gap between bottom of header avatar and badge:

  The current distance is 24px. 12px on applied on the bottom of header avatar and 12px applied on top of scanning banner.

  We should just remove the top padding from the wrapping View of the Scanning banner. This means, instead of styles.pv3 here, which applies a padding on both top and bottom, we just add padding to the bottom using styles.pb3:

  App/src/components/MoneyRequestHeaderStatusBar.js

  Line 20 in 1139e7c

  styles.pv3,

• The receipt thumbnail is rendered here:

  App/src/components/ReportActionItem/MoneyRequestView.js

  Lines 105 to 111 in 3f9f1e6

  	<View style={styles.moneyRequestViewImage}>
  	<ReportActionItemImage
  	thumbnail={receiptURIs.thumbnail}
  	image={receiptURIs.image}
  	enablePreviewModal
  	/>
  	</View>

  
  We can modify the css to be not full width using its dedicated CSS style here:

  App/src/styles/styles.js

  Line 3834 in 3b07866

  moneyRequestViewImage: {

What alternative solutions did you explore? (Optional)

xx

[lukemorawski]

Hi, it's Lucas from Callstack. Happy to have a go on that!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01ce3c3935c5b256ff