fix(app): spacing on licence screens app #17580
Conversation
WalkthroughThe pull request introduces theme-based spacing and layout adjustments across multiple wallet-related screen components. Changes include utilizing theme spacing values instead of hardcoded pixel measurements, removing console logging, and refining component alignments. The modifications focus on improving layout consistency and responsiveness by dynamically deriving spacing from the theme object. Changes
Possibly related PRs
Suggested Labels
Suggested Reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/native/app/src/ui/lib/card/license-card.tsx (1)
83-84: Consider making image dimensions theme-based.While the alignment fix is good, consider extracting the hardcoded dimensions to theme constants for better maintainability.
- height: 72px; - width: 64px; + height: ${({ theme }) => theme.imageSize.medium}px; + width: ${({ theme }) => theme.imageSize.medium * 0.89}px;
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/native/app/src/screens/wallet-pass/wallet-pass.tsx(1 hunks)apps/native/app/src/screens/wallet-passport/wallet-passport.tsx(4 hunks)apps/native/app/src/screens/wallet/wallet.tsx(0 hunks)apps/native/app/src/ui/lib/card/license-card.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- apps/native/app/src/screens/wallet/wallet.tsx
🧰 Additional context used
📓 Path-based instructions (3)
apps/native/app/src/ui/lib/card/license-card.tsx (1)
Pattern apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/wallet-passport/wallet-passport.tsx (1)
Pattern apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/wallet-pass/wallet-pass.tsx (1)
Pattern apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
🔇 Additional comments (3)
apps/native/app/src/ui/lib/card/license-card.tsx (1)
38-38: LGTM! Theme-based spacing enhances consistency.The addition of theme-based margin improves layout consistency.
apps/native/app/src/screens/wallet-passport/wallet-passport.tsx (1)
119-124: LGTM! Consistent use of theme-based spacing.The replacement of hardcoded values with theme spacing improves consistency and maintainability across the wallet screens.
Also applies to: 138-139, 363-364
apps/native/app/src/screens/wallet-pass/wallet-pass.tsx (1)
186-187: LGTM! Enhanced spacing calculation improves layout consistency.The addition of theme-based spacing to both the barcode and non-barcode cases ensures consistent layout across different states.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #17580 +/- ##
==========================================
- Coverage 35.57% 35.57% -0.01%
==========================================
Files 7031 7030 -1
Lines 150481 150486 +5
Branches 42970 42972 +2
==========================================
- Hits 53536 53535 -1
- Misses 96945 96951 +6
Flags with carried forward coverage won't be shown. Click here to find out more. see 13 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
Datadog ReportAll test runs ✅ 8 Total Test Services: 0 Failed, 7 Passed Test Services
🔻 Code Coverage Decreases vs Default Branch (1)
|
What
Fix spacing on license screens in mobile app
Screenshots / Gifs
before:
after:
before:
after:
before:
after:
Attach Screenshots / Gifs to help reviewers understand the scope of the pull request
Checklist:
Summary by CodeRabbit
Release Notes
UI/UX Improvements
Performance
Styling