From 906ac9e6a5597feff5dc3b5c276cba9812e4d19d Mon Sep 17 00:00:00 2001
From: Connor Barr <crnbarr@gmail.com>
Date: Thu, 8 Aug 2024 20:08:02 +0100
Subject: [PATCH] feat: more responsive changes for trade tool

---
 .../web/components/complex/asset-fieldset.tsx |  5 +-
 packages/web/components/swap-tool/alt.tsx     |  8 +-
 packages/web/components/ui/recap-row.tsx      |  2 +-
 packages/web/modals/review-order.tsx          | 73 ++++++++++---------
 packages/web/utils/formatter.ts               |  1 -
 5 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/packages/web/components/complex/asset-fieldset.tsx b/packages/web/components/complex/asset-fieldset.tsx
index 13b822c1e8..5437a14aeb 100644
--- a/packages/web/components/complex/asset-fieldset.tsx
+++ b/packages/web/components/complex/asset-fieldset.tsx
@@ -118,12 +118,11 @@ const AssetFieldsetInput = forwardRef<
 >(({ inputPrefix, inputValue, onInputChange, outputValue, ...rest }, ref) => {
   const { isMobile } = useWindowSize(Breakpoint.sm);
   const fontSize = calcFontSize((inputValue ?? "").length, isMobile);
-
   return (
     <div
-      className="flex h-[72px] flex-1 items-center overflow-visible font-h3 sm:h-[48px]"
+      className="flex h-[72px] flex-1 items-center overflow-visible text-h3 font-h3 sm:h-[48px] sm:text-[30px] sm:font-h5"
       style={{
-        fontSize,
+        fontSize: !!inputValue ? fontSize : undefined,
       }}
     >
       {inputPrefix}
diff --git a/packages/web/components/swap-tool/alt.tsx b/packages/web/components/swap-tool/alt.tsx
index 091a9dac0d..74fad3acc4 100644
--- a/packages/web/components/swap-tool/alt.tsx
+++ b/packages/web/components/swap-tool/alt.tsx
@@ -431,9 +431,9 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
                 <div className="flex items-center justify-between py-3">
                   <AssetFieldsetInput
                     outputValue={
-                      <h3
+                      <span
                         className={classNames(
-                          "whitespace-nowrap transition-opacity",
+                          "whitespace-nowrap text-h3 font-h3 transition-opacity sm:text-[30px] sm:font-h5",
                           swapState.quote?.amount.toDec().isPositive() &&
                             !swapState.inAmountInput.isTyping &&
                             !swapState.isQuoteLoading
@@ -451,7 +451,7 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
                                   maximumSignificantDigits: 6,
                                   maxDecimals: 10,
                                   notation: "standard",
-                                }).length,
+                                }).replace(/[,\.]/g, "").length,
                                 isMobile
                               )
                             : undefined,
@@ -465,7 +465,7 @@ export const AltSwapTool: FunctionComponent<SwapToolProps> = observer(
                               notation: "standard",
                             })
                           : "0"}
-                      </h3>
+                      </span>
                     }
                   />
                   <AssetFieldsetTokenSelector
diff --git a/packages/web/components/ui/recap-row.tsx b/packages/web/components/ui/recap-row.tsx
index 74086f9d0b..938e223104 100644
--- a/packages/web/components/ui/recap-row.tsx
+++ b/packages/web/components/ui/recap-row.tsx
@@ -17,7 +17,7 @@ export function RecapRow({
         className
       )}
     >
-      <span className="text-osmoverse-300">{left}</span>
+      <span className="sm:caption text-osmoverse-300">{left}</span>
       {right}
     </div>
   );
diff --git a/packages/web/modals/review-order.tsx b/packages/web/modals/review-order.tsx
index 6e4e11a943..467aaa3d32 100644
--- a/packages/web/modals/review-order.tsx
+++ b/packages/web/modals/review-order.tsx
@@ -20,9 +20,11 @@ import { RecapRow } from "~/components/ui/recap-row";
 import { Skeleton } from "~/components/ui/skeleton";
 import { EventName, EventPage } from "~/config/analytics-events";
 import {
+  Breakpoint,
   useAmplitudeAnalytics,
   useOneClickTradingSession,
   useTranslation,
+  useWindowSize,
 } from "~/hooks";
 import { isValidNumericalRawInput } from "~/hooks/input/use-amount-input";
 import { useSwap } from "~/hooks/use-swap";
