From c37f6743b56f082817eef9b231bbdc480da2ec1c Mon Sep 17 00:00:00 2001
From: borcherd <borcherd@me.com>
Date: Fri, 13 Dec 2024 10:07:57 +0100
Subject: [PATCH] chore: styling changes

---
 .../components/amount-input/amount-input.tsx      | 15 ++++++++++++---
 .../components/amount-preview/amount-preview.tsx  |  2 +-
 .../trade-box-v2/components/header/header.tsx     | 12 ++++++------
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/amount-input/amount-input.tsx b/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/amount-input/amount-input.tsx
index 9596d0094..55f145a58 100644
--- a/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/amount-input/amount-input.tsx
+++ b/apps/marginfi-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/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/amount-preview/amount-preview.tsx b/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/amount-preview/amount-preview.tsx
index 1d1717aea..df4f3922d 100644
--- a/apps/marginfi-v2-trading/src/components/common/trade-box-v2/components/amount-preview/amount-preview.tsx
+++ b/apps/marginfi-v2-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
index 20518d21f..718b7011e 100644
--- 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,12 +21,12 @@ 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 ">
@@ -34,14 +34,14 @@ export const Header = ({ activePool }: HeaderProps) => {
           </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>