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.
… 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! 🙌 |
…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! 🙌 |
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.