chore: success / error colors

mrgnlabs · Mar 4, 2025 · ae2351a · ae2351a
1 parent 018def3
commit ae2351a
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 17 deletions.
diff --git a/...-trading/src/components/common/Pool/CreatePoolDialog/components/create-pool-configure.tsx b/...-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.
                   </p>
                 ) : WARNING_THRESHOLD < groupFee ? (
-                  <p className="text-sm font-normal text-warning">
+                  <p className="text-sm font-normal text-mrgn-warning">
                     The group fee is higher than recommended. A lower fee may increase activity.
                   </p>
                 ) : null}

diff --git a/...-v2-trading/src/components/common/Pool/CreatePoolDialog/components/create-pool-review.tsx b/...-v2-trading/src/components/common/Pool/CreatePoolDialog/components/create-pool-review.tsx
@@ -184,7 +184,11 @@ const TokenSummary = ({
         <p
           className={cn(
             "text-sm",
-            protocolFeeStatus === "ALERT" ? "text-destructive" : protocolFeeStatus === "WARNING" ? "text-warning" : ""
+            protocolFeeStatus === "ALERT"
+              ? "text-destructive"
+              : protocolFeeStatus === "WARNING"
+                ? "text-mrgn-warning"
+                : ""
           )}
         >
           {percentFormatter.format(bankConfig.interestRateConfig?.protocolIrFee.toNumber() ?? 0)}

diff --git a/...olio/components/close-position/components/close-position-dialog/close-position-dialog.tsx b/...olio/components/close-position/components/close-position-dialog/close-position-dialog.tsx
@@ -108,10 +108,10 @@ export const ClosePositionDialog = ({
               <dd
                 className={cn(
                   Number(actionTransaction.actionQuote.priceImpactPct) > 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 = ({
               <dt>Slippage</dt>
               <dd
                 className={cn(
-                  actionTransaction.actionQuote.slippageBps > 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
@@ -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
@@ -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/...nents/common/trade-box-v2/components/action-simulation-status/action-simuation-status.tsx b/...nents/common/trade-box-v2/components/action-simulation-status/action-simuation-status.tsx
@@ -59,13 +59,13 @@ const ActionSimulationStatus = ({
       )}
 
       {simulationCompleteStatus === SimulationCompleteStatus.SUCCESS && (
-        <p className="text-xs flex items-center gap-1 mr-auto text-success">
+        <p className="text-xs flex items-center gap-1 mr-auto text-mrgn-success">
           <IconCheck size={14} /> Simulation complete!
         </p>
       )}
 
       {simulationCompleteStatus === SimulationCompleteStatus.ERROR && (
-        <p className="text-xs flex items-center gap-1 mr-auto text-error">
+        <p className="text-xs flex items-center gap-1 mr-auto text-mrgn-error">
           <IconX size={14} /> Simulation failed
         </p>
       )}

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
@@ -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")
               )}
             >
               <stat.value />

diff --git 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
@@ -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
@@ -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",
       },