chore: styling changes

mrgnlabs · Dec 13, 2024 · c37f674 · c37f674
1 parent 2de1af4
commit c37f674
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/...fi-v2-trading/src/components/common/trade-box-v2/components/amount-input/amount-input.tsx b/...fi-v2-trading/src/components/common/trade-box-v2/components/amount-input/amount-input.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-
+import Image from "next/image";
 import { Input } from "~/components/ui/input";
 import { MaxAction } from "./components";
 import { ArenaBank } from "~/store/tradeStoreV2";
@@ -22,9 +22,18 @@ export const AmountInput = ({
   const amountInputRef = React.useRef<HTMLInputElement>(null);
 
   return (
-    <div className="bg-background  p-2.5 border border-accent rounded-lg">
+    <div className="bg-accent p-2.5 border border-accent/150 rounded-lg">
       <div className="flex justify-center gap-1 items-center font-medium ">
-        <span className="w-full flex-auto max-w-[162px] text-muted-foreground text-lg">
+        <span className="w-full flex items-center gap-1 max-w-[162px] text-muted-foreground text-base">
+          {collateralBank?.meta.tokenLogoUri && (
+            <Image
+              src={collateralBank?.meta.tokenLogoUri}
+              alt={collateralBank?.meta.tokenSymbol}
+              width={24}
+              height={24}
+              className="bg-background border rounded-full"
+            />
+          )}
           {collateralBank?.meta.tokenSymbol.toUpperCase()}
         </span>
         <div>

diff --git a/...2-trading/src/components/common/trade-box-v2/components/amount-preview/amount-preview.tsx b/...2-trading/src/components/common/trade-box-v2/components/amount-preview/amount-preview.tsx
@@ -16,7 +16,7 @@ interface AmountPreviewProps {
 export const AmountPreview = ({ tradeSide, amount, isLoading, selectedBank }: AmountPreviewProps) => {
   return (
     <div className="flex flex-col gap-6">
-      <dl className="grid grid-cols-2 gap-y-2 text-base">
+      <dl className="grid grid-cols-2 gap-y-2 text-sm">
         <Stat label={`Size of ${tradeSide}`}>
           {isLoading ? <IconLoader size={16} /> : dynamicNumeralFormatter(amount)}{" "}
           {selectedBank?.meta.tokenSymbol.toUpperCase()}

diff --git a/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/header/header.tsx b/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/header/header.tsx
@@ -21,27 +21,27 @@ export const Header = ({ activePool }: HeaderProps) => {
           router.push(`/trade/${pool.groupPk.toBase58()}`);
         }}
       >
-        <div className="flex items-center justify-center font-medium text-lg hover:bg-accent translate-x-1.5 transition-colors cursor-pointer rounded-md px-2 py-1 gap-2">
+        <div className="flex items-center justify-center font-medium text-base hover:bg-accent translate-x-1.5 transition-colors cursor-pointer rounded-md px-2 py-1 gap-2">
           <Image
             src={activePool.tokenBank.meta.tokenLogoUri}
             alt={activePool.tokenBank.meta.tokenSymbol}
-            width={32}
-            height={32}
+            width={24}
+            height={24}
             className="bg-background border rounded-full lg:mb-0"
           />
           <h1 className="flex items-center gap-1 ">
             {activePool.tokenBank.meta.tokenName} <IconChevronDown size={18} />
           </h1>
         </div>
       </TokenCombobox>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-4">
         <div className="flex flex-col items-end ">
           <span className="text-xs text-muted-foreground">Entry price</span>
-          <span className="text-base">$122.00</span>
+          <span className="text-sm">$122.00</span>
         </div>
         <div className="flex flex-col items-end ">
           <span className="text-xs text-muted-foreground">24h volume</span>
-          <span className="text-base">$1.65m</span>
+          <span className="text-sm">$1.65m</span>
         </div>
       </div>
     </div>