fix: skeleton adjustment

mrgnlabs · Dec 18, 2023 · a097b72 · a097b72
1 parent 4b5ea83
commit a097b72
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx
@@ -568,7 +568,7 @@ const ActionBoxAvailableCollateral: FC<{
           </MrgnTooltip>
         </dt>
         <dd className="text-xl md:text-sm font-bold text-white" >
-          {isLoading ? <Skeleton className="h-4 w-[45px]" /> : (usdFormatterDyn.format(preview?.availableCollateral.amount ?? availableAmount))}
+          {isLoading ? <Skeleton className="h-4 w-[45px] bg-[#373F45]" /> : (usdFormatterDyn.format(preview?.availableCollateral.amount ?? availableAmount))}
         </dd>
       </dl>
       <div className="h-2 mb-2 bg-background-gray-light">

diff --git a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.utils.ts b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.utils.ts
@@ -40,7 +40,7 @@ export function checkActionAvailable({
 
   if (!selectedBank) {
     // this shouldn't happen
-    return { description: "Something went wrong",  isEnabled: false };
+    return { description: "Something went wrong", isEnabled: false };
   }
 
   switch (actionMode) {
@@ -80,10 +80,10 @@ function generalChecks(
   showCloseBalance?: boolean
 ): ActionMethod | null {
   if (!connected) {
-    return {  isEnabled: false };
+    return { isEnabled: false };
   }
   if (!selectedBank) {
-    return { description: "Select token and amount.", isEnabled: false };
+    return { isEnabled: false };
   }
 
   if (showCloseBalance) {
@@ -93,9 +93,10 @@ function generalChecks(
   return null;
 }
 
-function canBeWithdrawn(targetBankInfo: ExtendedBankInfo,
+function canBeWithdrawn(
+  targetBankInfo: ExtendedBankInfo,
   marginfiAccount: MarginfiAccountWrapper | null
-  ): ActionMethod | null {
+): ActionMethod | null {
   const isPaused = targetBankInfo.info.rawBank.config.operationalState === OperationalState.Paused;
   if (isPaused) {
     return {

diff --git a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxPreview.tsx b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxPreview.tsx
@@ -83,7 +83,7 @@ export const ActionBoxPreview: FC<ActionBoxPreviewProps> = ({ marginfiAccount, s
       <Stat classNames={`text-[${healthColor}]`} label="Health">
         {accountSummary.healthFactor && percentFormatter.format(accountSummary.healthFactor)}
         {accountSummary.healthFactor && <IconArrowRight width={12} height={12} />}
-        {isLoading ? <Skeleton className="h-4 w-[45px]" /> : (preview?.health ? percentFormatter.format(preview.health) : "-")}
+        {isLoading ? <Skeleton className="h-4 w-[45px] bg-[#373F45]" /> : (preview?.health ? percentFormatter.format(preview.health) : "-")}
       </Stat>
       {(actionMode === ActionType.Borrow || isBorrowing) && (
         <Stat classNames={`text-[${liquidationColor}]`} label="Liquidation price">
@@ -92,7 +92,7 @@ export const ActionBoxPreview: FC<ActionBoxPreviewProps> = ({ marginfiAccount, s
             selectedBank.position.liquidationPrice > 0.01 &&
             numeralFormatter(selectedBank.position.liquidationPrice)}
           {selectedBank.isActive && selectedBank.position.liquidationPrice && <IconArrowRight width={12} height={12} />}
-          {isLoading ? <Skeleton className="h-4 w-[45px]" /> : (preview?.liquidationPrice ? numeralFormatter(preview.liquidationPrice) : "-")}
+          {isLoading ? <Skeleton className="h-4 w-[45px] bg-[#373F45]" /> : (preview?.liquidationPrice ? numeralFormatter(preview.liquidationPrice) : "-")}
         </Stat>
       )}
       <Stat classNames="text-[white]" label={showLending ? "Global deposits" : "Available"}>