Extract info card style into shared file#1316
Merged
Conversation
kuan121
force-pushed
the
extract-info-card-style-into-shared-file
branch
from
f469326 to
c800776
Compare
cybele-ripple
approved these changes
Apr 17, 2026
kuan121
commented
Apr 20, 2026
| )} | ||
| </span> | ||
| </div> | ||
| <div className="info-card-separator" /> |
Contributor
Author
There was a problem hiding this comment.
I remove these lines since we no longer explicitly need a div element to create the divider line. That will be achieved using CSS.
Comment on lines
-31
to
+32
| gap: 16px; | ||
| gap: 32px; |
Contributor
Author
There was a problem hiding this comment.
The current gap between the TVL/Volume chart and the General Info card is too smaller, I increase it to a reasonable value.
| } | ||
| } | ||
|
|
||
| .amm-pool-info-card { |
Contributor
Author
There was a problem hiding this comment.
The follow block is removed and the similar CSS is put in info-card.scss to avoid duplicate CSS
kuan121
force-pushed
the
extract-info-card-style-into-shared-file
branch
from
c800776 to
c6a15f4
Compare
pdp2121
approved these changes
Apr 21, 2026
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
3 participants
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.
High Level Overview of Change
Extract the shared card styles used by the AMM Pool page (Basic Info, Market Data, Auction) and the AMM Rankings page (General Info) into a single
src/containers/shared/css/info-card.scss.Changes:
info-card.scsswith documented usage and CSS-based row dividers (replaces explicit<div className="info-card-separator" />elements)AMMPool/styles.scssandAMMRankings/ammRankings.scssimport the shared styles instead of defining their own card rulesBasicInfoCard,MarketDataCard,AuctionCardwrapper class renamedamm-pool-info-card→info-card; separator<div>s removedGeneralInfoCardrefactored to use the sharedinfo-cardclass structure (was using bespokegeneral-info-card/stat-row/stat-labeletc.)Context of Change
The AMM Pool page and AMM Rankings page both display info cards with the same visual pattern — an icon title followed by label/value rows separated by horizontal dividers. They were implemented independently with different class names (
amm-pool-info-cardvsgeneral-info-card) and different structures, leading to visual inconsistencies and duplicate CSS.Consolidating to a single shared stylesheet:
@useimportType of Change
Codebase Modernization
Before / After
Before: Two sets of info card styles —
amm-pool-info-cardin AMMPool/styles.scss andgeneral-info-cardin ammRankings.scss — with different spacing, structure, and class names.After: Single shared
info-card.scssused by both pages. All four cards (Basic Info, Market Data, Auction, General Info) now use identical class names (info-card,info-card-title,info-card-icon,info-card-rows,info-card-row,info-card-label,info-card-value). Visual appearance is unchanged for the AMM Pool page; the General Info card on the Rankings page now matches the AMM Pool cards exactly.Test Plan
/amm/:idand/ammpages matches before the refactor