diff --git a/src/containers/AMMPool/InfoCards/AuctionCard.tsx b/src/containers/AMMPool/InfoCards/AuctionCard.tsx index efb816bb1..3cfc58202 100644 --- a/src/containers/AMMPool/InfoCards/AuctionCard.tsx +++ b/src/containers/AMMPool/InfoCards/AuctionCard.tsx @@ -123,7 +123,7 @@ export const AuctionCard: FC = ({ replacementCostRaw != null ? getLPTokenUSD(replacementCostRaw) : null return ( -
+

{t('auction')} @@ -142,7 +142,6 @@ export const AuctionCard: FC = ({ )}

-
{t('expiration')} @@ -155,14 +154,12 @@ export const AuctionCard: FC = ({ : '--'}
-
{t('discounted_fee')} {discountedFee}
-
{t('price_paid')} @@ -182,7 +179,6 @@ export const AuctionCard: FC = ({ )}
-
{t('replacement_cost')} diff --git a/src/containers/AMMPool/InfoCards/BasicInfoCard.tsx b/src/containers/AMMPool/InfoCards/BasicInfoCard.tsx index 73d923f90..44e50636f 100644 --- a/src/containers/AMMPool/InfoCards/BasicInfoCard.tsx +++ b/src/containers/AMMPool/InfoCards/BasicInfoCard.tsx @@ -38,7 +38,7 @@ export const BasicInfoCard: FC = ({ : '--' return ( -
+

{t('basic_info')} @@ -54,29 +54,24 @@ export const BasicInfoCard: FC = ({

{lpTokenCurrency && ( - <> -
-
- - {t('lp_token_currency_code')} - - - - -
- +
+ + {t('lp_token_currency_code')} + + + + +
)} -
{t('trading_fee')} {tradingFeePercent}%
-
{t('created_on')} {createdDate} diff --git a/src/containers/AMMPool/InfoCards/MarketDataCard.tsx b/src/containers/AMMPool/InfoCards/MarketDataCard.tsx index 1407dc807..f7141fe19 100644 --- a/src/containers/AMMPool/InfoCards/MarketDataCard.tsx +++ b/src/containers/AMMPool/InfoCards/MarketDataCard.tsx @@ -68,7 +68,7 @@ export const MarketDataCard: FC = ({ ) return ( -
+

{t('market_data')} @@ -84,7 +84,6 @@ export const MarketDataCard: FC = ({ : '--'}

-
{t('volume_24h')} @@ -96,7 +95,6 @@ export const MarketDataCard: FC = ({ : '--'}
-
{t('fees_24h')} @@ -108,7 +106,6 @@ export const MarketDataCard: FC = ({ : '--'}
-
{t('apr_24h')} @@ -123,49 +120,40 @@ export const MarketDataCard: FC = ({ )} {balance1 && ( - <> -
-
- - - {parseAmount(balance1.amount)} - -
- +
+ + + {parseAmount(balance1.amount)} + +
)} {balance2 && ( - <> -
-
- - - {parseAmount(balance2.amount)} - -
- +
+ + + {parseAmount(balance2.amount)} + +
)} {lpTokenBalance && ( - <> -
-
- {t('lp_tokens')} - -
{parseAmount(lpTokenBalance)}
- {losData && ( -
- {parseIntegerAmount(losData.liquidity_provider_count)}{' '} - {t('liquidity_providers')} -
- )} - -
- +
+ {t('lp_tokens')} + +
{parseAmount(lpTokenBalance)}
+ {losData && ( +
+ {parseIntegerAmount(losData.liquidity_provider_count)}{' '} + {t('liquidity_providers')} +
+ )} + +
)}
diff --git a/src/containers/AMMPool/styles.scss b/src/containers/AMMPool/styles.scss index f190fb193..15444036d 100644 --- a/src/containers/AMMPool/styles.scss +++ b/src/containers/AMMPool/styles.scss @@ -1,6 +1,7 @@ @use '../shared/css/variables' as *; @use '../shared/css/table'; @use '../shared/css/data-tables-notice'; +@use '../shared/css/info-card'; .amm-pool-page { .loader { @@ -139,102 +140,6 @@ } } -.amm-pool-info-card { - padding: 24px; - border: 1px solid $black-60; - border-radius: 8px; - background: $black-80; - - .info-card-title { - display: flex; - align-items: center; - margin: 0 0 16px; - color: $white; - font-size: 20px; - gap: 8px; - @include bold; - } - - .info-card-icon { - width: 24px; - height: 24px; - flex-shrink: 0; - } - - .info-card-rows { - display: flex; - flex-direction: column; - gap: 10px; - } - - .info-card-row { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 4px; - - &:not(:last-child)::after { - display: none; - } - } - - .info-card-separator { - width: 100%; - height: 1px; - background: $black-60; - } - - .info-card-label { - display: flex; - align-items: center; - color: $black-40; - font-size: 14px; - line-height: 1.5; - text-transform: uppercase; - @include semibold; - - .hover { - width: 14px; - height: 14px; - margin-left: 4px; - cursor: default; - } - } - - .info-card-value { - color: $white; - font-size: 14px; - line-height: 1.5; - text-align: right; - word-break: break-all; - @include regular; - - &-green { - color: $green; - } - - &-orange { - color: $orange; - } - - &-link { - color: $green-30; - - a { - color: $green-30; - } - } - } - - .info-card-subtitle { - margin-top: 4px; - color: $black-40; - font-size: 12px; - line-height: 1.5; - @include regular; - } -} - // ============================================================ // Tables section (matching IOU Token page tab style) // ============================================================ diff --git a/src/containers/AMMRankings/GeneralInfoCard.tsx b/src/containers/AMMRankings/GeneralInfoCard.tsx index cfd963b47..849c92261 100644 --- a/src/containers/AMMRankings/GeneralInfoCard.tsx +++ b/src/containers/AMMRankings/GeneralInfoCard.tsx @@ -53,55 +53,51 @@ export const GeneralInfoCard: FC = ({ ) return ( -
-
- - {t('general_info')} -
- -
-
-
+
+

+ + {t('general_info')} +

+
+
+ {t('tvl')} {renderTooltip('tvl')} -
-
+ + {tvl ? formatCurrencyAmount(tvl) : DEFAULT_EMPTY_VALUE} -
+
- -
-
+
+ {t('number_of_amms')} {renderTooltip('number_of_amms')} -
-
+ + {stats.amm_pool_count ? stats.amm_pool_count.toLocaleString() : DEFAULT_EMPTY_VALUE} -
+
- -
-
+
+ {t('number_of_lps')} {renderTooltip('number_of_lps')} -
-
+ + {stats.liquidity_provider_count ? stats.liquidity_provider_count.toLocaleString() : DEFAULT_EMPTY_VALUE} -
+
- -
-
+
+ {t('volume_24h' as any)} {renderTooltip('volume_24h_all')} -
-
+ + {volume24h ? formatCurrencyAmount(volume24h) : DEFAULT_EMPTY_VALUE} -
+
diff --git a/src/containers/AMMRankings/ammRankings.scss b/src/containers/AMMRankings/ammRankings.scss index ccce9c06a..b6257e9a6 100644 --- a/src/containers/AMMRankings/ammRankings.scss +++ b/src/containers/AMMRankings/ammRankings.scss @@ -1,5 +1,6 @@ @use '../shared/css/variables' as *; @use '../shared/css/table'; +@use '../shared/css/info-card'; .amm-rankings-page { overflow: visible; @@ -28,7 +29,7 @@ flex-direction: column-reverse; align-items: stretch; margin-bottom: 64px; - gap: 16px; + gap: 32px; @include for-size(desktop-up) { flex-direction: row; @@ -50,7 +51,7 @@ // ─── General Info Card ──────────────────────────────────────── // Align the top of the card with the top of the chart container, // accounting for the section title + controls above the chart. - .general-info-card { + .info-card { @include for-size(desktop-up) { min-width: 200px; max-width: 320px; @@ -58,64 +59,6 @@ // Offset = chart-section-title height + margin + controls height + margin margin-top: 84px; } - - padding: 20px 24px; - border: 1px solid $black-70; - border-radius: $border-radius; - background-color: $black-80; - - .card-header { - display: flex; - align-items: center; - margin-bottom: 16px; - gap: 8px; - - .info-icon { - width: 20px; - height: 20px; - color: $white; - } - - .card-title { - color: $white; - font-size: 16px; - @include semibold; - } - } - - .stats-container { - display: flex; - flex-direction: column; - - .stat-row { - display: flex; - align-items: baseline; - justify-content: space-between; - padding: 12px 0; - border-bottom: 1px solid $black-70; - - &:first-child { - padding-top: 0; - } - - .stat-label { - display: inline-flex; - align-items: center; - color: $black-40; - font-size: 14px; - gap: 6px; - letter-spacing: 0.5px; - text-transform: uppercase; - @include bold; - } - - .stat-value { - color: $white; - font-size: 14px; - font-weight: normal; - } - } - } } // ─── Table section ──────────────────────────────────────────── diff --git a/src/containers/shared/css/info-card.scss b/src/containers/shared/css/info-card.scss new file mode 100644 index 000000000..338084b91 --- /dev/null +++ b/src/containers/shared/css/info-card.scss @@ -0,0 +1,131 @@ +@use './variables' as *; + +/* + * Shared styles for info cards that display a title with an icon and a list + * of label/value rows separated by horizontal dividers. + * + * Usage: + * @use '../shared/css/info-card'; + * + *
+ *

+ * + * Title + *

+ *
+ *
+ * Label + * Value + *
+ * ...more rows + *
+ *
+ * + * Dividers between rows are added automatically via CSS — do not include + * separator elements. + * + * Modifier classes for values: + * info-card-value-green — success/active state + * info-card-value-orange — warning/attention state + * info-card-value-link — clickable link appearance + * + * Use info-card-subtitle for secondary text within a value cell. + */ + +.info-card { + padding: 24px; + border: 1px solid $black-60; + border-radius: 8px; + background: $black-80; + + .info-card-title { + display: flex; + align-items: center; + margin: 0 0 16px; + color: $white; + font-size: 20px; + gap: 8px; + @include bold; + } + + .info-card-icon { + width: 24px; + height: 24px; + flex-shrink: 0; + } + + .info-card-rows { + display: flex; + flex-direction: column; + } + + .info-card-row { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: 10px 0; + gap: 4px; + + &:not(:last-child) { + border-bottom: 1px solid $black-60; + } + + &:first-child { + padding-top: 0; + } + + &:last-child { + padding-bottom: 0; + } + } + + .info-card-label { + display: flex; + align-items: center; + color: $black-40; + font-size: 14px; + line-height: 1.5; + text-transform: uppercase; + @include semibold; + + .hover { + width: 14px; + height: 14px; + margin-left: 4px; + cursor: default; + } + } + + .info-card-value { + color: $white; + font-size: 14px; + line-height: 1.5; + text-align: right; + word-break: break-all; + @include regular; + + &-green { + color: $green; + } + + &-orange { + color: $orange; + } + + &-link { + color: $green-30; + + a { + color: $green-30; + } + } + } + + .info-card-subtitle { + margin-top: 4px; + color: $black-40; + font-size: 12px; + line-height: 1.5; + @include regular; + } +}