Merge pull request #1130 from bancorprotocol/issue-#774

Issue #774 - Update tailwind

.eslintrc.json

@@ -30,6 +30,10 @@
     "prettier/prettier": [
       "warn",
       { "endOfLine": "auto" }
+    ],
+    "react/jsx-curly-brace-presence": [
+      "warn",
+      { "props": "never", "children":"never" }
     ]
   },
   "overrides": [

README.md

@@ -152,7 +152,7 @@ and it is recommended to set VITE_LEGACY_TRADE_BY_SOURCE_RANGE to true in .env t
 
 ## 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
@@ -169,7 +169,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.
@@ -186,7 +186,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.3",
     "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/App.tsx

@@ -35,7 +35,7 @@ export const App = () => {
     <>
       <NotificationAlerts />
       <MainMenu />
-      <main className="mt-80 mb-16 flex w-full flex-grow flex-col">
+      <main className="mb-16 mt-80 flex w-full flex-grow flex-col">
         <MainContent />
       </main>
       <Footer />

src/components/activity/ActivityExport.tsx

@@ -70,10 +70,10 @@ export const ActivityExport: FC<Props> = ({ activities }) => {
   return (
     <a
       href={csvURI}
-      className="flex items-center gap-8 rounded-full border-2 border-background-800 px-12 py-8 text-12 hover:border-background-700 hover:bg-background-800"
+      className="border-background-800 text-12 hover:border-background-700 hover:bg-background-800 flex items-center gap-8 rounded-full border-2 px-12 py-8"
       download="activities.csv"
     >
-      <IconDownloadFile className="h-14 w-14 text-primary" />
+      <IconDownloadFile className="text-primary size-14" />
       <span>Export</span>
     </a>
   );

src/components/activity/ActivityFilter.tsx

@@ -91,7 +91,7 @@ export const ActivityFilter: FC<ActivityFilterProps> = (props) => {
           form={formId}
           name="ids"
           value={ids}
-          icon={<IconSearch className="w-14 text-primary" />}
+          icon={<IconSearch className="text-primary w-14" />}
           label={
             ids.length
               ? `${ids.length} Strategies Selected`
@@ -116,7 +116,7 @@ export const ActivityFilter: FC<ActivityFilterProps> = (props) => {
           form={formId}
           name="pairs"
           value={pairs}
-          icon={<IconPair className="w-14 text-primary" />}
+          icon={<IconPair className="text-primary w-14" />}
           label={
             pairs.length ? `${pairs.length} Pairs Selected` : 'Filter Pairs'
           }
@@ -133,7 +133,7 @@ export const ActivityFilter: FC<ActivityFilterProps> = (props) => {
         form={formId}
         name="actions"
         value={actions}
-        icon={<IconSearch className="w-14 text-primary" />}
+        icon={<IconSearch className="text-primary w-14" />}
         label={
           actions.length
             ? `${actions.length} Actions Selected`

src/components/activity/ActivityList.tsx

@@ -38,7 +38,7 @@ export const ActivityList: FC<ActivityListProps> = (props) => {
       </ul>
       {limit < size && (
         <>
-          <p className="mb-16 text-center text-12 text-white/60">
+          <p className="text-12 mb-16 text-center text-white/60">
             {limit} / {size}
           </p>
           <Button
@@ -69,10 +69,10 @@ const ActivityItem: FC<ActivityItemProps> = ({ activity, hideIds }) => {
     setSearchParams({ actions });
   };
   return (
-    <li className="flex flex-col gap-16 rounded border-2 border-background-800">
+    <li className="border-background-800 flex flex-col gap-16 rounded border-2">
       <header className="flex px-16 pt-16">
         {!hideIds && <ActivityId activity={activity} size={12} />}
-        <p className="flex flex-1 items-center justify-end gap-8 font-mono text-12 text-white/60">
+        <p className="text-12 flex flex-1 items-center justify-end gap-8 font-mono text-white/60">
           {activityDateFormatter.format(activity.date)}
           <TransactionLink txHash={activity.txHash} className="h-16" />
         </p>
@@ -83,17 +83,17 @@ const ActivityItem: FC<ActivityItemProps> = ({ activity, hideIds }) => {
             <ActivityIcon activity={activity} size={24} />
             {activityActionName[activity.action]}
           </h3>
-          <p className="font-mono text-12 text-white/60">
+          <p className="text-12 font-mono text-white/60">
             {activityDescription(activity)}
           </p>
         </button>
       </section>
       <hr className="border-background-800" />
       <table className="w-full table-fixed">
         <thead>
-          <tr className="font-mono text-12 text-white/60">
-            <th className="px-16 font-weight-400">Buy Budget</th>
-            <th className="px-16 font-weight-400">Sell Budget</th>
+          <tr className="text-12 font-mono text-white/60">
+            <th className="font-weight-400 px-16">Buy Budget</th>
+            <th className="font-weight-400 px-16">Sell Budget</th>
           </tr>
         </thead>
         <tbody>

src/components/activity/ActivityNotification.tsx

@@ -20,7 +20,7 @@ export const ActivityNotification: FC<Props> = ({ notification, close }) => {
   return (
     <article aria-labelledby={titleId} className="flex gap-16">
       <AnimatedActionIcon action={activity.action} />
-      <div className="flex flex-1 flex-col gap-8 overflow-hidden text-14">
+      <div className="text-14 flex flex-1 flex-col gap-8 overflow-hidden">
         <hgroup>
           <h3 className="text-16" id={titleId} data-testid="notif-title">
             {activityActionName[activity.action]}
@@ -32,7 +32,7 @@ export const ActivityNotification: FC<Props> = ({ notification, close }) => {
         <Link
           to="/strategy/$id"
           params={{ id: activity.strategy.id }}
-          className="flex items-center font-weight-500"
+          className="font-weight-500 flex items-center"
         >
           View Activity
         </Link>
@@ -43,10 +43,10 @@ export const ActivityNotification: FC<Props> = ({ notification, close }) => {
           data-testid="notif-close"
           aria-label="Remove notification"
         >
-          <IconClose className="h-14 w-14 text-white/80" />
+          <IconClose className="size-14 text-white/80" />
         </button>
 
-        <p className="whitespace-nowrap text-12 font-weight-500 text-white/60">
+        <p className="text-12 font-weight-500 whitespace-nowrap text-white/60">
           {unix(notification.timestamp).fromNow(true)}
         </p>
       </div>
@@ -59,7 +59,7 @@ export const AnimatedActionIcon = (props: { action: ActivityAction }) => {
   return (
     <div
       className={cn(
-        'relative grid h-38 w-38 place-items-center rounded-full',
+        'size-38 relative grid place-items-center rounded-full',
         style.icon,
         {
           'bg-buy/20 text-buy': props.action === 'buy',

src/components/activity/ActivitySection.tsx

@@ -11,7 +11,7 @@ export const ActivitySection: FC<ActivityFilterProps> = ({ filters = [] }) => {
   const { list: activities, all: allActivities } = useActivity();
   const { aboveBreakpoint } = useBreakpoints();
   return (
-    <section className="rounded bg-background-900">
+    <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>
         <ActivityFilter

src/components/activity/ActivityTable.tsx

@@ -49,7 +49,7 @@ export const ActivityTable: FC<ActivityListProps> = (props) => {
   return (
     <table className={cn('w-full border-collapse', style.table)}>
       <thead>
-        <tr className="border-y border-background-800 font-mono text-14 text-white/60">
+        <tr className="border-background-800 text-14 border-y font-mono text-white/60">
           {!hideIds && <th className={thStyle}>ID</th>}
           <th className={thStyle} colSpan={2}>
             Action
@@ -136,7 +136,7 @@ const ActivityRow: FC<ActivityRowProps> = ({ activity, hideIds, index }) => {
         </td>
       </tr>
       <tr
-        className="font-mono text-12 text-white/60"
+        className="text-12 font-mono text-white/60"
         style={{ animationDelay: `${index * 50}ms` }}
       >
         {/* ID */}
@@ -173,7 +173,7 @@ export const ActivityId: FC<ActivityIdProps> = ({ activity, size }) => {
     <Link
       to="/strategy/$id"
       params={{ id: id }}
-      className="inline-flex items-center gap-4 rounded-full bg-background-800 py-4 px-8"
+      className="bg-background-800 inline-flex items-center gap-4 rounded-full px-8 py-4"
     >
       <span className={`text-${size}`}>{getLowestBits(id)}</span>
       <TokensOverlap tokens={[base, quote]} size={size + 2} />
@@ -191,7 +191,7 @@ export const ActivityIcon: FC<ActivityIconProps> = (props) => {
   const classes = cn(
     'grid place-items-center rounded-full',
     iconColor(activity.action),
-    `h-${size} w-${size}`,
+    `size-${size}`,
     className
   );
   return (
@@ -248,12 +248,12 @@ const ActivityPaginator = () => {
   };
 
   return (
-    <tr className="border-t border-background-800 text-14 text-white/80">
+    <tr className="border-background-800 text-14 border-t text-white/80">
       <td className="px-24 py-16" colSpan={3}>
         <div className="flex items-center gap-8">
           <label>Show results</label>
           <select
-            className="rounded-full border-2 border-background-800 bg-background-900 px-12 py-8"
+            className="border-background-800 bg-background-900 rounded-full border-2 px-12 py-8"
             name="limit"
             onChange={changeLimit}
             value={limit}
@@ -285,7 +285,7 @@ const ActivityPaginator = () => {
             <IconChevronLeft className="h-12" />
           </button>
           <p
-            className="flex gap-8 rounded-full border-2 border-background-800 px-12 py-8"
+            className="border-background-800 flex gap-8 rounded-full border-2 px-12 py-8"
             aria-label="page position"
           >
             <span className="text-white">{currentPage}</span>
@@ -327,7 +327,7 @@ const iconColor = (action: ActivityAction) => {
 };
 
 const ActionIcon: FC<ActionIconProps> = ({ action, size }) => {
-  const className = `h-${size} w-${size}`;
+  const className = `size-${size}`;
   if (action === 'create') return <IconCheck className={className} />;
   if (action === 'transfer') return <IconTransfer className={className} />;
   if (action === 'edit') return <IconEdit className={className} />;

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/Footer/Footer.tsx

@@ -4,11 +4,11 @@ import { ReactComponent as LogoCarbonDeFi } from 'assets/logos/carbondefi.svg';
 
 export const Footer: FC = () => {
   return (
-    <footer className="mb-80 flex items-center border-t border-background-800 bg-black py-24 px-20 md:mb-0">
+    <footer className="border-background-800 mb-80 flex items-center border-t bg-black px-20 py-24 md:mb-0">
       <NewTabLink
         aria-label="Powered By CarbonDeFi"
         to={externalLinks.carbonHomepage}
-        className="flex items-center gap-8 whitespace-nowrap text-14 font-weight-500 text-white/60"
+        className="text-14 font-weight-500 flex items-center gap-8 whitespace-nowrap text-white/60"
       >
         Powered by
         <LogoCarbonDeFi className="w-[114px] text-white" />

src/components/common/NotFound.tsx

@@ -21,16 +21,16 @@ export const NotFound = ({
   return (
     <section
       className={cn(
-        'relative flex min-h-[500px] flex-col items-center justify-center gap-30 px-20 py-50 text-center',
-        bordered && 'rounded border-2 border-background-800'
+        'gap-30 py-50 relative flex min-h-[500px] flex-col items-center justify-center px-20 text-center',
+        bordered && 'border-background-800 rounded border-2'
       )}
     >
       {showBackButton && (
         <button
           onClick={() => history.back()}
-          className="absolute top-8 left-8 rounded-full p-16 hover:bg-white/20"
+          className="absolute left-8 top-8 rounded-full p-16 hover:bg-white/20"
         >
-          <ForwardArrow className="h-16 w-16 rotate-180" />
+          <ForwardArrow className="size-16 rotate-180" />
         </button>
       )}
       <div
@@ -40,14 +40,14 @@ export const NotFound = ({
         })}
       >
         <IconSearch
-          className={cn('h-32 w-32', {
+          className={cn('size-32', {
             'text-primary': variant === 'info',
             'text-error': variant === 'error',
           })}
         />
       </div>
       <h2 className="max-w-[440px] text-[32px] leading-[36px]">{title}</h2>
-      <p className="max-w-[440px] text-16 text-white/60">{text}</p>
+      <p className="text-16 max-w-[440px] text-white/60">{text}</p>
     </section>
   );
 };

src/components/common/PairLogoName.tsx

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

src/components/common/Toaster/Toaster.tsx

@@ -8,7 +8,7 @@ export const Toaster: FC = () => {
       {toaster.toasts.map((toast) => (
         <li
           key={toast.id}
-          className="my-5 animate-slideUp rounded-full border border-white/60 bg-background-800 py-8 px-16"
+          className="animate-slideUp bg-background-800 my-5 rounded-full border border-white/60 px-16 py-8"
         >
           <output>{toast.content}</output>
         </li>

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>
   );