@@ -95,6 +97,7 @@ export function ReviewOrder({
     "type",
     parseAsString.withDefault("market")
   );
+  const { isMobile } = useWindowSize(Breakpoint.sm);
 
   const isManualSlippageTooHigh = +manualSlippage > 1;
   const isManualSlippageTooLow = manualSlippage !== "" && +manualSlippage < 0.1;
@@ -173,11 +176,11 @@ export function ReviewOrder({
         title={t("swap.gas.gasEstimationError")}
         body={gasFeeError}
       >
-        <span className="flex items-center gap-1">
+        <span className="sm:caption flex items-center gap-1">
           <Icon
             id="question"
-            width={24}
-            height={24}
+            width={isMobile ? 20 : 24}
+            height={isMobile ? 20 : 24}
             className="scale-75 text-osmoverse-300"
           />{" "}
           {t("swap.gas.unknown")}
@@ -186,7 +189,7 @@ export function ReviewOrder({
     ) : (
       <span
         className={classNames(
-          "inline-flex items-center gap-1 text-osmoverse-100",
+          "sm:caption inline-flex items-center gap-1 text-osmoverse-100",
           { "animate-pulse": isGasLoading }
         )}
       >
@@ -194,7 +197,7 @@ export function ReviewOrder({
         {gasAmount && gasAmount.toString()}
       </span>
     );
-  }, [gasAmount, isGasLoading, gasFeeError, t]);
+  }, [gasAmount, isGasLoading, gasFeeError, isMobile, t]);
 
   return (
     <ModalBase
@@ -219,7 +222,7 @@ export function ReviewOrder({
           })}
         >
           {orderType === "limit" && tab !== "swap" && (
-            <div className="flex flex-col rounded-t-2xl border border-osmoverse-700 px-4 py-2">
+            <div className="sm:subtitle2 flex flex-col rounded-t-2xl border border-osmoverse-700 px-4 py-2">
               <div className="flex items-center gap-4">
                 <div className="flex h-10 min-w-10 items-center justify-center">
                   {(tab === "buy" && !isBeyondOppositePrice) ||
@@ -241,7 +244,7 @@ export function ReviewOrder({
                     />
                   )}
                 </div>
-                <span className="w-full text-osmoverse-300">
+                <span className="flex-1 text-osmoverse-300">
                   If {baseDenom} price reaches{" "}
                   {limitPriceFiat &&
                     formatPretty(
@@ -300,29 +303,27 @@ export function ReviewOrder({
                   />
                 )}
                 <div className="flex flex-col">
-                  <p className="text-osmoverse-300">
+                  <p className="sm:caption text-osmoverse-300">
                     {tab === "buy"
                       ? t("limitOrders.pay")
                       : t("limitOrders.sell")}
                   </p>
                   {inAmountToken && (
-                    <span className="subtitle1">
+                    <span className="subtitle1 sm:subtitle2">
                       {formatPretty(inAmountToken)}
                     </span>
                   )}
                 </div>
               </div>
-              <div className="flex flex-col items-end">
-                <p>
-                  {formatPretty(
-                    inAmountFiat ?? new PricePretty(DEFAULT_VS_CURRENCY, 0),
-                    {
-                      ...getPriceExtendedFormatOptions(
-                        inAmountFiat?.toDec() ?? new Dec(0)
-                      ),
-                    }
-                  )}
-                </p>
+              <div className="sm:subtitle2 flex flex-col items-end">
+                {formatPretty(
+                  inAmountFiat ?? new PricePretty(DEFAULT_VS_CURRENCY, 0),
+                  {
+                    ...getPriceExtendedFormatOptions(
+                      inAmountFiat?.toDec() ?? new Dec(0)
+                    ),
+                  }
+                )}
               </div>
             </div>
             <div className="flex items-center justify-between p-2">
@@ -347,12 +348,12 @@ export function ReviewOrder({
                   />
                 )}
                 <div className="flex flex-col">
-                  <p className="text-osmoverse-300">
+                  <p className="sm:caption text-osmoverse-300">
                     {tab === "sell"
                       ? t("limitOrders.receive")
                       : t("portfolio.buy")}
                   </p>
-                  <span className="subtitle1">
+                  <span className="subtitle1 sm:subtitle2">
                     {expectedOutput && (
                       <>
                         {formatPretty(expectedOutput.toDec(), {
@@ -372,14 +373,14 @@ export function ReviewOrder({
                   {outputDifference && (
                     <span
                       className={classNames(
-                        "body2",
+                        "body2 sm:caption",
                         showOutputDifferenceWarning
                           ? "text-rust-400"
                           : "text-osmoverse-300"
                       )}
                     >{`-${outputDifference}`}</span>
                   )}
-                  <span>
+                  <span className="sm:subtitle2">
                     {formatPretty(expectedOutputFiat ?? new Dec(0), {
                       ...getPriceExtendedFormatOptions(
                         expectedOutputFiat?.toDec() ?? new Dec(0)
@@ -416,7 +417,7 @@ export function ReviewOrder({
                       </span>
                     }
                   >
-                    <div className="flex items-center justify-center">
+                    <div className="sm:caption flex items-center justify-center">
                       {isBeyondOppositePrice && (
                         <Icon
                           id="alert-circle"
@@ -453,7 +454,7 @@ export function ReviewOrder({
                             placeholder={
                               slippageConfig?.defaultManualSlippage + "%"
                             }
-                            className="w-fit bg-transparent px-0"
+                            className="sm:caption w-fit bg-transparent px-0"
                             inputClassName={classNames(
                               "!bg-transparent focus:text-center text-right placeholder:text-wosmongton-300 transition-all focus-visible:outline-none",
                               {
@@ -514,10 +515,10 @@ export function ReviewOrder({
                         className="text-rust-400"
                       />
                       <div className="flex flex-col gap-1">
-                        <span className="body2">
+                        <span className="body2 sm:caption">
                           {t("limitOrders.errors.tradeMayResultInLossOfValue")}
                         </span>
-                        <span className="body2 text-osmoverse-300">
+                        <span className="body2 sm:caption text-osmoverse-300">
                           {t("limitOrders.lowerSlippageToleranceRecommended")}
                         </span>
                       </div>
@@ -540,10 +541,10 @@ export function ReviewOrder({
                         />
                       </svg>
                       <div className="flex flex-col gap-1">
-                        <span className="body2">
+                        <span className="body2 sm:caption">
                           {t("limitOrders.errors.tradeMayNotExecuted")}
                         </span>
-                        <span className="body2 text-osmoverse-300">
+                        <span className="body2 sm:caption text-osmoverse-300">
                           {t("limitOrders.tryHigherSlippage")}
                         </span>
                       </div>
@@ -558,7 +559,7 @@ export function ReviewOrder({
                 <RecapRow
                   left="Receive at least"
                   right={
-                    <span>
+                    <span className="sm:caption">
                       {outAmountLessSlippage &&
                         outFiatAmountLessSlippage &&
                         toAsset && (
@@ -587,7 +588,7 @@ export function ReviewOrder({
                 <RecapRow
                   left="Trade fee"
                   right={
-                    <span className="text-bullish-400">
+                    <span className="sm:caption text-bullish-400">
                       {t("transfer.free")}
                     </span>
                   }
@@ -614,13 +615,13 @@ export function ReviewOrder({
                   height={24}
                   className="text-rust-400"
                 />
-                <div className="flex flex-col gap-1">
-                  <span className="body2">
+                <div className="body2 sm:caption flex flex-col gap-1">
+                  <span>
                     {tab === "buy"
                       ? t("limitOrders.aboveMarket.title")
                       : t("limitOrders.belowMarket.title")}
                   </span>
-                  <span className="body2 text-osmoverse-300">
+                  <span className="text-osmoverse-300">
                     {tab === "buy"
                       ? t("limitOrders.aboveMarket.description")
                       : t("limitOrders.belowMarket.description")}
@@ -634,7 +635,7 @@ export function ReviewOrder({
                   mode="primary"
                   onClick={confirmAction}
                   disabled={isConfirmationDisabled}
-                  className="body2 !rounded-2xl"
+                  className="body2 sm:caption !rounded-2xl"
                 >
                   <h6>{t("limitOrders.confirm")}</h6>
                 </Button>
diff --git a/packages/web/utils/formatter.ts b/packages/web/utils/formatter.ts
index 7043d8fd29..1531e58375 100644
--- a/packages/web/utils/formatter.ts
+++ b/packages/web/utils/formatter.ts
@@ -389,7 +389,6 @@ export function calcFontSize(numChars: number, isMobile: boolean): string {
         16: "28px",
         33: "24px",
       };
-
   for (const [key, value] of Object.entries(sizeMapping)) {
     if (numChars <= Number(key)) {
       return value;