Keycard Sign up UI issues

[mariia-skrypnyk]

Bug Report

Problem

Keycard Sign up was implemented before design changed so now some UI should be fixed according to updated design version here:
https://www.figma.com/design/YGm3igIOAcwMqUVJWCJ6f1/Keycard?node-id=3387-32189&node-type=frame&t=SW9vLzJIZqyYhTaq-0

Reproduction

1. Install app
2. Prepare empty Keycard
3. Go to Create Profile > Use Keycard
4. Scan Keycard
5. Pass all other steps needed to Create Profile using a Keycard

ISSUE 1: [Android] Background should become darker when NFT scanner opens

Design VS Implementation

ISSUE 2:

Design VS Implementation

• different image
• add info icon

ISSUE 3:

Design VS Implementation

• Keycard is empty (is should be added in all screens where it was missing)
• black status bar (Android)
• custom color of Let's go button
• link on upvote

ISSUE 4:

Design VS Implementation

• "the" Keycard

ISSUE 5:

Additional Information

• Status version: nightly
• Operating System: Android, iOS

[flexsurfer]

ISSUE 1: [Android] Background should become darker when NFT scanner opens
this should be a separate issue, because NFC scan dialog has temporary implementation, it should be properly implemented

[Parveshdhull]

Thank you @mariia-skrypnyk for creating this issue.

add info icon

Do we have content ready for this info icon?

Also please can you share link to original figma while where this feedback/review is done?

[Parveshdhull]

Summary

• Issue 1 - should be fixed separately
• Issue 2 - Partially fixed - Info button content remaining
• Issue 3 - Fixing some issues.
  • Probably design review is outdated, as per figma title should be "Keycard is empty"
  • Not updating bottom info message, as we are working on feature implementation instead.
• Issue 4 - As per figma, we should keep "This isn't a keycard"

[mariia-skrypnyk]

Hey @Parveshdhull !

Should I report Issue 1 separately?

Do we have content ready for this info icon?

Also please can you share link to original figma while where this feedback/review is done?

No as I see on design.
Only button for now.
Asked design team here.
https://www.figma.com/design/YGm3igIOAcwMqUVJWCJ6f1/Keycard?node-id=4337-45746&m=dev

[mariia-skrypnyk]

1. Sorry, I missed bottom name in Issue 2.
   Can you change it in current PR?

https://www.figma.com/design/YGm3igIOAcwMqUVJWCJ6f1/Keycard?node-id=3-89231&p=f&m=dev

Issue 3 - Fixing some issues.
Probably design review is outdated, as per figma title should be "Keycard is empty"

you are right, design has changed!

Not updating bottom info message, as we are working on feature #21932 > instead.

ok, thanks!

3. Issue 4

Issue 4 - As per figma, we should keep "This isn't a keycard"

also change of the design, thanks.

[Parveshdhull]

Asked design team here.

Thank you. I have added info button with not implemented flag. We can enable it once button content is available.

Should I report Issue 1 separately?

Yes, thanks.

I missed bottom name in Issue 2.

Updated the PR with change.

[Parveshdhull]

@mariia-skrypnyk Please feel free to update this issue or open new for leftovers. (Issue 1 and info button content)