fix: formatting

apps/trading/client-pages/rewards/rewards.tsx

@@ -3,7 +3,7 @@ import { RewardsContainer } from '../../components/rewards-container';
 
 export const Rewards = () => {
   return (
-    <div className="container p-4 mx-auto">
+    <div className="container mx-auto p-4">
       <h1 className="px-4 pb-4 text-2xl">{t('Rewards')}</h1>
       <RewardsContainer />
     </div>

apps/trading/components/card/card.tsx

@@ -18,7 +18,7 @@ export const Card = ({
   return (
     <div
       className={classNames(
-        'p-0.5 bg-vega-clight-800 dark:bg-vega-cdark-800 col-span-full lg:col-auto',
+        'bg-vega-clight-800 dark:bg-vega-cdark-800 col-span-full p-0.5 lg:col-auto',
         'rounded-lg',
         {
           'bg-rainbow': highlight,
@@ -26,7 +26,7 @@ export const Card = ({
         className
       )}
     >
-      <div className="p-4 rounded w-full h-full bg-vega-clight-800 dark:bg-vega-cdark-800">
+      <div className="bg-vega-clight-800 dark:bg-vega-cdark-800 h-full w-full rounded p-4">
         <h2 className="mb-3">{title}</h2>
         {loading ? <CardLoader /> : children}
       </div>
@@ -37,8 +37,8 @@ export const Card = ({
 export const CardLoader = () => {
   return (
     <div className="flex flex-col gap-2">
-      <div className="w-full h-5 bg-vega-clight-600 dark:bg-vega-cdark-600" />
-      <div className="w-3/4 h-6 bg-vega-clight-600 dark:bg-vega-cdark-600" />
+      <div className="bg-vega-clight-600 dark:bg-vega-cdark-600 h-5 w-full" />
+      <div className="bg-vega-clight-600 dark:bg-vega-cdark-600 h-6 w-3/4" />
     </div>
   );
 };
@@ -59,7 +59,7 @@ export const CardStat = ({
   const val = (
     <span
       className={classNames('inline-block text-3xl leading-none', {
-        'text-transparent bg-rainbow bg-clip-text': highlight,
+        'bg-rainbow bg-clip-text text-transparent': highlight,
         'cursor-help': description,
       })}
       data-testid={testId}
@@ -72,7 +72,7 @@ export const CardStat = ({
     <p className="leading-none">
       {description ? <Tooltip description={description}>{val}</Tooltip> : val}
       {text && (
-        <small className="block mt-0.5 text-xs text-muted">{text}</small>
+        <small className="text-muted mt-0.5 block text-xs">{text}</small>
       )}
     </p>
   );
@@ -80,7 +80,7 @@ export const CardStat = ({
 
 export const CardTable = (props: HTMLProps<HTMLTableElement>) => {
   return (
-    <table {...props} className="w-full mt-0.5 text-xs text-muted">
+    <table {...props} className="text-muted mt-0.5 w-full text-xs">
       <tbody>{props.children}</tbody>
     </table>
   );
@@ -90,7 +90,7 @@ export const CardTableTH = (props: HTMLProps<HTMLTableHeaderCellElement>) => {
   return (
     <th
       {...props}
-      className={classNames('font-normal text-left', props.className)}
+      className={classNames('text-left font-normal', props.className)}
     />
   );
 };

apps/trading/components/fees-container/fees-container.tsx

@@ -123,7 +123,7 @@ export const FeesContainer = () => {
                 windowLength={volumeDiscountWindowLength}
               />
             ) : (
-              <p className="pt-3 text-sm text-muted">
+              <p className="text-muted pt-3 text-sm">
                 {t('No volume discount program active')}
               </p>
             )}
@@ -142,7 +142,7 @@ export const FeesContainer = () => {
                 epochs={referralDiscountWindowLength}
               />
             ) : (
-              <p className="pt-3 text-sm text-muted">
+              <p className="text-muted pt-3 text-sm">
                 {t('No referral program active')}
               </p>
             )}
@@ -311,7 +311,7 @@ export const CurrentVolume = ({
     : 0;
 
   return (
-    <div className="flex flex-col pt-4 gap-3">
+    <div className="flex flex-col gap-3 pt-4">
       <CardStat
         value={formatNumberRounded(new BigNumber(windowLengthVolume))}
         text={t('Past %s epochs', windowLength.toString())}
@@ -336,7 +336,7 @@ const ReferralBenefits = ({
   epochs: number;
 }) => {
   return (
-    <div className="flex flex-col pt-4 gap-3">
+    <div className="flex flex-col gap-3 pt-4">
       <CardStat
         // all sets volume (not just current party)
         value={formatNumber(setRunningNotionalTakerVolume)}
@@ -433,7 +433,7 @@ const VolumeTiers = ({
 }) => {
   if (!tiers.length) {
     return (
-      <p className="text-sm text-muted">
+      <p className="text-muted text-sm">
         {t('No volume discount program active')}
       </p>
     );
@@ -494,7 +494,7 @@ const ReferralTiers = ({
 }) => {
   if (!tiers.length) {
     return (
-      <p className="text-sm text-muted">{t('No referral program active')}</p>
+      <p className="text-muted text-sm">{t('No referral program active')}</p>
     );
   }
 
@@ -550,20 +550,20 @@ const ReferralTiers = ({
 
 const YourTier = () => {
   return (
-    <span className="px-4 py-1.5 rounded-xl bg-rainbow whitespace-nowrap text-white">
+    <span className="bg-rainbow whitespace-nowrap rounded-xl px-4 py-1.5 text-white">
       {t('Your tier')}
     </span>
   );
 };
 
 const ReferrerInfo = ({ code }: { code?: string }) => (
-  <div className="pt-3 text-sm text-vega-clight-200 dark:vega-cdark-200">
+  <div className="text-vega-clight-200 dark:vega-cdark-200 pt-3 text-sm">
     <p className="mb-1">
       {t('Connected key is owner of the referral set')}
       {code && (
         <>
           {' '}
-          <span className="text-transparent bg-rainbow bg-clip-text">
+          <span className="bg-rainbow bg-clip-text text-transparent">
             {truncateMiddle(code)}
           </span>
         </>
@@ -574,7 +574,7 @@ const ReferrerInfo = ({ code }: { code?: string }) => (
     <p>
       {t('See')}{' '}
       <Link
-        className="underline text-black dark:text-white"
+        className="text-black underline dark:text-white"
         to={Links.REFERRALS()}
       >
         {t('Referrals')}

apps/trading/components/navbar/navbar.tsx

@@ -73,7 +73,7 @@ export const Navbar = ({
       </div>
 
       {/* Right section */}
-      <div className="flex items-center justify-end ml-auto gap-2">
+      <div className="ml-auto flex items-center justify-end gap-2">
         <ProtocolUpgradeCountdown />
         <NavbarMobileButton
           onClick={() => {
@@ -107,18 +107,18 @@ export const Navbar = ({
           onOpenChange={(open) => setMenu((x) => (open ? x : null))}
         >
           <D.Overlay
-            className="fixed inset-0 z-20 lg:hidden dark:bg-black/80 bg-black/50"
+            className="fixed inset-0 z-20 bg-black/50 dark:bg-black/80 lg:hidden"
             data-testid="navbar-menu-overlay"
           />
           <D.Content
             className={classNames(
               'lg:hidden',
-              'fixed top-0 right-0 z-20 w-3/4 h-screen border-l border-default bg-vega-clight-700 dark:bg-vega-cdark-700',
+              'border-default bg-vega-clight-700 dark:bg-vega-cdark-700 fixed right-0 top-0 z-20 h-screen w-3/4 border-l',
               navTextClasses
             )}
             data-testid="navbar-menu-content"
           >
-            <div className="flex items-center justify-end h-10 p-1">
+            <div className="flex h-10 items-center justify-end p-1">
               <NavbarMobileButton onClick={() => setMenu(null)}>
                 <span className="sr-only">{t('Close menu')}</span>
                 <VegaIcon name={VegaIconNames.CROSS} size={24} />
@@ -142,7 +142,7 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
   const marketId = useGlobalStore((store) => store.marketId);
 
   return (
-    <div className="lg:flex lg:h-full gap-3">
+    <div className="gap-3 lg:flex lg:h-full">
       <NavbarList>
         <NavbarItem>
           <NavbarTrigger data-testid="navbar-network-switcher-trigger">
@@ -246,8 +246,8 @@ const NavbarTrigger = ({
       onPointerMove={preventHover}
       onPointerLeave={preventHover}
       className={classNames(
-        'w-full lg:w-auto lg:h-full',
-        'flex items-center justify-between lg:justify-center gap-2 px-6 py-2 lg:p-0',
+        'w-full lg:h-full lg:w-auto',
+        'flex items-center justify-between gap-2 px-6 py-2 lg:justify-center lg:p-0',
         'text-lg lg:text-sm',
         'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100'
       )}
@@ -278,8 +278,8 @@ const NavbarLink = ({
         to={to}
         end={end}
         className={classNames(
-          'block lg:flex lg:h-full flex-col justify-center',
-          'px-6 py-2 lg:p-0 text-lg lg:text-sm',
+          'block flex-col justify-center lg:flex lg:h-full',
+          'px-6 py-2 text-lg lg:p-0 lg:text-sm',
           'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100'
         )}
         onClick={onClick}
@@ -302,7 +302,7 @@ const NavbarLink = ({
               </span>
               <span
                 className={classNames(
-                  'hidden lg:block absolute left-0 bottom-0 w-full h-0',
+                  'absolute bottom-0 left-0 hidden h-0 w-full lg:block',
                   borderClasses
                 )}
               />
@@ -323,7 +323,7 @@ const NavbarSubItem = (props: LiHTMLAttributes<HTMLElement>) => {
 };
 
 const NavbarList = (props: N.NavigationMenuListProps) => {
-  return <N.List {...props} className="lg:flex lg:h-full gap-6" />;
+  return <N.List {...props} className="gap-6 lg:flex lg:h-full" />;
 };
 
 /**
@@ -334,10 +334,10 @@ const NavbarContent = (props: N.NavigationMenuContentProps) => {
     <N.Content
       {...props}
       className={classNames(
-        'group navbar-content',
-        'lg:absolute lg:mt-2 pl-2 lg:pl-0 z-20 lg:min-w-[290px]',
+        'navbar-content group',
+        'z-20 pl-2 lg:absolute lg:mt-2 lg:min-w-[290px] lg:pl-0',
         'lg:bg-vega-clight-700 lg:dark:bg-vega-cdark-700',
-        'lg:border border-vega-clight-500 dark:border-vega-cdark-500 lg:rounded'
+        'border-vega-clight-500 dark:border-vega-cdark-500 lg:rounded lg:border'
       )}
       onPointerEnter={preventHover}
       onPointerLeave={preventHover}
@@ -362,8 +362,8 @@ const NavbarLinkExternal = ({
       <NavLink
         to={to}
         className={classNames(
-          'flex gap-2 lg:h-full items-center',
-          'px-6 py-2 lg:p-0 text-lg lg:text-sm',
+          'flex items-center gap-2 lg:h-full',
+          'px-6 py-2 text-lg lg:p-0 lg:text-sm',
           'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100'
         )}
         onClick={onClick}
@@ -391,7 +391,7 @@ const BurgerIcon = () => (
 const NavbarListDivider = () => {
   return (
     <div className="px-6 py-2 lg:px-0" role="separator">
-      <div className="w-full h-px lg:h-full lg:w-px bg-vega-clight-500 dark:bg-vega-cdark-500" />
+      <div className="bg-vega-clight-500 dark:bg-vega-cdark-500 h-px w-full lg:h-full lg:w-px" />
     </div>
   );
 };
@@ -404,7 +404,7 @@ const NavbarMobileButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
     <button
       {...props}
       className={classNames(
-        'w-8 h-8 lg:hidden flex items-center p-1 rounded ',
+        'flex h-8 w-8 items-center rounded p-1 lg:hidden ',
         'hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500',
         'hover:text-vega-clight-50 dark:hover:text-vega-cdark-50'
       )}