[HOLD for payment 2024-06-20] [HOLD for payment 2024-06-18] [$250] IOU Scan - In dark mode, the damaged PDF - file is barely visible

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.58-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4467055
Issue reported by: Applause - Internal Team

Action Performed:

Pre-condition:use dark mode

1. Go to https://staging.new.expensify.com/home
2. Tap on workspace chat
3. Tap plus icon -- request money -- scan
4. Upload corrupt pdf attached below

Expected Result:

In dark mode, failed to load pdf message must be clearly visible while uploading corrupt pdf

Actual Result:

In dark mode, failed to load pdf message is barely visible while uploading corrupt pdf

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6434200_1711975273611.sis.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01caa5c1b848d17f6b
• Upwork Job ID: 1778050286258974720
• Last Price Increase: 2024-04-10
• Automatic offers:
• jayeshmangwani | Reviewer | 0
• Krishna2323 | Contributor | 0

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[lanitochka17]

@JmillsExpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[Krishna2323]

Proposal

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

IOU Scan - In dark mode, the damaged PDF - file is barely visible

What is the root cause of that problem?

The root cause it that the Document is using the default styles for showing the error message since we haven't added our custom component using error prop.

App/src/components/PDFThumbnail/index.tsx

Lines 20 to 29 in 80eb3b7

	<Document
	loading={<FullScreenLoadingIndicator />}
	file={isAuthTokenRequired ? addEncryptedAuthTokenToURL(previewSourceURL) : previewSourceURL}
	options={{
	cMapUrl: 'cmaps/',
	cMapPacked: true,
	}}
	externalLinkTarget="_blank"
	onPassword={onPassword}
	>

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

We need to add the custom component like we do in WebPDFDocument.

App/src/components/PDFView/WebPDFDocument.js

Lines 96 to 99 in 80eb3b7

	<Document
	loading={<FullScreenLoadingIndicator />}
	error={<Text style={errorLabelStyles}>{translate('attachmentView.failedToLoadPDF')}</Text>}
	file={sourceURL}

We might want to add default styles like textLabel but that can be discussed. Additionally we can errorLabelStyles just like we do in WebPDFDocument. Styling changes can be discussed.

Styles we use in AttachmentView.

App/src/components/Attachments/AttachmentView/index.tsx

Line 173 in c848cb6

errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]}

Result

[Krishna2323]

Proposal Updated.

• Added style reference

[dragnoir]

Proposal

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

In dark mode, the damaged PDF - text missing style

What is the root cause of that problem?

We can see how the same component in some places of the app, text is white and other areas, the text is dark.

The used component Document, grab the style for the text color from the nearest parent component that sets the style for the text.

App/src/components/PDFThumbnail/index.tsx

Line 20 in aacfa8c

<Document

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

We should encapsulate the Document component within a View that applies the necessary styling to the text. By doing this, we ensure consistent text styling across all instances where the PDFThumbnail component is used.

As example we can use

+ <View  style={[styles.textVersion]}>
    <Document
      loading={<FullScreenLoadingIndicator  />}

POC:

[dragnoir]

cc @Expensify/design for thought on how to style the Failed to load PDF file. text!

[melvin-bot]

@JmillsExpensify Still overdue 6 days?! Let's take care of this!

[JmillsExpensify]

I think this is a good one to tackle as part of #wave-collect so I'm adding to that project.