From ae2351a5f5836b111595749a75f84b16c9ea748e Mon Sep 17 00:00:00 2001 From: chambaz Date: Tue, 4 Mar 2025 13:28:40 -0500 Subject: [PATCH] chore: success / error colors --- .../CreatePoolDialog/components/create-pool-configure.tsx | 2 +- .../CreatePoolDialog/components/create-pool-review.tsx | 6 +++++- .../close-position-dialog/close-position-dialog.tsx | 8 ++++---- .../common/pnl-display/components/pnl-badge.tsx | 2 +- .../common/pnl-display/components/pnl-label.tsx | 4 ++-- .../action-simulation-status/action-simuation-status.tsx | 4 ++-- .../common/trade-box-v2/components/stats/stats.tsx | 6 +++++- apps/marginfi-v2-trading/src/styles/globals.css | 2 ++ apps/marginfi-v2-trading/tailwind.config.js | 8 +++++--- packages/mrgn-ui/src/components/ui/button.tsx | 4 ++-- 10 files changed, 29 insertions(+), 17 deletions(-) diff --git a/apps/marginfi-v2-trading/src/components/common/Pool/CreatePoolDialog/components/create-pool-configure.tsx b/apps/marginfi-v2-trading/src/components/common/Pool/CreatePoolDialog/components/create-pool-configure.tsx index f04f584f83..a8e1b76150 100644 --- a/apps/marginfi-v2-trading/src/components/common/Pool/CreatePoolDialog/components/create-pool-configure.tsx +++ b/apps/marginfi-v2-trading/src/components/common/Pool/CreatePoolDialog/components/create-pool-configure.tsx @@ -247,7 +247,7 @@ export const CreatePoolConfigure = ({ poolData, setPoolData, setCreatePoolState Warning: The group fee is very high. Consider reducing it to attract more users.

) : WARNING_THRESHOLD < groupFee ? ( -

+

The group fee is higher than recommended. A lower fee may increase activity.

) : null} diff --git a/apps/marginfi-v2-trading/src/components/common/Pool/CreatePoolDialog/components/create-pool-review.tsx b/apps/marginfi-v2-trading/src/components/common/Pool/CreatePoolDialog/components/create-pool-review.tsx index 826fd0009f..a33913f8cc 100644 --- a/apps/marginfi-v2-trading/src/components/common/Pool/CreatePoolDialog/components/create-pool-review.tsx +++ b/apps/marginfi-v2-trading/src/components/common/Pool/CreatePoolDialog/components/create-pool-review.tsx @@ -184,7 +184,11 @@ const TokenSummary = ({

{percentFormatter.format(bankConfig.interestRateConfig?.protocolIrFee.toNumber() ?? 0)} diff --git a/apps/marginfi-v2-trading/src/components/common/Portfolio/components/close-position/components/close-position-dialog/close-position-dialog.tsx b/apps/marginfi-v2-trading/src/components/common/Portfolio/components/close-position/components/close-position-dialog/close-position-dialog.tsx index 6d9e6efc99..0f0176ca8c 100644 --- a/apps/marginfi-v2-trading/src/components/common/Portfolio/components/close-position/components/close-position-dialog/close-position-dialog.tsx +++ b/apps/marginfi-v2-trading/src/components/common/Portfolio/components/close-position/components/close-position-dialog/close-position-dialog.tsx @@ -108,10 +108,10 @@ export const ClosePositionDialog = ({

0.05 - ? "text-error" + ? "text-mrgn-error" : Number(actionTransaction.actionQuote.priceImpactPct) > 0.01 - ? "text-alert" - : "text-success", + ? "text-alert" + : "text-mrgn-success", "text-right" )} > @@ -125,7 +125,7 @@ export const ClosePositionDialog = ({
Slippage
500 ? "text-error" : "text-success", + actionTransaction.actionQuote.slippageBps > 500 ? "text-mrgn-error" : "text-mrgn-success", "text-right" )} > diff --git a/apps/marginfi-v2-trading/src/components/common/pnl-display/components/pnl-badge.tsx b/apps/marginfi-v2-trading/src/components/common/pnl-display/components/pnl-badge.tsx index 1dba762841..12eaedd25e 100644 --- a/apps/marginfi-v2-trading/src/components/common/pnl-display/components/pnl-badge.tsx +++ b/apps/marginfi-v2-trading/src/components/common/pnl-display/components/pnl-badge.tsx @@ -37,7 +37,7 @@ const PnlBadge = ({ pnl, positionSize, className }: PnlBadgeProps) => { className={cn( "bg-muted shadow-none text-muted-foreground text-[11px] px-1", className, - positionState === "positive" && "bg-success/20 text-success", + positionState === "positive" && "bg-success/20 text-mrgn-success", positionState === "negative" && "bg-destructive text-destructive-foreground" )} > diff --git a/apps/marginfi-v2-trading/src/components/common/pnl-display/components/pnl-label.tsx b/apps/marginfi-v2-trading/src/components/common/pnl-display/components/pnl-label.tsx index d95fc20160..1fffa25c43 100644 --- a/apps/marginfi-v2-trading/src/components/common/pnl-display/components/pnl-label.tsx +++ b/apps/marginfi-v2-trading/src/components/common/pnl-display/components/pnl-label.tsx @@ -70,8 +70,8 @@ const PnlLabelContent = ({ pnl, positionSize, className, currentType, setCurrent className={cn( className, setCurrentType ? "cursor-pointer" : "cursor-default", - positionState === "positive" && "text-success", - positionState === "negative" && "text-error" + positionState === "positive" && "text-mrgn-success", + positionState === "negative" && "text-mrgn-error" )} onClick={() => { if (!setCurrentType) return; diff --git a/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/action-simulation-status/action-simuation-status.tsx b/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/action-simulation-status/action-simuation-status.tsx index 0be11f5601..9c9d6dfa40 100644 --- a/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/action-simulation-status/action-simuation-status.tsx +++ b/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/action-simulation-status/action-simuation-status.tsx @@ -59,13 +59,13 @@ const ActionSimulationStatus = ({ )} {simulationCompleteStatus === SimulationCompleteStatus.SUCCESS && ( -

+

Simulation complete!

)} {simulationCompleteStatus === SimulationCompleteStatus.ERROR && ( -

+

Simulation failed

)} diff --git a/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/stats/stats.tsx b/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/stats/stats.tsx index 72afc12080..3b52a8a4a9 100644 --- a/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/stats/stats.tsx +++ b/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/stats/stats.tsx @@ -33,7 +33,11 @@ export const Stats = ({ activePool, accountSummary, simulationResult, actionTxns label={stat.label} classNames={cn( stat.color && - (stat.color === "SUCCESS" ? "text-success" : stat.color === "ALERT" ? "text-alert" : "text-error") + (stat.color === "SUCCESS" + ? "text-mrgn-success" + : stat.color === "ALERT" + ? "text-alert" + : "text-mrgn-error") )} > diff --git a/apps/marginfi-v2-trading/src/styles/globals.css b/apps/marginfi-v2-trading/src/styles/globals.css index cb334fd314..29c633a22e 100644 --- a/apps/marginfi-v2-trading/src/styles/globals.css +++ b/apps/marginfi-v2-trading/src/styles/globals.css @@ -38,7 +38,9 @@ /* brand vars */ --mrgn-green: 147 49% 66%; + --mrgn-green-foreground: 147 49% 25%; --mrgn-red: 6 78% 73%; + --mrgn-red-foreground: 6 78% 25%; --mrgn-yellow: 43.66 100% 50%; --mrgn-chartreuse: 66 75% 64%; --mrgn-gold: 33 16% 67%; diff --git a/apps/marginfi-v2-trading/tailwind.config.js b/apps/marginfi-v2-trading/tailwind.config.js index e29999b1c2..2db6ac8839 100644 --- a/apps/marginfi-v2-trading/tailwind.config.js +++ b/apps/marginfi-v2-trading/tailwind.config.js @@ -97,14 +97,16 @@ module.exports = { }, mrgn: { green: "hsl(var(--mrgn-green))", + "green-foreground": "hsl(var(--mrgn-green-foreground))", red: "hsl(var(--mrgn-red))", + "red-foreground": "hsl(var(--mrgn-red-foreground))", yellow: "hsl(var(--mrgn-yellow))", + success: "hsl(var(--mrgn-green))", + warning: "hsl(var(--mrgn-yellow))", + error: "hsl(var(--mrgn-red))", chartreuse: "hsl(var(--mrgn-chartreuse))", gold: "hsl(var(--mrgn-gold))", slate: "hsl(var(--mrgn-slate))", - success: "#75ba80", - warning: "#daa204", - error: "#e07d6f", }, mfi: { "action-box": { diff --git a/packages/mrgn-ui/src/components/ui/button.tsx b/packages/mrgn-ui/src/components/ui/button.tsx index bae53349c8..d5e3820032 100644 --- a/packages/mrgn-ui/src/components/ui/button.tsx +++ b/packages/mrgn-ui/src/components/ui/button.tsx @@ -13,8 +13,8 @@ const buttonVariants = cva( outline: "border border-border bg-background shadow-sm hover:bg-background/80 hover:text-secondary-foreground", "outline-dark": "border border-background-gray-hover bg-transparent shadow-sm hover:bg-background-gray-hover", secondary: "bg-accent text-primary shadow-sm", - long: "bg-mrgn-green text-primary shadow-sm", - short: "bg-mrgn-red text-primary shadow-sm", + long: "bg-mrgn-green text-mrgn-green-foreground shadow-sm", + short: "bg-mrgn-red text-mrgn-red-foreground shadow-sm", ghost: "hover:bg-accent", link: "text-primary underline-offset-4 hover:underline", },