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.
MarketSwitcher's market blurb passes variant="base", but no such variant existed, so `next build` failed its typecheck and CI went red on fa3df91. "Base" is a real style in the design system — 0.875rem / 400 / 100% — so declare it rather than swapping the call site to the nearest existing variant. MUI needs it in four places: the TypographyCustomVariants interface, the TypographyPropsVariantOverrides map so the prop typechecks, the style itself, and variantMapping -> 'p' alongside the other body variants. Also collapses the one place that had hand-rolled the same style: the settings menu's "Select language" row was carrying it as an inline sx, written before the variant existed. Verified with `next build` (exit 0).
Brings in 13 commits, including the gasless-voting move from gelato to the governance vote-relay, the Celo wrapper, the Merkl/Mantle/Plasma icon mappings, the Polygon v3 incentive disable, and the high-severity transitive dep patches. Seven files conflicted; all trace to #3089 (replace the V4 announcement banner with a permanent header button) and #3087 (Avalanche V4 link). MainLayout.tsx — took origin/main. It deletes the whole getCampaignConfigs banner block; this branch had only retitled "Try it out here" to "Try it out" inside configs that no longer exist. TopBarNotify stays mounted with an empty config, so the /dev/components banner specimen still works. AppHeader.tsx — took this branch's body and grafted main's V4 button. Main added exactly 20 lines here; the other 116 in the conflict were unmodified base content this branch had already rewritten, which is why git misaligned the block. The button is restyled to match the redesigned header (variant "outlined", buttonM label, 0.62rem trailing margin) rather than pasted as-is, which would not have compiled: it read `smd`, a breakpoint this file no longer defines. It stays visible at every width and abbreviates to "V4" below lg, because neither MobileMenu nor NavItems carries a V4 entry point and main removed the banner that previously served mobile. MarketSwitcher.tsx — merged both refactors instead of picking one. The merge base had a hardcoded Aave Pro row; this branch had extracted it into a general renderLinkRow (also used by the V2 Markets legacy row), while main extracted it into a V4_LINKS config plus renderV4Link and added Avalanche. renderLinkRow stays and gains optional id/onSelect, and renderV4Link becomes a thin adapter over it carrying main's trackEvent and data-cy. Sections render v4Ethereum and v4Other through this branch's renderSection, dropping main's Divider and px layout. The V4 badge markup now exists once rather than twice. Consequences worth noting: an Avalanche V4 row now renders under L1 Networks, where the V3 Avalanche market already sits, so that section shows two rows labelled "Avalanche" distinguished only by the V4 pill and external-link arrow. V4 row labels are plain strings in V4_LINKS, so "Aave Pro" is no longer translatable and its msgid is gone from the catalogs. The four compiled locale bundles were regenerated with pnpm i18n rather than hand-merged; their .po sources merged cleanly. Verified: tsc --noEmit clean; eslint 0 errors, with one exhaustive-deps warning in MarketSwitcher confirmed pre-existing on origin/main. Lockfile parses and its patchedDependencies match package.json with both patch files present, though pnpm install has not been run. Not verified visually — no dev server for this workspace was running.
|
📦 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! 🙌 |
Surfaces - Nav header and both page-header components move to bg-3; the page canvas moves to bg-1. TopInfoPanel and PageHeader carried an identical gradient band, so it is now a single `pageBandSx` both spread rather than two copies edited in lockstep. - New `table-bg` token (#ffffff / #1a1919) behind a new `Paper variant="table"`, covering the list card, its title band, the sticky column-header row and the three standalone tables. It only differs from `card` in dark mode, so a table left on `card` would be invisibly wrong in light and wrong in dark — hence a variant rather than an sx override per call site. Tokens - Adds the semantic/button hover tokens. They are translucent overlays, so they composite on a ::before layer above the fill and behind the label; assigning one to backgroundColor would replace the fill instead of tinting it. - Retunes shadow, border, data and accent tokens to the Figma values. Notable: light shadow-high/strong lose their warm tint, light border-2 12%->10%, data-orange and data-green move in both modes, light purple-2 goes from a mid purple to a pale lavender. - Drops the orphaned info-panel-color-*, fg-max-hover and sgho-banner-fade tokens. The banner now fades into `table-bg` rather than a duplicate of it. Buttons - Every Button moves to variant="tertiary", including the three sites that compute the variant as a value. `outlined` stays as an alias so MUI's own outlined styling can't reappear, and both now share one `pillStyle` recipe. - Tertiary gains the shared surface ring, so the header actions still read as controls now that the header is bg-3. - The TESTNET/FORK badges use the pill for shape only and override its colours, so they now also suppress its ring and hover overlay. Markets page - Drops the list card's title band: banner, then a filter row, then the table. The staking filter row was already this exact control, so it is promoted to a shared AssetsFilterBar instead of being copied. - Adds an "In Wallet" filter, rendered and applied only with a wallet connected. It reads the raw balances query rather than useWalletBalances, which would mount a second observer on the pool-reserves query AppDataProvider already owns and force a redundant refetch on every navigation into the page. - The banner's bottom margin and horizontal inset were leftovers from when it sat inside the card; both are gone, along with a vestigial wrapper. Elsewhere - Table container headers are capitalized. TitleWithSearchBar spread titleProps after its own sx, which silently dropped its margin, so sx now merges. - Market menu rows take the active fill on hover instead of a lighter one. - Removes the dead TitleWithFiltersAndSearchBar. Verified: tsc clean, eslint 0 errors. Not verified visually — no dev server for this workspace was running and I did not start one.
|
📦 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! 🙌 |
Both sat on bg-2. `Paper variant="modal"` is the surface every transaction modal renders through via BasicModal, and DrawerWrapper is the mobile nav drawer; the market switcher popover overrides the modal variant with bg-3 and is unaffected. Note this puts modals on the same fill as the page canvas, which also moved to bg-1 earlier in this branch — they now separate from it by the border-1 hairline, the drop shadow and the backdrop rather than by fill. Worth a look in light mode, where shadow-medium is 5% against dark mode's 30%. The market switcher's mobile sheet is a second drawer surface and is left alone: it takes background.paper (surface-elevated) rather than DrawerWrapper, and pairs with the desktop popover's bg-3.
|
📦 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! 🙌 |
… bg-2 in dark The markets desktop row passed variants one step larger and heavier than the dashboard tables in every cell: asset name h4 -> subheader1, total supplied and total borrowed h4 -> h5, and both APY cells h4 -> h5 with the secondary16 symbolsVariant dropped so IncentivesCard's own default applies. Those are the values the dashboard's shared ListValueColumn and ListAPRColumn already use, so the two tables now render identically. The mobile markets row was already on h5 and is untouched. Modals keep bg-1 in light but take bg-2 in dark, so they separate from the page canvas — which also moved to bg-1 earlier in this branch — rather than relying on the hairline and shadow alone. The mobile nav drawer stays on bg-1. Also carries a tooltip font-size change already in the working tree (ContentWithTooltip 0.75rem -> 0.625rem), which is not mine; it affects every ContentWithTooltip and TextWithTooltip site. Still open: the USD sub-line under each value differs (dashboard `description` 14/400 vs markets `subheader2` 12/500 via the shared ReserveSubheader, which has three non-table consumers).
|
📦 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! 🙌 |
…ty-card corners
Font
- Adds Inter v4 InterVariable.woff2 under its own stylesheet rather than editing
the vendored v3.19 inter.css, and points FONT at "Inter Variable", Inter,
Arial. Figma specs naming "Inter Variable" now resolve instead of silently
falling through to Arial. Inter stays in the stack because the supplied file
is roman-only and the app has one real italic (StakeAssetName).
Number inputs
- The three amount inputs in transaction modals (AssetInput, covering supply /
withdraw / borrow / repay / bridge; SwapAssetInput; PriceInput) all shared one
recipe and were transparent. They now fill bg-2, round to 0.75rem, and take
the shared surface ring via figSurfaceShadow('shadow-stroke-1') — the ring
replaces the 1px border-2, which would otherwise draw a second outline.
Empty list card
- ListWrapper's header band only rounded its top corners and always painted a
bottom hairline, so whenever nothing rendered below it the square corners
overflowed the Paper's radius and the hairline hung over empty space. It now
rounds off and drops the rule in the two cases where that happens: children
rendering nothing, and children hidden while collapsed. Those need separate
conditions because a collapsed children box is `display: none` rather than
`:empty`. Clipping the Paper instead would have broken the sticky column
headers.
Known: the swap and price inputs still hover to bg-2, which is now their resting
fill, so those two hovers are inert pending a decision on what they should step
to. 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! 🙌 |
…ces, fix bridge rhythm Buttons - The earlier sweep collapsed `outlined` and `tertiary` into one recipe, so "secondary" had stopped meaning anything. They are split again via a single factory: secondary is bg-3 in both modes with the 3%/4% hover, tertiary steps to bg-4 in dark with 4%/6%, per the Figma semantic/button scale. - The In Wallet and All Categories filter controls move to secondary. Both live in the shared AssetsFilterBar / AssetCategoryMultiselect, so markets and staking pick it up from one change each. Surfaces - Paper variant="card" keeps surface-elevated (white) in light and takes bg-2 in dark, matching what the modal variant already does. Eleven module cards — staking panels, sGHO/stkGHO, reserve-overview, migration — no tables. - The bridge network selectors take the number-input recipe: bg-2 fill, 0.75rem radius and the shared surface ring in place of the 1px border-2, which would otherwise draw a second outline alongside the ring. Bridge form - The three section gaps were set in three places and none agreed (12px, 12px, 20px). All are 1rem now. The third comes from TxModalDetails, which has no sx prop and 30 consumers, so every transaction modal's overview block tightens from 20px to 16px rather than bridge diverging from the rest. - "Enter a valid address" was always rendered with visibility: hidden, so it reserved a line plus the parent Stack's gap in every state. It now renders only when shown; the tradeoff is that content below shifts when it appears. Known: the bridge address field still uses the old 6px + border-2 treatment, so it no longer matches the amount box above it. The circular swap button between the network selectors is still surface-elevated. 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! 🙌 |
…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! 🙌 |
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.