feat: style inline user positions

mrgnlabs · Nov 25, 2023 · f064434 · f064434
1 parent 6de3183
commit f064434
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx b/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetRow/AssetRow.tsx
@@ -17,7 +17,7 @@ import { MrgnTooltip } from "~/components/common/MrgnTooltip";
 import { AssetRowInputBox, AssetRowAction, LSTDialogVariants } from "~/components/common/AssetList";
 import { useAssetItemData } from "~/hooks/useAssetItemData";
 import { useWalletContext } from "~/hooks/useWalletContext";
-import { closeBalance, executeLendingAction, MarginfiActionParams } from "~/utils";
+import { closeBalance, executeLendingAction, MarginfiActionParams, cn } from "~/utils";
 
 export const EMISSION_MINT_INFO_MAP = new Map<string, { tokenSymbol: string; tokenLogoUri: string }>([
   [
@@ -501,15 +501,29 @@ const AssetRow: FC<{
           >
             <div className="bg-accent m-3 p-4 rounded-lg">
               <h3>Your position details</h3>
-              <dl>
-                <dt>{userPosition.position.isLending ? "Lending" : "Borrowing"}</dt>
-                <dd>{userPosition.position.amount}</dd>
-                <dt>USD Value</dt>
-                <dd>{userPosition.position.usdValue}</dd>
+              <dl className="flex items-center text-accent-foreground mt-2 text-sm">
+                <dt className="mr-1.5">{userPosition.position.isLending ? "Lending" : "Borrowing"}</dt>
+                <dd className="mr-4 pr-4 border-accent-foreground/50 border-r text-white font-medium">
+                  {userPosition.position.amount < 0.01 && "< "}
+                  {numeralFormatter(userPosition.position.amount)}
+                </dd>
+                <dt className="mr-1.5">USD Value</dt>
+                <dd
+                  className={cn(
+                    "mr-4 text-white font-medium",
+                    userPosition.position.liquidationPrice &&
+                      userPosition.position.liquidationPrice > 0 &&
+                      "pr-4 border-accent-foreground/50 border-r"
+                  )}
+                >
+                  {usdFormatter.format(userPosition.position.usdValue)}
+                </dd>
                 {userPosition.position.liquidationPrice && userPosition.position.liquidationPrice > 0 && (
                   <>
-                    <dt>Liq price</dt>
-                    <dd>{userPosition.position.liquidationPrice}</dd>
+                    <dt className="mr-1.5">Liq price</dt>
+                    <dd className="text-white font-medium">
+                      {usdFormatter.format(userPosition.position.liquidationPrice)}
+                    </dd>
                   </>
                 )}
               </dl>

diff --git a/apps/marginfi-v2-ui/src/styles/globals.css b/apps/marginfi-v2-ui/src/styles/globals.css
@@ -29,7 +29,7 @@
 
     --accent: 210 10% 15%;
     --accent-highlight: 240 4% 21%;
-    --accent-foreground: 0 0% 98%;
+    --accent-foreground: 213 5% 50%;
 
     --destructive: #e06d6f1a;
     --destructive-foreground: 359 65% 65%;