Jonator/hotfix round 1

packages/web/components/alert/info.tsx

@@ -7,6 +7,7 @@ export const Info: FunctionComponent<
   { size?: "large" | "subtle" } & Alert & {
       data?: string;
       borderClassName?: string;
+      textClassName?: string;
     } & CustomClasses &
     MobileProps
 > = ({
@@ -15,6 +16,7 @@ export const Info: FunctionComponent<
   caption,
   data,
   borderClassName,
+  textClassName,
   className,
   isMobile = false,
 }) =>
@@ -25,7 +27,14 @@ export const Info: FunctionComponent<
         className
       )}
     >
-      <span className="subtitle1 text-white-mid md:caption">{message}</span>
+      <span
+        className={classNames(
+          "subtitle1 text-wosmongton-100 md:caption",
+          textClassName
+        )}
+      >
+        {message}
+      </span>
     </div>
   ) : (
     <div
@@ -36,7 +45,7 @@ export const Info: FunctionComponent<
     >
       <div
         className={classNames(
-          "flex grow place-content-between md:gap-1 px-5 py-4 md:p-2 bg-osmoverse-800 rounded-2xlinset",
+          "flex grow place-content-between md:gap-1 px-3 py-2 md:p-2 bg-osmoverse-800 rounded-2xlinset",
           {
             "items-center": !data,
           },
@@ -45,15 +54,22 @@ export const Info: FunctionComponent<
       >
         <div className="flex flex-col">
           {isMobile ? (
-            <span className="caption">
+            <span className={classNames("caption", textClassName)}>
               {message}
               {data && ` - ${data}`}
             </span>
           ) : (
-            <h6>{message}</h6>
+            <span className={classNames("body2", textClassName)}>
+              {message}
+            </span>
           )}
           {caption && (
-            <span className="text-osmoverse-400 body2 md:caption">
+            <span
+              className={classNames(
+                "text-wosmongton-100 body2 md:caption",
+                textClassName
+              )}
+            >
               {caption}
             </span>
           )}

packages/web/components/complex/add-liquidity.tsx

@@ -94,23 +94,6 @@ export const AddLiquidity: FunctionComponent<
                 key={currency.coinDenom}
                 className="flex flex-col gap-1 w-full md:p-3 p-4 border border-osmoverse-700 md:rounded-xl rounded-2xl"
               >
-                {isPeggedCurrency && (
-                  <Info
-                    size="subtle"
-                    className="border-2 border-rust-200/30"
-                    message={`You are adding liquidity to ${
-                      currency!.originCurrency!.coinDenom
-                    }, ${
-                      ["a", "e", "i", "o", "u"].some((vowel) =>
-                        currency.originCurrency!.pegMechanism!.startsWith(vowel)
-                      )
-                        ? "an"
-                        : "a"
-                    } ${
-                      currency.originCurrency!.pegMechanism
-                    }-backed stablecoin.`}
-                  />
-                )}
                 <div className="flex items-center w-full place-content-between">
                   {addLiquidityConfig.isSingleAmountIn ? (
                     <PoolTokenSelect
@@ -197,6 +180,17 @@ export const AddLiquidity: FunctionComponent<
                     </div>
                   </div>
                 </div>
+                {isPeggedCurrency && (
+                  <Info
+                    className="text-wosmongton-100"
+                    borderClassName="bg-gradient-neutral"
+                    textClassName="w-full text-center"
+                    message={t("addLiquidity.stablecoinWarning", {
+                      denom: currency!.originCurrency!.coinDenom,
+                      mechanism: currency.originCurrency!.pegMechanism!,
+                    })}
+                  />
+                )}
               </div>
             );
           })}

packages/web/components/navbar/index.tsx

@@ -137,6 +137,7 @@ const NavBarButton: FunctionComponent<
         src={hovered ? hovericonurl : iconurl}
         height={24}
         width={24}
+        priority={true}
       />
     </button>
   );

packages/web/components/table/cells/transfer-button.tsx

@@ -102,13 +102,15 @@ const TransferButton: FunctionComponent<{
           src="/icons/chevron-right-rust.svg"
           height={13}
           width={13}
+          priority={true}
         />
       ) : (
         <Image
           alt="chevron"
           src="/icons/chevron-right.svg"
           height={13}
           width={13}
+          priority={true}
         />
       )}
     </button>