Fix wallet row alignment in wide connect modal #7425
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: c18183c The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughThis change updates the styling of wallet-related components in the Connect UI to address alignment issues. Adjustments include modifying flex direction, removing certain CSS resets, increasing icon sizes, and adding spacing between icon elements to ensure proper visual alignment in the modal interface. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ConnectModal
participant WalletEntryButton
participant WalletSelector
User->>ConnectModal: Opens Connect Wallet modal
ConnectModal->>WalletEntryButton: Renders wallet row with updated flex direction
ConnectModal->>WalletSelector: Renders ShowAllWalletsIcon with increased size and spacing
WalletEntryButton-->>ConnectModal: Wallet row visually aligned
WalletSelector-->>ConnectModal: Icon properly spaced and sized
ConnectModal-->>User: Displays visually aligned wallet selection UI
Assessment against linked issues
Suggested labels
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
![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)
.changeset/slow-sites-call.md (1)
5-5: Fix typo in changeset description.There's a spelling error in the description.
-Fix wallet row alignement in wide connect modal +Fix wallet row alignment in wide connect modal
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.changeset/slow-sites-call.md(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.@(ts|tsx)`: Accept a typed 'props' object and export a named function (e.g., export function MyComponent()). Combine class names via 'cn', expose 'className' prop if useful. ...
**/*.@(ts|tsx): Accept a typed 'props' object and export a named function (e.g., export function MyComponent()).
Combine class names via 'cn', expose 'className' prop if useful.
Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Local state or effects live inside; data fetching happens in hooks.
Merge class names with 'cn' from '@/lib/utils' to keep conditional logic readable.
Stick to design-tokens: background ('bg-card'), borders ('border-border'), muted text ('text-muted-foreground') etc.
Use the 'container' class with a 'max-w-7xl' cap for page width consistency.
Spacing utilities ('px-', 'py-', 'gap-*') are preferred over custom margins.
Responsive helpers follow mobile-first ('max-sm', 'md', 'lg', 'xl').
Never hard-code colors – always go through Tailwind variables.
Tailwind CSS is the styling system – avoid inline styles or CSS modules.
Prefix files with 'import "server-only";' so they never end up in the client bundle (for server-only code).
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx (1)
713-718: LGTM: Well-structured styling improvements for ShowAllWalletsIcon.The changes properly use design tokens (
spacing["4xs"]andiconSize.xl) and improve the visual presentation by adding appropriate spacing between grid dots and increasing the overall icon size for better consistency.packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx (1)
111-111: LGTM: Good defensive styling practice.Explicitly setting
flexDirection: "row"ensures consistent layout behavior and prevents potential alignment issues that could arise from CSS defaults or inheritance.
size-limit report 📦
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #7425 +/- ##
=======================================
Coverage 52.08% 52.08%
=======================================
Files 947 947
Lines 63636 63636
Branches 4222 4216 -6
=======================================
Hits 33146 33146
Misses 30384 30384
Partials 106 106
🚀 New features to boost your workflow:
|
joaquim-verges
deleted the
Fix_wallet_row_alignment_in_wide_connect_modal
branch
Fixes TOOL-4859
Summary by CodeRabbit