Conversation
…e transition Phase 1 of a unified overlay motion system. A shared ScaleFade transition (opacity 0→1 + scale 0.96→1, modeled on MUI's Grow) is wired as the default TransitionComponent for MuiMenu and MuiPopover at 100ms, so all menus, selects and popovers pop consistently instead of using MUI's default Grow. Timing lives in a single motion-tokens module. - src/utils/motion.ts: central duration/easing tokens (single source of truth) - ScaleFade: MUI-compatible transition primitive (scale 0.96, not Grow's 0.75) - theme: MuiMenu/MuiPopover transition defaults + global prefers-reduced-motion - showcase: Select/Menu specimens in the Overlays section Modals and drawers are intentionally untouched (deferred to later phases).
The outlined variant sets border:none at rest, but its :hover block only changed background + re-asserted the box-shadow ring, so MUI's built-in .MuiButton-outlinedPrimary:hover border leaked through on hover only. Force border:none in the hover/focus block so the borderless pill stays borderless.
…radients - figmaColors.ts: single source of truth for color tokens + the figVars var() accessor. - theme.tsx: flatten tokens onto the MUI CssVars palette (P3 + sRGB fallback); emit P3 vars. - colorToP3.ts: Display-P3 conversion for the @supports P3 override layer. - gradients slot/type removed; the new branding uses the solid purple-1 token.
Sweep explicit color reads onto flattened figma tokens (bare sx strings / figVars) for P3. Also swaps the brand gradient for the solid purple-1 token in the affected components.
Same token sweep across module components for Display-P3 with sRGB fallback. Swaps the brand gradient for purple-1 in the E-Mode button, StakeActionBox and version badge.
Token sweep across layouts; swaps the newGradient banner for purple-1 in TopBarNotify.
Buttons, icon and toggle buttons scale to 0.99 on :active (not disabled) via a shared fragment. MarketSwitcher's custom Box trigger gets the same press feedback inline.
DotsHorizontalIcon: currentColor meatball icon replacing the '...' text supply dropdown. iconButtonSx (buttonStyles.ts): square icon-only button styling (min-width 0, 0.25rem pad). Desktop table action buttons across the four dashboard lists set to size=small.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
…ntent The search band and the panel behind it could render different fills, from two separate causes. The desktop popover's paper takes variant="modal" for its radius and shadow and then overrides the fill with a flat sx `bgcolor`. That worked until modals moved to bg-1 light / bg-2 dark, because the variant now sets its dark fill through a `darkScheme` selector, which a flat sx rule does not reliably outrank — equal specificity, so emitted order decides. In dark the panel could take the modal's bg-2 while the search stayed bg-3. A matching darkScheme override in the sx settles it. The mobile drawer's PaperProps set only geometry, so its fill fell through to background.paper (surface-elevated) and never matched the search at all. The search band also stopped restating the fill: it now inherits, so the panel has a single source of truth and the two cannot drift again. Second time this darkScheme-versus-sx ordering has bitten on this branch — the TESTNET/FORK badges hit the same thing. Any component taking a themed variant and overriding one of its per-scheme properties via sx is exposed to it. Not verified visually.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
…ome, dropdown variant
Surfaces
- The nav header keeps bg-3 in light and takes bg-2 in dark. The shared page
header band (both PageHeader and TopInfoPanel, via pageBandSx) keeps bg-3 in
light and takes bg-1 in dark, so it merges with the page canvas there and the
nav bar is the only lifted chrome.
Bridge form
- The "To" input and the Transaction overview card swap their 1px border-2 for
the same figSurfaceShadow('shadow-stroke-1') ring the amount box uses; the
border had to go rather than sit alongside it, since the shadow's 0 0 0 1px
layer is the outline.
- Radii per the design: the amount box and the "To" input at 0.5rem, the
overview card at 0.75rem. AssetInput and TxModalDetails are shared, so this
reaches the other transaction modals too — deliberately, since both had stale
v2 values (6px, 4px, border-2) that matched nothing else in the v3 theme.
- The "Use connected account" row centres against the "To" label instead of
bottom-aligning with a -1 margin nudge, and the Stack that existed only to
carry that nudge is gone.
Categories dropdown
- Takes a variant prop, defaulting to tertiary so the four dashboard card call
sites get it implicitly; the shared filter bar passes outlined. In both
contexts it now matches the button beside it — ListWrapper's collapse button
in the cards, the In Wallet toggle in the filter bar.
- Drops the dead sx={{ buttonGroup, button }} both dashboard call sites passed:
sx spreads onto a plain Button, so neither key matched anything. Leftovers
from when this control was a ToggleButtonGroup.
Known: SwapAssetInput, PriceInput and NetworkSelect are still at 0.75rem while
0.5rem is the theme's input radius (MuiOutlinedInput.root), so the bridge modal
stacks 0.75 / 0.5 / 0.5 / 0.75 down one column. Not verified visually.
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
|
The Collateral / Borrowable rows on the reserve-overview page painted their icon from a palette slot and their label from a hardcoded hex, so the two halves of each status came from different sources and did not match. Both now take data-green when enabled and data-red when disabled. The icons' `color="success"` / `color="error"` props are dropped rather than left under the new sx, which would have given each icon two colour sources with sx silently winning. These are SvgIcon components, so the token resolves as CSS. Unlike the hexes they replace, the tokens carry dark-mode values: the red softens to #E05269 and the green to #66C399 on the dark card. The warning branch — the amber icon shown for a 0% LTV asset — is untouched and still pairs `color="warning"` with a hardcoded #E8A838.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
The alerts under the dashboard asset cards — "To borrow you need to supply any asset as collateral", the isolation-mode and e-mode warnings, the health-factor error — sat in a px:6 box, so they were inset 24px from the edges of the card they sit beneath. They already carry width: 100%, so dropping the padding is enough to line them up. The supply card had the byte-identical wrapper. These two are structural twins that render next to each other, so fixing only the one that was reported would have left them visibly mismatched. ListWrapper's below-card slot also rendered at mt: 3 (12px); it is 1rem now. That slot is shared with SuppliedPositionsList, which already wrapped its content without padding and was correct.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
"Stake {symbol}" was h4 (16/600) while the markets and dashboard tables use
subheader1 (14/600) for the asset name — the same 2px discrepancy the markets
row itself carried before it was aligned to the dashboard. All three tables now
agree.
StakeAssetName is shared, so this covers the desktop table, the mobile item and
the disconnected view at once.
The line below it — "Total staked: $X" — still differs: caption (12/400, fg-2)
against the markets sub-line's subheader2 (12/500, fg-3). Same size, so it is a
weight step and a shade rather than a size jump, and the two carry different
content, so it is left for a separate call.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
Nested rows and staking panels move from border-2/surface-elevated to border-0/bg-2, keeping them on the warm dark ramp rather than surface-elevated's cooler #1E1E20. SavingsCardSkeleton follows, so the sGho/stkGho rows no longer pop tokens when data lands. DarkTooltip drops its hardcoded rgba(15, 18, 29, 0.8) for the scrim token behind a backdrop blur, and takes ContentWithTooltip's radius, inset hairline and shadow so the two tooltip flavours read as one component. It follows the colour scheme now instead of being fixed dark, so the name is a misnomer. The swap token picker uses TxModalTitle for its header, a uniform 1rem rhythm between header, search, Popular and list, no divider, and a scroll container that lets the scrollbar ride the modal's inner edge while rows stay level with the search input. Bridge GHO's title uses the same component. Also: 8px label-to-field gaps in AssetInput, TxModalDetails and BridgeDestinationInput; data-size="small" on the cap and debt-ceiling warnings; Paper variant="card" on the governance panels; outlined buttons with buttonM labels for e-mode and governance links; "Back" in the language submenu; a 40px markets footer band with an inset divider; and a dimmed border on the disabled swap-direction button, which no longer had the removed opacity fading it.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
The header band was the only one of the two stacked bands still on bg-2 in dark; PageHeader/pageBandSx already used bg-1. They now share one surface, with the inset border-0 hairline separating them instead of a fill step. Light mode was already consistent at bg-3. The V4, Swap, Bridge GHO, wallet and settings triggers move from the tertiary pill to the secondary one, which the theme spells variant="outlined" (secondaryPillStyle, theme.tsx:640) — there is no variant="secondary". Dark-mode only: the fill drops from bg-4 to bg-3 and the hover tint softens, so the pills keep a clear step against the now-darker band. This continues the move started in DashboardEModeButton and GovernanceTopPanel. The TESTNET/FORK badges and the disable-testnet/disable-fork buttons stay tertiary — status indicators and popover actions rather than nav chrome.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
The proposal page's cards take the reserve-overview padding recipe, which fixes a bottom pad (16px) that sat tighter than the sides (24px) and adds the mobile step-down the reference has. That recipe was already written out nine times repo-wide, so it moves to cardPaddingSx alongside the existing buttonStyles/pageBandSx consts rather than into the card variant — several cards pad an inner Box and would double up. Sidebar card spacing moves off six copies of mb: 2.5 (10px) onto one 16px gap on the column, matching UserGovernanceInfo, which also drops the stray margin below the last card and the phantom gaps when a card renders null. The back-button strip is now just the button at py: 6, replacing a full page band that also rendered an empty PageTitle: five media queries and five store subscriptions for a header with one control. ContentContainer gains disableTopPadding so the strip owns the whole 1.5rem to the content; both ProposalTopPanel consumers pass it. Trailing action columns right-align via ListColumn's own align prop — markets, faucet, bridge, history and staking, with their loaders so the control doesn't jump when data lands. The dashboard lists already did this through ListButtonsColumn. StakingDropdown takes fullWidth as a prop instead of re-deriving its caller's card breakpoint. Its two callers are mutually exclusive on that exact breakpoint, so the copy could silently disagree with the table — and did, leaving the stake button full-width inside the desktop table between 1125px and 1280px. Also: the GHO about-panel links and the governance header links share one ExternalLinkButton; the governance title matches the other core pages at h2/30px medium; the search field keeps its outline stroke without the drop shadow; and ReserveConfigurationWrapper expresses its responsive padding in sx rather than a media-query hook.
|
📦 Next.js Bundle Analysis for aave-uiThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.