UI Update

src/components/activity/ActivityCountDown.tsx

@@ -107,8 +107,8 @@ export const ActivityCountDown: FC<Props> = ({ time }) => {
 
   return (
     <svg
-      width="45"
-      height="45"
+      width="30"
+      height="30"
       viewBox="0 0 100 100"
       fill="none"
       aria-label={`${count}seconds until next refresh`}

src/components/activity/ActivityLayout.tsx

@@ -8,8 +8,8 @@ export const ActivityLayout: FC<ActivityFilterProps> = (props) => {
   const { filters = [] } = props;
   return (
     <section className="bg-background-900 rounded">
-      <header className="grid grid-cols-[auto_1fr] gap-16 px-20 py-24 md:grid-cols-[auto_1fr_auto]">
-        <h2 className="row-start-1">Activity</h2>
+      <header className="grid grid-cols-[auto_1fr] gap-16 px-20 pb-12 pt-16 md:grid-cols-[auto_1fr_auto]">
+        <h2 className="text-16 row-start-1 m-0 self-center">Activity</h2>
         <ActivityFilter
           filters={filters}
           className="col-span-2 row-start-2 md:col-auto md:row-start-1"

src/components/activity/ActivityTable.tsx

@@ -29,7 +29,7 @@ import { useActivity, useActivityPagination } from './ActivityProvider';
 import style from './ActivityTable.module.css';
 
 const thStyle = cn(
-  'text-start font-weight-400 py-16 pl-8 whitespace-nowrap',
+  'text-14 text-start font-weight-400 py-16 pl-8 whitespace-nowrap',
   'first:pl-24',
   'last:pr-24 last:text-end'
 );

src/components/common/TokenInputField/TokenInputField.tsx

@@ -107,7 +107,7 @@ export const TokenInputField: FC<Props> = (props) => {
           onFocus={(e) => e.target.select()}
           onBlur={handleBlur}
           className={cn(
-            'text-18 font-weight-500 grow text-ellipsis bg-transparent focus:outline-none',
+            'text-16 font-weight-500 grow text-ellipsis bg-transparent focus:outline-none',
             disabled && 'cursor-not-allowed text-white/40',
             isError && 'text-error'
           )}

src/components/common/tabs/TabsMenu.tsx

@@ -1,11 +1,13 @@
 import { FC, ReactNode } from 'react';
+import { cn } from 'utils/helpers';
 
 type TabsMenuProps = {
+  className?: string;
   children: ReactNode;
 };
 
-export const TabsMenu: FC<TabsMenuProps> = ({ children }) => {
+export const TabsMenu: FC<TabsMenuProps> = ({ children, className }) => {
   return (
-    <div className="rounded-10 flex space-x-2 bg-black p-2">{children}</div>
+    <div className={cn('flex gap-2 bg-black p-2', className)}>{children}</div>
   );
 };

src/components/simulator/input/BuySellBlockNew/index.tsx

@@ -12,6 +12,8 @@ import {
   StrategyInputDispatch,
   StrategyInputOrder,
 } from 'hooks/useStrategyInput';
+import style from 'components/strategies/common/order.module.css';
+import { cn } from 'utils/helpers';
 
 type Props = {
   base: Token;
@@ -25,6 +27,7 @@ type Props = {
   isOrdersOverlap: boolean;
   isOrdersReversed: boolean;
   warningMsg?: string;
+  className?: string;
 };
 
 export const BuySellBlock: FC<Props> = ({
@@ -39,6 +42,7 @@ export const BuySellBlock: FC<Props> = ({
   isOrdersOverlap,
   isOrdersReversed,
   warningMsg,
+  className,
 }) => {
   const titleId = useId();
 
@@ -92,15 +96,12 @@ export const BuySellBlock: FC<Props> = ({
   return (
     <section
       aria-labelledby={titleId}
-      className={`rounded-10 bg-background-900 flex flex-col gap-20 border-l-2 p-20 ${
-        buy
-          ? 'border-buy/50 focus-within:border-buy'
-          : 'border-sell/50 focus-within:border-sell'
-      }`}
+      className={cn(style.order, className, 'grid gap-16 p-16')}
       data-testid={`${buy ? 'buy' : 'sell'}-section`}
+      data-direction={buy ? 'buy' : 'sell'}
     >
       <BuySellHeader {...headerProps}>
-        <h2 className="text-18 flex items-center gap-8" id={titleId}>
+        <h2 className="text-16 flex items-center gap-8" id={titleId}>
           <Tooltip sendEventOnMount={{ buy }} element={tooltipText}>
             <span>{buy ? 'Buy Low' : 'Sell High'}</span>
           </Tooltip>

src/components/simulator/input/SimInputRecurring.tsx

@@ -70,6 +70,7 @@ export const SimInputRecurring = ({
         strategyType="recurring"
         isBudgetOptional={+state.buy.budget === 0 && +state.sell.budget > 0}
         warningMsg={warningMsg.buy}
+        className="rounded-ee rounded-es"
       />
     </>
   );

src/components/simulator/input/SimInputStrategyType.tsx

@@ -35,10 +35,7 @@ export const SimInputStrategyType = () => {
   ];
 
   return (
-    <section
-      className="rounded-10 bg-background-900 p-16"
-      key="simulatorTypeSelection"
-    >
+    <section className="p-16" key="simulatorTypeSelection">
       <header className="mb-16 flex items-center justify-between">
         <h2 className="text-18 font-weight-500 m-0">Trading Strategy</h2>
       </header>

src/components/simulator/input/SimInputTokenSelection.tsx

@@ -6,7 +6,6 @@ import { ReactComponent as IconArrow } from 'assets/icons/arrowDown.svg';
 import { useModal } from 'hooks/useModal';
 import { Warning } from 'components/common/WarningMessageWithIcon';
 import { cn } from 'utils/helpers';
-import { Tooltip } from 'components/common/tooltip/Tooltip';
 
 interface Props {
   baseToken?: string;
@@ -26,27 +25,7 @@ export const SimInputTokenSelection: FC<Props> = ({
   const quote = getTokenById(quoteToken);
 
   return (
-    <section
-      className="rounded-10 bg-background-900 flex flex-col gap-16 p-16"
-      key="simulatorTokenSelection"
-    >
-      <header className="flex items-center justify-between">
-        <h2 className="text-18 font-weight-500 m-0">Token Pair</h2>
-        <Tooltip
-          iconClassName="size-18 text-white/60"
-          element={
-            <p>
-              Selecting the tokens you would like to create a simulation for.
-              <br />
-              <b>Buy or Sell</b> token (also called <b>Base</b> token) is the
-              token you would like to buy or sell in the strategy.
-              <br />
-              <b>With</b> token (also called <b>Quote</b> token) is the token
-              you would denominate the rates in.
-            </p>
-          }
-        />
-      </header>
+    <section className="grid gap-16 p-16" key="simulatorTokenSelection">
       <article className="font-weight-500 flex flex-row items-center -space-x-10">
         <SelectTokenButton
           chevronClassName="h-7.5 w-13"

src/components/simulator/input/overlapping/CreateOverlappingStrategy.tsx

@@ -309,7 +309,7 @@ export const CreateOverlappingStrategy: FC<Props> = (props) => {
 
   return (
     <>
-      <article className="rounded-10 bg-background-900 flex w-full flex-col gap-16 p-20">
+      <article className="grid gap-16 p-16">
         <header className="flex items-center gap-8">
           <h3 className="text-18 font-weight-500 flex-1">
             Set Price Range&nbsp;
@@ -335,7 +335,7 @@ export const CreateOverlappingStrategy: FC<Props> = (props) => {
           setRangeError={setRangeError}
         />
       </article>
-      <article className="rounded-10 bg-background-900 flex w-full flex-col gap-10 p-20">
+      <article className="grid gap-10 p-16">
         <header className="mb-10 flex items-center gap-8 ">
           <h3 className="text-18 font-weight-500 flex-1">Set Fee Tier</h3>
           <Tooltip
@@ -352,17 +352,19 @@ export const CreateOverlappingStrategy: FC<Props> = (props) => {
           setSpread={setSpreadValue}
         />
       </article>
-      <article className="rounded-10 bg-background-900 flex w-full flex-col gap-16 p-20">
-        <header className="flex items-center justify-between">
-          <h2 className="text-18">Budget</h2>
+      <article className="grid gap-16 p-16">
+        <header className="flex items-start justify-between">
+          <hgroup>
+            <h2 className="text-18">Budget</h2>
+            <p className="text-14 text-white/80">
+              Please select a token to proceed.
+            </p>
+          </hgroup>
           <Tooltip
-            iconClassName="size-18 text-white/60"
+            iconClassName="size-14 text-white/60"
             element="Indicate the token, action and amount for the strategy. Note that in order to maintain the concentrated liquidity behavior, the 2nd budget indication will be calculated using the prices, fee tier and budget values you use."
           />
         </header>
-        <p className="text-14 text-white/80">
-          Please select a token to proceed.
-        </p>
         <OverlappingAnchor
           base={base}
           quote={quote}
@@ -373,7 +375,7 @@ export const CreateOverlappingStrategy: FC<Props> = (props) => {
         />
       </article>
       {anchor && (
-        <article className="rounded-10 bg-background-900 flex w-full flex-col gap-16 p-20">
+        <article className="grid gap-16 p-16">
           <hgroup>
             <h3 className="text-16 font-weight-500 flex items-center gap-6">
               <span className="flex h-16 w-16 items-center justify-center rounded-full bg-black text-[10px] text-white/60">
@@ -397,7 +399,7 @@ export const CreateOverlappingStrategy: FC<Props> = (props) => {
       {anchor && (
         <article
           id="overlapping-distribution"
-          className="rounded-10 bg-background-900 flex w-full flex-col gap-16 p-20"
+          className="grid gap-16 rounded-ee rounded-es p-20"
         >
           <hgroup>
             <h3 className="text-16 font-weight-500 flex items-center gap-8">

src/components/strategies/common/InputBudget.tsx

@@ -136,7 +136,7 @@ export const InputBudget: FC<Props> = (props) => {
             size={1}
             placeholder={placeholder}
             className={`
-              text-18 font-weight-500 grow text-ellipsis bg-transparent focus:outline-none
+              text-16 font-weight-500 grow text-ellipsis bg-transparent focus:outline-none
               ${error ? 'text-error' : ''}
               ${disabled ? 'text-white/40' : ''}
               ${disabled ? 'cursor-not-allowed' : ''}

src/components/strategies/common/InputLimit.tsx

@@ -115,7 +115,7 @@ export const InputLimit: FC<InputLimitProps> = (props) => {
             aria-label="Enter Price"
             placeholder="Enter Price"
             className={cn(
-              'text-18 font-weight-500 w-0 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
+              'text-16 font-weight-500 w-0 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
               displayError && 'text-error'
             )}
             data-testid="input-price"

src/components/strategies/common/InputRange.tsx

@@ -176,7 +176,7 @@ export const InputRange: FC<InputRangeProps> = ({
             value={localMin}
             placeholder="Enter Price"
             className={cn(
-              'text-18 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
+              'text-16 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
               hasMinError && 'text-error'
             )}
             onChange={(e) => onMinChange(e.target.value)}

src/components/strategies/common/TokenSelection.tsx

@@ -8,28 +8,8 @@ import { useModal } from 'hooks/useModal';
 import { ModalTokenListData } from 'libs/modals/modals/ModalTokenList';
 import { useTradeCtx } from 'components/trade/TradeContext';
 import { ReactComponent as WarningIcon } from 'assets/icons/warning.svg';
-import { Tooltip } from 'components/common/tooltip/Tooltip';
 import { SuspiciousToken } from 'components/common/DisplayPair';
 
-export const TokenSelectionTooltip = () => {
-  return (
-    <Tooltip
-      iconClassName="size-18 text-white/60"
-      element={
-        <p>
-          Selecting the tokens you would like to create a strategy for.
-          <br />
-          <b>Buy or Sell</b> token (also called <b>Base</b> token) is the token
-          you would like to buy or sell in the strategy.
-          <br />
-          <b>With</b> token (also called <b>Quote</b> token) is the token you
-          would denominate the rates in.
-        </p>
-      }
-    />
-  );
-};
-
 export const TokenSelection = () => {
   const { base, quote } = useTradeCtx();
   const navigate = useNavigate({ from: '/trade' });
@@ -93,11 +73,7 @@ export const TokenSelection = () => {
   };
 
   return (
-    <article className="bg-background-900 grid gap-20 rounded p-20">
-      <header className="flex items-center justify-between">
-        <h2 className="text-18">Token Pair</h2>
-        <TokenSelectionTooltip />
-      </header>
+    <article className="bg-background-900 grid gap-16 rounded-se rounded-ss p-16">
       <div
         role="menu"
         className="relative grid grid-cols-2 place-items-center gap-20"

src/components/strategies/common/order.module.css

@@ -0,0 +1,27 @@
+.order {
+  position: relative;
+}
+.order[data-direction="buy"] {
+  --direction-color: var(--buy);
+}
+.order[data-direction="sell"] {
+  --direction-color: var(--sell);
+}
+.order::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 16px;
+  bottom: 16px;
+  transform: scaleY(0.1);
+  opacity: 0.6;
+  width: 2px;
+  border-radius: 4px;
+  background-color: var(--direction-color);
+  transition: all 0.2s var(--ease-out);
+  transform-origin: 0 0;
+}
+.order:focus-within::after {
+  transform: scaleY(1);
+  opacity: 1;
+}

src/components/strategies/create/BuySellBlock/InputLimit.tsx

@@ -89,7 +89,7 @@ export const InputLimit: FC<InputLimitProps> = ({
             aria-label="Enter Price"
             placeholder="Enter Price"
             className={cn(
-              'text-18 font-weight-500 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
+              'text-16 font-weight-500 flex-1 text-ellipsis bg-transparent text-start focus:outline-none',
               error && 'text-error'
             )}
             data-testid="input-price"

src/components/strategies/create/BuySellBlock/InputRange.tsx

@@ -177,7 +177,7 @@ export const InputRange: FC<InputRangeProps> = ({
             value={max}
             placeholder="Enter Price"
             className={cn(
-              'text-18 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
+              'text-16 font-weight-500 mb-5 w-full text-ellipsis bg-transparent focus:outline-none',
               error && 'text-error'
             )}
             onChange={handleChangeMax}