chore(components): smaller outline on chosen radiocard

[tomasklim]

Description

• outline on chosen fee was too big and it took focus
• staking fee component should not be in card
• misc component still had padding around fee card, bitcoin and ethereum did not
• solana fee is visible after compose tx is done
• remove elevation up for fees component so that it works in staking/send form and trade form but i am not sure with it @trezor/suite-engagement please help

Related Issue

Resolve

Screenshots:

[coderabbitai]

Walkthrough

The pull request makes several component refinements across different parts of the codebase. In the RadioCard component, specific CSS properties related to the active state outline have been removed. Several modal components (ClaimModal, StakeModal, UnstakeModal) now render the Fees component directly without an enclosing Card wrapper, and the associated helperText prop and layout properties have been removed. In the CustomFee component, a margin property in a Column has been eliminated. The FeeDetails component has seen adjustments in its rendering logic, including the removal of an intermediate ElevationUp wrapper and modifications to the fee display conditions based on network types. Additionally, within the Fees component, the helperText property has been removed from both its interface and its usage. Finally, an elevation wrapper in the TradingFormSwitcherExchangeRates component has also been removed, simplifying the rendering of the RadioCard component.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0959e86 and 6821104.

📒 Files selected for processing (8)

• packages/components/src/components/RadioCard/RadioCard.tsx (0 hunks)
• packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimModal.tsx (2 hunks)
• packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/StakeEthForm.tsx (2 hunks)
• packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/UnstakeEthForm.tsx (2 hunks)
• packages/suite/src/components/wallet/Fees/CustomFee.tsx (1 hunks)
• packages/suite/src/components/wallet/Fees/FeeDetails.tsx (3 hunks)
• packages/suite/src/components/wallet/Fees/Fees.tsx (1 hunks)
• packages/suite/src/views/wallet/trading/common/TradingForm/TradingFormInput/TradingFormSwitcherExchangeRates.tsx (2 hunks)

💤 Files with no reviewable changes (1)

• packages/components/src/components/RadioCard/RadioCard.tsx

✅ Files skipped from review due to trivial changes (2)

• packages/suite/src/components/wallet/Fees/CustomFee.tsx
• packages/suite/src/views/wallet/trading/common/TradingForm/TradingFormInput/TradingFormSwitcherExchangeRates.tsx

⏰ Context from checks skipped due to timeout of 90000ms (9)

• GitHub Check: run-desktop-tests (@group=wallet, trezor-user-env-unix bitcoin-regtest)
• GitHub Check: run-desktop-tests (@group=other, trezor-user-env-unix)
• GitHub Check: run-desktop-tests (@group=passphrase, trezor-user-env-unix)
• GitHub Check: run-desktop-tests (@group=settings, trezor-user-env-unix bitcoin-regtest)
• GitHub Check: build-web
• GitHub Check: run-desktop-tests (@group=device-management, trezor-user-env-unix)
• GitHub Check: Analyze with CodeQL (javascript)
• GitHub Check: Setup and Cache Dependencies
• GitHub Check: run-desktop-tests (@group=suite, trezor-user-env-unix)

🔇 Additional comments (11)

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/ClaimModal/ClaimModal.tsx (1)

114-124: Card wrapper removed from Fees component

The Card component that previously wrapped the Fees component has been removed, simplifying the UI hierarchy and creating a more streamlined appearance in the ClaimModal.

This change is consistent with similar modifications in other modal components and contributes to the PR objective of reducing visual emphasis on card outlines.

packages/suite/src/components/wallet/Fees/Fees.tsx (2)

54-66: Removed helperText property from FeesProps interface

The helperText property has been removed from the FeesProps interface, changing the public API of the component. This change is consistent with the removal of helperText usage across multiple components.

This simplification of the component's API aligns with the PR's goal of streamlining the UI and reducing unnecessary visual elements.

---

22-22: Updated imports after removing Note component

The import list has been updated to reflect the removal of the Note component that was previously used to display helperText.

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/StakeModal/StakeEthForm/StakeEthForm.tsx (2)

45-55: Card wrapper removed from Fees component

The Card component that previously wrapped the Fees component has been removed, along with its padding properties and the helperText prop. This creates a more streamlined UI appearance.

This change is consistent with the modifications in other modal components and supports the PR objective of implementing a smaller outline for card components.

---

1-1: Updated imports after removing Card component

The import list has been updated to remove Card and Translation imports that are no longer needed after the changes to the Fees component implementation.

packages/suite/src/components/wallet/Fees/FeeDetails.tsx (4)

87-102: Simplified RadioCard implementation with smaller outline

The ElevationUp wrapper has been removed from the RadioCard component, resulting in a cleaner implementation with a smaller outline when selected. This change aligns with the PR objective and creates a more subtle visual indication of the selected state.

---

244-244: Improved conditional rendering logic

Added an additional check for the showFee prop to prevent rendering when fees should be hidden. This makes the component more responsive to its props and avoids unnecessary rendering.

---

246-250: Added Solana network-specific handling

Good addition of Solana network type detection and conditional logic to handle fee display differently based on network type. The variables isSolanaNetwork, shouldShowCurrentFee, and feeAmount make the code more readable and maintainable.

---

253-278: Improved fee display with conditional rendering

The updated rendering logic for the MiscDetails component now includes conditional rendering for the bottom right child based on shouldShowCurrentFee. This ensures that fee information is only displayed when appropriate for the network type, improving the user experience.

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/UnstakeModal/UnstakeEthForm/UnstakeEthForm.tsx (2)

3-3: Import list updated to remove unused Card component.

The Card component has been properly removed from the imports, which aligns with its removal from the component structure where it previously wrapped the Fees component.

---

77-87: Simplified component structure by removing Card wrapper.

The Fees component is now rendered directly without being wrapped in a Card component. This change:

• Reduces unnecessary nesting
• Creates a more consistent UI across modals
• Aligns with the PR objective to create smaller outlines on components

All necessary props are still correctly passed to the Fees component, maintaining its functionality while improving the visual presentation.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.