Issue #774 - Update tailwind

README.md

@@ -147,7 +147,7 @@ VITE_CHAIN_RPC_URL=https://eth-mainnet.alchemyapi.io/v2/<API_KEY>
 
 ## Change Colors
 
-The theme is defined in the [`tailwind.config.js`](./tailwind.config.js#L36) file.
+The theme is defined in the [`tailwind.config.ts`](./tailwind.config.ts#L36) file.
 You can update these colors:
 
 - **background**: used for surfaces
@@ -164,7 +164,7 @@ To get the oklch value of an hex color you can use this webapp: https://oklch.co
 
 ### Background
 
-Background shades are calculated based on hue and chroma. In [`tailwind.config.js`](./tailwind.config.js#L38) you can specify `hue` and `chroma` of the background.
+Background shades are calculated based on hue and chroma. In [`tailwind.config.ts`](./tailwind.config.ts#L37) you can specify `hue` and `chroma` of the background.
 
 - `hue`: from 0 (pink) to 360 (pink).
 - `chroma`: It's recommended to use 0.01 or 0.02 depending on the hue.
@@ -181,7 +181,7 @@ All other colors are defined with l,c,h values (see https://oklch.com), and the
 }
 ```
 
-You can change the % of the `lighten` & `darken` function with the [`lightDark`](./tailwind.config.js#L18) function.
+You can change the % of the `lighten` & `darken` function with the [`lightDark`](./tailwind.config.ts#L20) function.
 
 # License
 

package.json

@@ -83,8 +83,8 @@
     "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
     "source-map-explorer": "^2.5.3",
-    "tailwind-merge": "^1.13.2",
-    "tailwindcss": "3.1.8",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss": "3.4.1",
     "typechain": "^8.1.0",
     "typescript": "^5.3.3",
     "ua-parser-js": "^1.0.35",
@@ -124,4 +124,4 @@
   "devDependencies": {
     "@types/d3": "^7.4.3"
   }
-}
+}

src/components/common/Checkbox/Checkbox.tsx

@@ -9,7 +9,7 @@ type Props = JSX.IntrinsicElements['button'] & {
 
 export const Checkbox: FC<Props> = ({ isChecked, setIsChecked, ...attr }) => {
   const classNames =
-    'h-18 w-18 rounded-4 border-2 flex items-center justify-center cursor-pointer';
+    'size-18 rounded-4 border-2 flex items-center justify-center cursor-pointer';
   const borderColor = isChecked
     ? 'border-primary bg-primary'
     : 'border-white/60';
@@ -21,7 +21,7 @@ export const Checkbox: FC<Props> = ({ isChecked, setIsChecked, ...attr }) => {
       className={cn(`${classNames} ${borderColor}`, attr.className)}
       onClick={() => setIsChecked(!isChecked)}
     >
-      {isChecked && <IconCheck className="h-10 w-10 text-background-900" />}
+      {isChecked && <IconCheck className="text-background-900 size-10" />}
     </button>
   );
 };

src/components/common/PairLogoName.tsx

@@ -15,8 +15,8 @@ export const PairLogoName: FC<Props> = ({
 }) => {
   return (
     <>
-      <TokensOverlap className="h-30 w-30" tokens={[baseToken, quoteToken]} />
-      <p className="flex items-center gap-4 font-weight-500">
+      <TokensOverlap className="size-30" tokens={[baseToken, quoteToken]} />
+      <p className="font-weight-500 flex items-center gap-4">
         {baseToken.symbol}
         {baseToken.isSuspicious && (
           <WarningWithTooltip tooltipContent={suspiciousTokenTooltipMsg} />

src/components/common/TokenInputField/Slippage.tsx

@@ -26,11 +26,11 @@ export const Slippage: FC<Props> = ({ slippage }) => {
       element={`The slippage is calculated based on the ${selectedFiatCurrency} value difference between the selected source and target tokens.`}
     >
       <span className={cn('flex flex-1 items-center gap-5', textColor)}>
-        {slippage?.eq(0) && <IconWarning className="h-12 w-12" />}
+        {slippage?.eq(0) && <IconWarning className="size-12" />}
         {slippage?.gt(0) && <>(+{slippageValue}%)</>}
         {slippage?.lt(0) && <>(-{slippageValue}%)</>}
         {slippage?.eq(0) && <>Notice: price & slippage are unknown</>}
-        {slippage.lt(-3) && <IconWarning className="h-12 w-12" />}
+        {slippage.lt(-3) && <IconWarning className="size-12" />}
       </span>
     </Tooltip>
   );

src/components/common/TokenInputField/TokenInputField.tsx

@@ -5,7 +5,12 @@ import { useWeb3 } from 'libs/web3';
 import { useFiatCurrency } from 'hooks/useFiatCurrency';
 import { LogoImager } from 'components/common/imager/Imager';
 import { Slippage } from './Slippage';
-import { prettifyNumber, formatNumber, sanitizeNumber } from 'utils/helpers';
+import {
+  prettifyNumber,
+  formatNumber,
+  sanitizeNumber,
+  cn,
+} from 'utils/helpers';
 import { decimalNumberValidationRegex } from 'utils/inputsValidations';
 
 type Props = {
@@ -73,12 +78,11 @@ export const TokenInputField: FC<Props> = ({
 
   return (
     <div
-      className={`
-        flex cursor-text flex-col gap-8 border border-black p-16
-        focus-within:border-white/50
-        ${isError ? '!border-error/50' : ''}
-        ${className}
-      `}
+      className={cn(
+        'flex cursor-text flex-col gap-8 border border-black p-16 focus-within:border-white/50',
+        isError ? '!border-error/50' : '',
+        className
+      )}
       onClick={() => inputRef.current?.focus()}
     >
       <div className="flex items-center justify-between">
@@ -95,20 +99,20 @@ export const TokenInputField: FC<Props> = ({
           onFocus={(e) => e.target.select()}
           onBlur={handleBlur}
           className={`
-            grow text-ellipsis bg-transparent text-18 font-weight-500 focus:outline-none
+            text-18 font-weight-500 grow text-ellipsis bg-transparent focus:outline-none
             ${isError ? 'text-error' : ''}
             ${disabled ? 'text-white/40' : ''}
             ${disabled ? 'cursor-not-allowed' : ''}
           `}
           disabled={disabled}
           data-testid={testid}
         />
-        <div className="flex items-center gap-6 rounded-[20px] bg-background-800 py-6 px-8">
-          <LogoImager alt="Token" src={token.logoURI} className="h-20 w-20" />
+        <div className="bg-background-800 flex items-center gap-6 rounded-[20px] px-8 py-6">
+          <LogoImager alt="Token" src={token.logoURI} className="size-20" />
           <span className="font-weight-500">{token.symbol}</span>
         </div>
       </div>
-      <div className="flex min-h-[16px] flex-wrap items-center justify-between gap-10 font-mono text-12 font-weight-500">
+      <div className="text-12 font-weight-500 flex min-h-[16px] flex-wrap items-center justify-between gap-10 font-mono">
         <p className="flex items-center gap-5 break-all text-white/60">
           {!slippage?.isZero() && showFiatValue && getFiatAsString(value)}
           {slippage && value && <Slippage slippage={slippage} />}

src/components/common/WarningMessageWithIcon.tsx

@@ -1,5 +1,6 @@
 import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
 import { FC, ReactNode } from 'react';
+import { cn } from 'utils/helpers';
 
 type WarningMessageWithIconProps = {
   htmlFor?: string;
@@ -19,9 +20,12 @@ export const WarningMessageWithIcon: FC<WarningMessageWithIconProps> = ({
       htmlFor={htmlFor}
       role="alert"
       aria-live="polite"
-      className={`flex items-center gap-10 font-mono text-12 text-warning ${className}`}
+      className={cn(
+        '!text-12 text-warning flex items-center gap-10 font-mono',
+        className
+      )}
     >
-      <IconWarning className="h-12 w-12" />
+      <IconWarning className="size-12" />
       <span className="flex-1">{children ?? message}</span>
     </output>
   );

src/components/common/WarningWithTooltip/WarningWithTooltip.tsx

@@ -1,5 +1,6 @@
 import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
+import { cn } from 'utils/helpers';
 
 type WarningWithTooltipProps = {
   tooltipContent: string;
@@ -13,7 +14,7 @@ export const WarningWithTooltip = ({
   return (
     <Tooltip interactive={false} element={tooltipContent}>
       <span>
-        <IconWarning className={`w-14 text-warning ${className}`} />
+        <IconWarning className={cn('w-14 text-warning', className)} />
       </span>
     </Tooltip>
   );

src/components/common/approval/ApproveToken.tsx

@@ -165,14 +165,10 @@ export const ApproveToken: FC<Props> = ({
 
   return (
     <>
-      <div className="bg-content flex h-85 items-center justify-between rounded px-20">
+      <div className="bg-content h-85 flex items-center justify-between rounded px-20">
         <div className={'space-y-6'}>
           <div className={'flex items-center space-x-10'}>
-            <LogoImager
-              alt={'Token'}
-              src={token.logoURI}
-              className="h-30 w-30"
-            />
+            <LogoImager alt={'Token'} src={token.logoURI} className="size-30" />
             <div className="font-weight-500">{token.symbol}</div>
           </div>
         </div>
@@ -181,11 +177,11 @@ export const ApproveToken: FC<Props> = ({
           txBusy ? (
             <div>Waiting for Confirmation</div>
           ) : (
-            <div className="flex h-82 flex-col items-end justify-center gap-10">
+            <div className="h-82 flex flex-col items-end justify-center gap-10">
               <div className="flex items-center space-x-8">
                 <div className="flex items-center space-x-10">
                   <div
-                    className={`font-mono text-12 font-weight-500 transition-all ${
+                    className={`text-12 font-weight-500 font-mono transition-all ${
                       isLimited ? 'text-white/60' : 'text-white/85'
                     }`}
                   >
@@ -204,7 +200,7 @@ export const ApproveToken: FC<Props> = ({
                 variant="white"
                 onClick={onApprove}
                 size="sm"
-                className="px-10 text-14"
+                className="text-14 px-10"
                 data-testid={`approve-${token.symbol}`}
               >
                 {data.nullApprovalRequired ? 'Revoke and Approve' : 'Approve'}
@@ -220,7 +216,7 @@ export const ApproveToken: FC<Props> = ({
         {error ? <pre>{JSON.stringify(error, null, 2)}</pre> : null}
       </div>
       {data.nullApprovalRequired && (
-        <div className="flex space-x-20 font-mono text-14 text-warning">
+        <div className="text-14 text-warning flex space-x-20 font-mono">
           <div>
             <IconWarning className="w-16" />
           </div>

src/components/common/buySellPriceRangeIndicator/BuySellPriceRangeIndicator.tsx

@@ -7,22 +7,22 @@ export const BuySellPriceRangeIndicator = ({ buy, limit }: Props) => {
   const background = buy ? 'bg-buy' : 'bg-sell';
   return (
     <div
-      className={`flex w-full justify-center rounded-b-6 bg-gradient-to-t ${
+      className={`rounded-b-6 flex w-full justify-center bg-gradient-to-t ${
         buy ? 'from-buy/10' : 'from-sell/10'
       }`}
     >
-      <div className={'flex items-end'}>
-        <div className={'flex flex-col items-center'}>
-          <div className={`h-4 w-4 rounded-full ${background}`} />
+      <div className="flex items-end">
+        <div className="flex flex-col items-center">
+          <div className={`size-4 rounded-full ${background}`} />
           <div className={`h-16 w-2 ${background}`} />
         </div>
         {!limit && (
           <>
             <div
-              className={`-mx-2 h-14 w-100 ${buy ? 'bg-buy/20' : 'bg-sell/20'}`}
+              className={`w-100 -mx-2 h-14 ${buy ? 'bg-buy/20' : 'bg-sell/20'}`}
             />
-            <div className={'flex flex-col items-center'}>
-              <div className={`h-4 w-4 rounded-full ${background}`} />
+            <div className="flex flex-col items-center">
+              <div className={`size-4 rounded-full ${background}`} />
               <div className={`h-16 w-2 ${background}`} />
             </div>
           </>

src/components/common/calendar/index.tsx

@@ -23,7 +23,7 @@ export const Calendar = ({
         caption_start: '[&>:first-child]:flex-row-reverse',
         caption_label: 'flex-1 text-center text-14',
         nav: 'gap-10 flex items-center',
-        nav_button: 'h-16 w-16 bg-transparent opacity-50 hover:opacity-100',
+        nav_button: 'size-16 bg-transparent opacity-50 hover:opacity-100',
         table: 'border-collapse',
         head_row: 'flex m-b-1',
         head_cell: 'text-white/20 rounded-8 w-36 text-12 font-weight-400',
@@ -32,31 +32,31 @@ export const Calendar = ({
         day: cn(
           'text-white/60 h-32 w-36 p-0 rounded-8 border-box',
           'focus-visible:border focus-visible:border-white/50 focus-visible:outline-none',
-          'hover:bg-background-900 hover:text-white'
+          'hover:!bg-background-900 hover:text-white'
         ),
         day_selected:
-          'focus-visible:bg-primary/80 font-weight-500 text-white bg-primary/20 rounded-0 [&:not(.outside)]:opacity-100',
+          'focus-visible:bg-primary/80 font-weight-500 !text-white bg-primary/20 !rounded-0 [&:not(.outside)]:opacity-100',
         day_range_start:
-          'rounded-l-8 [&:not(.outside)]:bg-primary [&:not(.outside)]:text-black',
+          '!rounded-l-8 [&:not(.outside)]:!bg-primary [&:not(.outside)]:!text-black',
         day_range_end:
-          'rounded-r-8 [&:not(.outside)]:bg-primary [&:not(.outside)]:text-black',
+          '!rounded-r-8 [&:not(.outside)]:!bg-primary [&:not(.outside)]:!text-black',
         day_today: 'border border-white/80',
         day_outside: 'outside opacity-20',
-        day_disabled: 'text-white/20 opacity-50',
+        day_disabled: '!text-white/20 !opacity-50',
         day_range_middle: 'aria-selected:bg-primary/20',
         day_hidden: 'invisible',
         ...classNames,
       }}
       components={{
         IconLeft: () => (
           <Chevron
-            className="h-16 w-16 rotate-90"
+            className="size-16 rotate-90"
             data-testid="date-picker-left-arrow"
           />
         ),
         IconRight: () => (
           <Chevron
-            className="h-16 w-16 -rotate-90"
+            className="size-16 -rotate-90"
             data-testid="date-picker-right-arrow"
           />
         ),

src/components/common/datePicker/DateRangePicker.tsx

@@ -96,7 +96,7 @@ const Content = (props: Props) => {
 
   return (
     <form
-      className="grid grid-cols-[200px_1fr] grid-rows-[1fr_auto] gap-x-30 gap-y-20 p-20"
+      className="gap-x-30 grid grid-cols-[200px_1fr] grid-rows-[1fr_auto] gap-y-20 p-20"
       onSubmit={onConfirm}
     >
       <div
@@ -109,7 +109,7 @@ const Content = (props: Props) => {
             type="button"
             role="radio"
             key={days}
-            className="box-border rounded-8 border-2 border-transparent bg-clip-padding py-8 px-30 text-start text-14 font-weight-500 hover:border-background-700 [&[aria-checked=true]]:bg-black"
+            className="rounded-8 px-30 text-14 font-weight-500 hover:border-background-700 box-border border-2 border-transparent bg-clip-padding py-8 text-start aria-checked:bg-black"
             onClick={() => handlePreset(days)}
             aria-checked={selectedPreset?.days === days}
             data-testid="date-picker-button"
@@ -159,12 +159,12 @@ export const DatePickerButton = memo(
 
     return (
       <>
-        <span className="flex h-24 w-24 items-center justify-center rounded-[12px] bg-white/10">
-          <CalendarIcon className="h-12 w-12" />
+        <span className="flex size-24 items-center justify-center rounded-[12px] bg-white/10">
+          <CalendarIcon className="size-12" />
         </span>
 
         <span
-          className="justify-self-end text-14 text-white/80"
+          className="text-14 justify-self-end text-white/80"
           data-testid="simulation-dates"
         >
           {hasDates ? (

src/components/common/dropdownMenu/index.tsx

@@ -100,7 +100,7 @@ export const DropdownMenu: FC<Props> = ({
               ref={refs.setFloating}
               className={cn(
                 // z-index is above header/footer
-                'z-50 min-w-[200px] rounded bg-background-800 shadow-lg backdrop-blur-2xl',
+                'bg-background-800 z-50 min-w-[200px] rounded shadow-lg backdrop-blur-2xl',
                 className
               )}
               style={{ ...floatingStyles, ...transition }}

src/components/common/forwardArrow.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { ReactComponent as IconArrowCut } from 'assets/icons/arrow-cut.svg';
 import { ReactComponent as IconArrowFull } from 'assets/icons/arrow.svg';
+import { cn } from 'utils/helpers';
 
 export type ForwardArrowProps = {
   arrowType?: 'full' | 'cut';
@@ -11,7 +12,7 @@ export const ForwardArrow: FC<ForwardArrowProps> = ({
   arrowType = 'cut',
   className = '',
 }) => {
-  const newClassName = `h-12 w-7 ${className}`;
+  const newClassName = cn('h-12 w-7', className);
 
   return arrowType === 'cut' ? (
     <IconArrowCut className={newClassName} />

src/components/common/iconTitleText/IconTitleText.tsx

@@ -31,13 +31,13 @@ export const IconTitleText: FC<IconTitleTextProps> = ({
   return (
     <div className="flex flex-col items-center">
       <div
-        className={`flex h-60 w-60 items-center justify-center rounded-full p-18 ${variantClass}`}
+        className={`p-18 flex size-60 items-center justify-center rounded-full ${variantClass}`}
       >
         {icon}
       </div>
       <h2 className="my-16 text-center">{title}</h2>
       {text && (
-        <p className="text-secondary text-center font-weight-400">{text}</p>
+        <p className="text-secondary font-weight-400 text-center">{text}</p>
       )}
     </div>
   );