-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat: Implement to use a 👍icon next to approved report preview #50387
base: main
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please add platform screenshots
@@ -145,12 +145,18 @@ function ReportPreview({ | |||
transform: [{scale: checkMarkScale.value}], | |||
})); | |||
|
|||
const isApproved = ReportUtils.isReportApproved(iouReport, action); | |||
const thumbsUpScale = useSharedValue(isApproved ? 1 : 0.25); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
0.25 - where does this value come from? what issue with 0?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
bump ^
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we use 0
, it will look less subtle than this . #49847 (comment)
@situchan, can you please check this comment? |
@Expensify/design, please check if the animation of the thumbs-up icon looks correct or not. Monosnap.screencast.2024-10-02.05-53-34.mp4 |
@Expensify/design, friendly bump ^ |
@Expensify/design ^ |
That looks good to me. Keen to hear the others thoughts. I do see a slight jump when the Red Dot disappears though which I think we should probably fix 🤔 |
Agree about the RBR not going away immediately. It is weird to see the thumbs up icon before the RBR goes away. We also might want to consider making that top eyebrow line use a height of 20px so we don't get a small jump from 20px down to 16px height once the RBR goes away. |
@Krishna2323 what is status? |
Will work on these issues today. |
Signed-off-by: krishna2323 <[email protected]>
Signed-off-by: krishna2323 <[email protected]>
@situchan, I have increased the line-height of the text beside RBR so it won't jump when the RBR is removed. As for the RBR not being removed immediately, I believe that's a separate issue from what we are trying to solve, and I don't have time to investigate it in-depth. I have very limited time these days as I’ve been dealing with health issues for the past 2-3 months. Sorry :( |
Agree "RBR not being removed immediately" is out of scope.
👍 |
Reviewer Checklist
Screenshots/VideosAndroid: NativeAndroid: mWeb ChromeiOS: NativeiOS: mWeb SafariMacOS: Chrome / SafariMacOS: Desktop |
@Krishna2323 please also add test: pay after approve. Just to see how 👍 animates out and ✅ animates in |
Let us know when there are updated videos/screenshots to review as well! |
@situchan, done. |
@situchan bump. |
Details
Fixed Issues
$ #49847
PROPOSAL: #49847 (comment)
Tests
Offline tests
QA Steps
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodSTYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label and/or tagged@Expensify/design
so the design team can review the changes.ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Android: Native
android_native.mp4
Android: mWeb Chrome
android_chrome.mp4
iOS: Native
ios_native.mp4
iOS: mWeb Safari
ios_safari.mp4
MacOS: Chrome / Safari
web_chrome.mp4
MacOS: Desktop
desktop_app.mp4