update prettier pkgs, config, and reformat

.prettierrc

@@ -1,5 +0,0 @@
-{
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "all"
-}

components/Layout.tsx

@@ -114,7 +114,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
             onClick={handleToggleSidebar}
           >
             <ChevronRightIcon
-              className={`absolute bottom-2 -right-[2px] h-4 w-4 flex-shrink-0 ${
+              className={`absolute -right-[2px] bottom-2 h-4 w-4 flex-shrink-0 ${
                 !isCollapsed ? 'rotate-180' : 'rotate-360'
               }`}
             />
@@ -197,7 +197,7 @@ function DeployRefreshManager(): JSX.Element | null {
       leaveTo="opacity-0"
     >
       <button
-        className="fixed -bottom-[46px] left-1/2 z-50 flex -translate-x-1/2 items-center rounded-full border border-th-bkg-4 bg-th-bkg-3 py-3 px-4 shadow-md focus:outline-none md:hover:bg-th-bkg-4 md:hover:shadow-none"
+        className="fixed -bottom-[46px] left-1/2 z-50 flex -translate-x-1/2 items-center rounded-full border border-th-bkg-4 bg-th-bkg-3 px-4 py-3 shadow-md focus:outline-none md:hover:bg-th-bkg-4 md:hover:shadow-none"
         onClick={() => window.location.reload()}
       >
         <p className="mr-2 whitespace-nowrap text-th-fgd-1">

components/RpcPing.tsx

@@ -49,7 +49,7 @@ const RpcPing = () => {
           warning={rpcWarningThreshold}
         />
         <Tooltip content={t('rpc-ping')}>
-          <span className="font-mono text-th-fgd-2 text-xs">
+          <span className="font-mono text-xs text-th-fgd-2">
             <span className="mr-1">{formatNumericValue(rpcPing, 0)}</span>
             <span className="font-normal text-th-fgd-4">MS</span>
           </span>

components/SideNav.tsx

@@ -441,7 +441,7 @@ export const ExpandableMenuItem = ({
       >
         <div
           className={`rounded-md rounded-l-none bg-th-bkg-2 ${
-            alignBottom ? 'pt-4 pb-2' : 'py-2'
+            alignBottom ? 'pb-2 pt-4' : 'py-2'
           }`}
         >
           <div className="flex items-center justify-between pl-4 pr-2">

components/SolanaTps.tsx

@@ -45,7 +45,7 @@ const SolanaTps = () => {
         <div className="flex items-center">
           <div className="relative mr-1 h-3 w-3">
             <div
-              className={`absolute top-0.5 left-0.5 h-2 w-2 rounded-full ${
+              className={`absolute left-0.5 top-0.5 h-2 w-2 rounded-full ${
                 tps < tpsWarningThreshold
                   ? 'bg-th-warning'
                   : tps < tpsAlertThreshold

components/StatusBar.tsx

@@ -44,9 +44,9 @@ const StatusBar = ({ collapsed }: { collapsed: boolean }) => {
 
   return (
     <div
-      className={`hidden fixed ${
+      className={`fixed hidden ${
         collapsed ? 'w-[calc(100vw-64px)]' : 'w-[calc(100vw-200px)]'
-      } bottom-0 bg-th-input-bkg md:grid md:grid-cols-3 px-4 md:px-6 py-1 z-10`}
+      } bottom-0 z-10 bg-th-input-bkg px-4 py-1 md:grid md:grid-cols-3 md:px-6`}
     >
       <div className="col-span-1 flex items-center space-x-2">
         <Tps />
@@ -56,7 +56,7 @@ const StatusBar = ({ collapsed }: { collapsed: boolean }) => {
       <div className="col-span-1 flex items-center justify-center">
         <Tooltip content={t('program-version')}>
           <a
-            className="text-th-fgd-3 text-xs focus:outline-none md:hover:text-th-fgd-2"
+            className="text-xs text-th-fgd-3 focus:outline-none md:hover:text-th-fgd-2"
             href={`https://github.com/blockworks-foundation/mango-v4/releases`}
             rel="noreferrer noopener"
             target="_blank"
@@ -68,7 +68,7 @@ const StatusBar = ({ collapsed }: { collapsed: boolean }) => {
           <Tooltip content={t('latest-ui-commit')}>
             <span className="mx-1.5 text-th-fgd-4">|</span>
             <a
-              className="text-th-fgd-3 text-xs focus:outline-none md:hover:text-th-fgd-2"
+              className="text-xs text-th-fgd-3 focus:outline-none md:hover:text-th-fgd-2"
               href={latestCommit.url}
               rel="noreferrer noopener"
               target="_blank"
@@ -80,30 +80,30 @@ const StatusBar = ({ collapsed }: { collapsed: boolean }) => {
       </div>
       <div className="col-span-1 flex items-center justify-end space-x-4 text-xs">
         <a
-          className="text-th-fgd-3 focus:outline-none flex items-center md:hover:text-th-fgd-2"
+          className="flex items-center text-th-fgd-3 focus:outline-none md:hover:text-th-fgd-2"
           href="https://docs.mango.markets"
           rel="noreferrer noopener"
           target="_blank"
         >
-          <DocumentTextIcon className="h-3 w-3 mr-1" />
+          <DocumentTextIcon className="mr-1 h-3 w-3" />
           <span>{t('docs')}</span>
         </a>
         <a
-          className="text-th-fgd-3 focus:outline-none flex items-center md:hover:text-th-fgd-2"
+          className="flex items-center text-th-fgd-3 focus:outline-none md:hover:text-th-fgd-2"
           href="https://discord.gg/2uwjsBc5yw"
           rel="noreferrer noopener"
           target="_blank"
         >
-          <DiscordIcon className="h-3 w-3 mr-1" />
+          <DiscordIcon className="mr-1 h-3 w-3" />
           <span>{t('discord')}</span>
         </a>
         <a
-          className="text-th-fgd-3 focus:outline-none flex items-center md:hover:text-th-fgd-2"
+          className="flex items-center text-th-fgd-3 focus:outline-none md:hover:text-th-fgd-2"
           href="https://twitter.com/mangomarkets"
           rel="noreferrer noopener"
           target="_blank"
         >
-          <TwitterIcon className="h-3 w-3 mr-1" />
+          <TwitterIcon className="mr-1 h-3 w-3" />
           <span>{t('twitter')}</span>
         </a>
       </div>

components/TokenList.tsx

@@ -153,7 +153,7 @@ const TokenList = () => {
   return (
     <ContentBox hideBorder hidePadding>
       {mangoAccountAddress ? (
-        <div className="flex w-full items-center justify-end border-b border-th-bkg-3 py-3 px-6 lg:-mt-[36px] lg:mr-12 lg:mb-4 lg:w-auto lg:border-0 lg:py-0">
+        <div className="flex w-full items-center justify-end border-b border-th-bkg-3 px-6 py-3 lg:-mt-[36px] lg:mb-4 lg:mr-12 lg:w-auto lg:border-0 lg:py-0">
           <Switch
             checked={showZeroBalances}
             disabled={!mangoAccount}
@@ -433,7 +433,7 @@ const MobileTokenListItem = ({ data }: { data: TableData }) => {
             enterTo="opacity-100"
           >
             <Disclosure.Panel>
-              <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+              <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                 <div className="col-span-1">
                   <Tooltip content={t('tooltip-collateral-value')}>
                     <p className="tooltip-underline text-xs text-th-fgd-3">
@@ -619,7 +619,7 @@ const ActionsMenu = ({
                 leaveTo="opacity-0"
               >
                 <Popover.Panel
-                  className={`thin-scroll absolute bottom-12 left-0 z-20 max-h-60 w-32 space-y-2 overflow-auto rounded-md bg-th-bkg-2 p-4 pt-2 md:bottom-0 md:right-12 md:left-auto md:pt-4`}
+                  className={`thin-scroll absolute bottom-12 left-0 z-20 max-h-60 w-32 space-y-2 overflow-auto rounded-md bg-th-bkg-2 p-4 pt-2 md:bottom-0 md:left-auto md:right-12 md:pt-4`}
                 >
                   <div className="hidden items-center justify-center border-b border-th-bkg-3 pb-2 md:flex">
                     <div className="mr-2 flex flex-shrink-0 items-center">

components/TopBar.tsx

@@ -108,7 +108,7 @@ const TopBar = () => {
               <SolanaTps />
             </div>
           ) : null} */}
-          <div className="bg-th-bkg-1 flex items-center justify-center h-[63px] w-16 md:hidden">
+          <div className="flex h-[63px] w-16 items-center justify-center bg-th-bkg-1 md:hidden">
             <img
               className="h-9 w-9 flex-shrink-0"
               src={themeData.logoPath}
@@ -180,7 +180,7 @@ const TopBar = () => {
           ) : null}
         </span>
         {!isOnline ? (
-          <div className="absolute top-3 left-1/2 z-10 flex h-10 w-max -translate-x-1/2 items-center rounded-full bg-th-down py-2 px-4 md:top-8">
+          <div className="absolute left-1/2 top-3 z-10 flex h-10 w-max -translate-x-1/2 items-center rounded-full bg-th-down px-4 py-2 md:top-8">
             <ExclamationTriangleIcon className="h-5 w-5 flex-shrink-0 text-th-fgd-1" />
             <p className="ml-2 text-th-fgd-1">
               Your connection appears to be offline
@@ -191,7 +191,7 @@ const TopBar = () => {
           {isUnownedAccount || (!connected && isMobile) ? null : isMobile ? (
             <button
               onClick={() => handleDepositWithdrawModal('deposit')}
-              className="h-[63px] bg-th-bkg-1 border-l border-th-bkg-3 px-4 font-display text-center text-th-fgd-1"
+              className="h-[63px] border-l border-th-bkg-3 bg-th-bkg-1 px-4 text-center font-display text-th-fgd-1"
             >{`${t('deposit')} / ${t('withdraw')}`}</button>
           ) : (
             <Button

components/Tps.tsx

@@ -51,7 +51,7 @@ const Tps = () => {
             isLessThan
           />
           <Tooltip content={t('solana-tps-desc')}>
-            <span className="font-mono text-th-fgd-2 text-xs">
+            <span className="font-mono text-xs text-th-fgd-2">
               <span className="mr-1">{formatNumericValue(tps, 0)}</span>
               <span className="font-normal text-th-fgd-4">TPS</span>
             </span>
@@ -98,7 +98,7 @@ export const StatusDot = ({
   return (
     <div className="relative mr-1 h-3 w-3">
       <div
-        className={`absolute top-0.5 left-0.5 h-2 w-2 rounded-full ${dotColor}`}
+        className={`absolute left-0.5 top-0.5 h-2 w-2 rounded-full ${dotColor}`}
       />
       <div className={`absolute h-3 w-3 rounded-full opacity-40 ${dotColor}`} />
     </div>

components/account/AccountChart.tsx

@@ -60,7 +60,7 @@ const AccountChart = ({
         <div className="flex space-x-2">
           {CHART_TABS.map((tab) => (
             <button
-              className={`whitespace-nowrap rounded-md py-1.5 px-2.5 text-sm font-medium focus-visible:bg-th-bkg-3 focus-visible:text-th-fgd-1 ${
+              className={`whitespace-nowrap rounded-md px-2.5 py-1.5 text-sm font-medium focus-visible:bg-th-bkg-3 focus-visible:text-th-fgd-1 ${
                 chartName === tab
                   ? 'bg-th-bkg-3 text-th-active md:hover:text-th-active'
                   : 'text-th-fgd-3 md:hover:text-th-fgd-2'

components/account/AccountHeroStats.tsx

@@ -232,7 +232,7 @@ const AccountHeroStats = ({
                 </Tooltip>
               ) : null}
             </div>
-            <div className="mt-1 mb-0.5 flex items-center space-x-3">
+            <div className="mb-0.5 mt-1 flex items-center space-x-3">
               <p className="text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
                 {maintHealth}%
               </p>
@@ -263,7 +263,7 @@ const AccountHeroStats = ({
             >
               <p className="tooltip-underline">{t('free-collateral')}</p>
             </Tooltip>
-            <p className="mt-1 mb-0.5 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
+            <p className="mb-0.5 mt-1 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
               <FormatNumericValue
                 value={
                   group && mangoAccount
@@ -345,7 +345,7 @@ const AccountHeroStats = ({
                 </div>
               ) : null}
             </div>
-            <p className="mt-1 mb-0.5 text-left text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
+            <p className="mb-0.5 mt-1 text-left text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
               <FormatNumericValue
                 value={accountPnl}
                 decimals={2}
@@ -436,7 +436,7 @@ const AccountHeroStats = ({
                 </Tooltip>
               ) : null}
             </div>
-            <p className="mt-1 mb-0.5 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
+            <p className="mb-0.5 mt-1 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
               <FormatNumericValue
                 value={interestTotalValue}
                 decimals={2}
@@ -482,7 +482,7 @@ const AccountHeroStats = ({
               <div className="h-7 w-16 bg-th-bkg-2" />
             </SheenLoader>
           ) : (
-            <p className="mt-1 mb-0.5 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
+            <p className="mb-0.5 mt-1 text-2xl font-bold text-th-fgd-1 lg:text-xl xl:text-2xl">
               <FormatNumericValue
                 value={fundingTotalValue}
                 decimals={2}

components/account/AccountPage.tsx

@@ -105,7 +105,7 @@ const AccountPage = () => {
           <div className="hide-scroll flex justify-center space-x-2 md:justify-start">
             {TABS.map((tab) => (
               <button
-                className={`rounded-md py-1.5 px-2.5 text-sm font-medium focus-visible:bg-th-bkg-3 focus-visible:text-th-fgd-1 ${
+                className={`rounded-md px-2.5 py-1.5 text-sm font-medium focus-visible:bg-th-bkg-3 focus-visible:text-th-fgd-1 ${
                   activeTab === tab
                     ? 'bg-th-bkg-3 text-th-active md:hover:text-th-active'
                     : 'text-th-fgd-3 md:hover:text-th-fgd-2'
@@ -131,7 +131,7 @@ const AccountPage = () => {
             ) : null}
           </div>
         </div>
-        <div className="mt-6 mb-1 lg:mt-0">
+        <div className="mb-1 mt-6 lg:mt-0">
           <AccountActions />
         </div>
       </div>

components/account/AccountValue.tsx

@@ -117,7 +117,7 @@ const AccountValue = ({
             />
             <Transition
               appear={true}
-              className="absolute right-2 bottom-2"
+              className="absolute bottom-2 right-2"
               show={showExpandChart || isMobile}
               enter="transition ease-in duration-300"
               enterFrom="opacity-0 scale-75"

components/account/ActivityFilters.tsx

@@ -169,7 +169,7 @@ const ActivityFilters = () => {
       </div>
       {showFilters ? (
         <Disclosure.Panel
-          className="absolute top-[114px] left-0 z-10 w-full border-t border-th-bkg-3 bg-th-bkg-2 px-6 pb-6 shadow-md sm:top-14"
+          className="absolute left-0 top-[114px] z-10 w-full border-t border-th-bkg-3 bg-th-bkg-2 px-6 pb-6 shadow-md sm:top-14"
           static
         >
           <FiltersForm

components/account/MarketsHealthTable.tsx

@@ -207,7 +207,7 @@ const MarketsHealthTable = ({
                       enterTo="opacity-100"
                     >
                       <Disclosure.Panel>
-                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                           <div className="col-span-1">
                             <p className="text-xs text-th-fgd-3">
                               <Tooltip

components/account/TokensHealthTable.tsx

@@ -263,7 +263,7 @@ const TokensHealthTable = ({
                       enterTo="opacity-100"
                     >
                       <Disclosure.Panel>
-                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                           <div className="col-span-1">
                             <p className="text-xs text-th-fgd-3">
                               {t('trade:notional')}

components/borrow/AssetsBorrowsTable.tsx

@@ -157,7 +157,7 @@ const AssetsBorrowsTable = () => {
                       enterTo="opacity-100"
                     >
                       <Disclosure.Panel>
-                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                           <div className="col-span-1">
                             <p className="text-xs text-th-fgd-3">
                               {t('available')}

components/borrow/BorrowPage.tsx

@@ -92,7 +92,7 @@ const BorrowPage = () => {
     <>
       <div className="flex flex-col border-b border-th-bkg-3 px-4 py-4 md:px-6 lg:flex-row lg:items-center lg:justify-between">
         <div className="flex flex-col md:flex-row">
-          <div className="pb-4 md:pr-6 md:pb-0">
+          <div className="pb-4 md:pb-0 md:pr-6">
             <p className="mb-0.5 text-base">
               {t('borrow:current-borrow-value')}
             </p>
@@ -122,7 +122,7 @@ const BorrowPage = () => {
               )}
             </div>
           </div>
-          <div className="h-full border-t border-th-bkg-3 pt-4 md:border-t-0 md:border-b-0 md:border-l md:pt-0 md:pl-6">
+          <div className="h-full border-t border-th-bkg-3 pt-4 md:border-b-0 md:border-l md:border-t-0 md:pl-6 md:pt-0">
             <p className="mb-0.5 text-base">
               {t('borrow:available-to-borrow')}
             </p>
@@ -143,7 +143,7 @@ const BorrowPage = () => {
             </div>
           </div>
         </div>
-        <div className="mt-6 mb-1 lg:mt-0 lg:mb-0">
+        <div className="mb-1 mt-6 lg:mb-0 lg:mt-0">
           <div className="flex items-center space-x-2">
             <Button
               className="flex w-1/2 items-center justify-center md:w-auto"

components/borrow/YourBorrowsTable.tsx

@@ -204,7 +204,7 @@ const YourBorrowsTable = ({ banks }: { banks: BankWithBalance[] }) => {
                         enterTo="opacity-100"
                       >
                         <Disclosure.Panel>
-                          <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                          <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                             <div className="col-span-1">
                               <p className="text-xs text-th-fgd-3">
                                 {t('rate')}

components/governance/ListMarket/ListMarket.tsx

@@ -284,7 +284,7 @@ const ListMarket = ({ goBack }: { goBack: () => void }) => {
       ) : null}
       {currentView === VIEWS.BASE_TOKEN ? (
         <div className="mb-6">
-          <div className="rounded-lg border border-th-bkg-3 px-4 pt-6 pb-2">
+          <div className="rounded-lg border border-th-bkg-3 px-4 pb-2 pt-6">
             <h2 className="mb-3 px-2 text-base">
               {t('market-pair')}{' '}
               {baseToken && quoteToken
@@ -389,7 +389,7 @@ const ListMarket = ({ goBack }: { goBack: () => void }) => {
                     {t('market-name-desc')}
                   </p>
                 </div>
-                <ul className="ml-4 mb-4 list-outside list-decimal space-y-1">
+                <ul className="mb-4 ml-4 list-outside list-decimal space-y-1">
                   <li>{t('market-name-convention-1')}</li>
                   <li>{t('market-name-convention-2')}</li>
                   <li>{t('market-name-convention-3')}</li>

components/governance/ListToken/ListToken.tsx

@@ -995,7 +995,7 @@ const ListToken = ({ goBack }: { goBack: () => void }) => {
                   </li>
                 ) : null}
               </ol>
-              <div className="mt-6 flex flex-col space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4">
+              <div className="mt-6 flex flex-col space-y-3 sm:flex-row sm:space-x-4 sm:space-y-0">
                 <Button secondary onClick={cancel} size="large">
                   {t('cancel')}
                 </Button>

components/governance/Vote/ProposalCard.tsx

@@ -266,7 +266,7 @@ const ProposalCard = ({
         )}
       </div>
       {mangoMint && (
-        <div className="mt-6 flex w-full flex-col space-y-4 border-t border-th-bkg-3 pt-4 md:flex-row md:space-y-0 md:space-x-6">
+        <div className="mt-6 flex w-full flex-col space-y-4 border-t border-th-bkg-3 pt-4 md:flex-row md:space-x-6 md:space-y-0">
           <VoteResults communityMint={mangoMint} proposal={proposal.account} />
           <QuorumProgress
             proposal={proposal}

components/governance/Vote/Vote.tsx

@@ -62,7 +62,7 @@ const Vote = () => {
   return (
     <div>
       <div className="mb-4 flex flex-col items-center justify-between sm:flex-row">
-        <h1 className="mb-3 sm:mr-4 sm:mb-0">{t('active-proposals')}</h1>
+        <h1 className="mb-3 sm:mb-0 sm:mr-4">{t('active-proposals')}</h1>
         <VotingPower />
       </div>
       {loadingProposals || loadingRealm ? (

components/governance/Vote/VotePage.tsx

@@ -5,7 +5,7 @@ const Vote = dynamic(() => import('./Vote'))
 
 const VotePage = () => {
   return (
-    <div className="py-8 px-4 pb-20 sm:px-6 md:pb-16 lg:p-10">
+    <div className="px-4 py-8 pb-20 sm:px-6 md:pb-16 lg:p-10">
       <GovernancePageWrapper>
         <Vote />
       </GovernancePageWrapper>

components/modals/CreateOpenbookMarketModal.tsx

@@ -156,9 +156,8 @@ const CreateOpenbookMarketModal = ({
   useEffect(() => {
     const getMinLamportsToCreateMarket = async () => {
       const accountsSpace = 84522 + MARKET_STATE_LAYOUT_V2.span
-      const minLamports = await connection.getMinimumBalanceForRentExemption(
-        accountsSpace,
-      )
+      const minLamports =
+        await connection.getMinimumBalanceForRentExemption(accountsSpace)
       setSolNeededToCreateMarket(
         Math.round((minLamports / LAMPORTS_PER_SOL + Number.EPSILON) * 100) /
           100,

components/modals/DashboardSuggestedValuesModal.tsx

@@ -287,7 +287,7 @@ const DashboardSuggestedValues = ({
       <h3 className="mb-6">
         {bank.name} - Suggested tier: {suggestedTier}
       </h3>
-      <div className="flex flex-col max-h-[600px] w-full overflow-auto">
+      <div className="flex max-h-[600px] w-full flex-col overflow-auto">
         <Disclosure.Panel>
           <KeyValuePair
             label="Loan Fee Rate"

components/modals/MangoAccountSizeModal.tsx

@@ -323,7 +323,7 @@ const MangoAccountSizeModal = ({ isOpen, onClose }: ModalProps) => {
           />
         </div>
         <Button
-          className="w-full mb-4 mt-6 flex items-center justify-center"
+          className="mb-4 mt-6 flex w-full items-center justify-center"
           onClick={handleUpdateAccountSize}
           size="large"
         >
@@ -370,7 +370,7 @@ const AccountSizeFormInput = ({
       <div className="flex items-center justify-between">
         <div className="flex items-center">
           <Tooltip content={tooltipContent}>
-            <Label className="mr-1 tooltip-underline" text={label} />
+            <Label className="tooltip-underline mr-1" text={label} />
           </Tooltip>
         </div>
         {!disabled ? (
@@ -396,7 +396,7 @@ const AccountSizeFormInput = ({
           disabled={disabled}
         />
         <div
-          className={`flex items-center border border-l-0 border-th-input-border rounded-r-md h-10 px-2 ${
+          className={`flex h-10 items-center rounded-r-md border border-l-0 border-th-input-border px-2 ${
             disabled ? 'bg-th-bkg-2' : 'bg-th-input-bkg'
           }`}
         >

components/modals/SharePositionModal.tsx

@@ -146,7 +146,7 @@ const SharePositionModal = ({
                 </div>
               </div>
             </div>
-            <div className="absolute top-0 left-0">
+            <div className="absolute left-0 top-0">
               <img
                 src={roi >= 0 ? '/images/space.svg' : '/images/underwater.svg'}
                 alt="Share Background"

components/modals/UserSetupModal.tsx

@@ -228,7 +228,7 @@ const UserSetupModal = ({
         <ColorBlur
           width="66%"
           height="300px"
-          className="-top-20 -left-20 bg-th-button opacity-10 brightness-125"
+          className="-left-20 -top-20 bg-th-button opacity-10 brightness-125"
         />
         <ColorBlur
           width="50%"
@@ -236,11 +236,11 @@ const UserSetupModal = ({
           className="-bottom-20 -right-20 bg-th-bkg-1 opacity-30 mix-blend-multiply"
         />
         <img
-          className={`absolute top-6 left-6 h-10 w-10 flex-shrink-0`}
+          className={`absolute left-6 top-6 h-10 w-10 flex-shrink-0`}
           src="/logos/logo-mark.svg"
           alt="next"
         />
-        <div className="absolute top-0 left-0 z-10 flex h-1.5 w-full flex-grow bg-th-bkg-3">
+        <div className="absolute left-0 top-0 z-10 flex h-1.5 w-full flex-grow bg-th-bkg-3">
           <div
             style={{
               width: `${(showSetupStep / 3) * 100}%`,
@@ -300,7 +300,7 @@ const UserSetupModal = ({
                 <div className="space-y-2">
                   {walletsDisplayed?.map((w) => (
                     <button
-                      className={`col-span-1 w-full rounded-md border py-3 px-4 text-base font-normal focus:outline-none md:hover:cursor-pointer md:hover:border-th-fgd-4 ${
+                      className={`col-span-1 w-full rounded-md border px-4 py-3 text-base font-normal focus:outline-none md:hover:cursor-pointer md:hover:border-th-fgd-4 ${
                         w.adapter.name === wallet?.adapter.name
                           ? 'border-th-active text-th-fgd-1 md:hover:border-th-active'
                           : 'border-th-bkg-4 text-th-fgd-2'

components/nftMarket/NftMarketButton.tsx

@@ -11,7 +11,7 @@ const NftMarketButton = ({
 }) => {
   return (
     <button
-      className={`flex justify-center rounded-b rounded-t border border-th-${colorClass} py-1 px-2 text-th-${colorClass} font-bold focus:outline-none md:hover:brightness-75 ${className}`}
+      className={`flex justify-center rounded-b rounded-t border border-th-${colorClass} px-2 py-1 text-th-${colorClass} font-bold focus:outline-none md:hover:brightness-75 ${className}`}
       onClick={onClick}
     >
       {text}

components/notifications/NotificationsButton.tsx

@@ -36,7 +36,7 @@ const NotificationsButton = () => {
         <BellIcon className="h-5 w-5" />
         <span className="sr-only">Notifications</span>
         {notificationCount !== 0 ? (
-          <div className="absolute top-4 left-8">
+          <div className="absolute left-8 top-4">
             <span className="relative flex h-3.5 w-max items-center justify-center rounded-full bg-th-down px-1 text-xxs font-bold text-white">
               {formatNumericValue(notificationCount)}
             </span>

components/profile/EditProfileForm.tsx

@@ -141,7 +141,7 @@ const EditProfileForm = ({
       <div className="my-6 flex justify-center">
         <div className="relative ">
           <IconButton
-            className="absolute -top-2 -right-2 bg-th-button md:hover:bg-th-button-hover"
+            className="absolute -right-2 -top-2 bg-th-button md:hover:bg-th-button-hover"
             size="small"
             onClick={onEditProfileImage}
             disabled={!profile}

components/rewards/PromoBanner.tsx

@@ -9,7 +9,7 @@ const PromoBanner = () => {
   const { data: isWhiteListed } = useIsWhiteListed()
   return isWhiteListed && showBanner ? (
     <div className="relative">
-      <div className="flex flex-wrap items-center justify-center bg-th-bkg-2 py-3 px-10 border-b border-th-bkg-3">
+      <div className="flex flex-wrap items-center justify-center border-b border-th-bkg-3 bg-th-bkg-2 px-10 py-3">
         <p className="mr-2  text-center text-th-fgd-1 lg:text-base">
           Season 1 of Mango Mints is starting soon.
         </p>

components/rewards/RewardsPage.tsx

@@ -114,7 +114,7 @@ const RewardsPage = () => {
     <>
       <div className="bg-[url('/images/rewards/madlad-tile.png')]">
         <div className="mx-auto flex max-w-[1140px] flex-col items-center p-8 lg:flex-row lg:p-10">
-          <div className="mb-6 h-[180px] w-[180px] flex-shrink-0 lg:mr-10 lg:mb-0 lg:h-[220px] lg:w-[220px]">
+          <div className="mb-6 h-[180px] w-[180px] flex-shrink-0 lg:mb-0 lg:mr-10 lg:h-[220px] lg:w-[220px]">
             <Image
               className="rounded-lg shadow-lg"
               priority

components/settings/AccountSettings.tsx

@@ -45,12 +45,12 @@ const AccountSettings = () => {
             className="flex items-center"
             onClick={() => setShowAccountSizeModal(true)}
           >
-            <SquaresPlusIcon className="h-4 w-4 mr-1.5" />
+            <SquaresPlusIcon className="mr-1.5 h-4 w-4" />
             {t('settings:increase-account-size')}
           </LinkButton>
         ) : (
           <div className="flex items-center">
-            <ExclamationCircleIcon className="h-4 w-4 mr-1.5 text-th-error" />
+            <ExclamationCircleIcon className="mr-1.5 h-4 w-4 text-th-error" />
             <p className="text-th-error">
               {t('settings:error-account-size-full')}
             </p>
@@ -86,7 +86,7 @@ const AccountSettings = () => {
                 </div>
               </div>
             </Disclosure.Button>
-            <Disclosure.Panel className="md:px-4 pb-2">
+            <Disclosure.Panel className="pb-2 md:px-4">
               {usedTokens.length ? (
                 usedTokens.map((token, i) => {
                   const tokenBank = group.getFirstBankByTokenIndex(
@@ -94,7 +94,7 @@ const AccountSettings = () => {
                   )
                   return (
                     <div
-                      className="flex items-center mb-2"
+                      className="mb-2 flex items-center"
                       key={token.tokenIndex}
                     >
                       <p className="mr-3 text-th-fgd-4">{i + 1}.</p>
@@ -104,7 +104,7 @@ const AccountSettings = () => {
                   )
                 })
               ) : (
-                <p className="text-center mb-2">
+                <p className="mb-2 text-center">
                   {t('notifications:empty-state-title')}...
                 </p>
               )}
@@ -144,7 +144,7 @@ const AccountSettings = () => {
                 </div>
               </div>
             </Disclosure.Button>
-            <Disclosure.Panel className="md:px-4 pb-2">
+            <Disclosure.Panel className="pb-2 md:px-4">
               {usedSerum3.length ? (
                 usedSerum3.map((mkt, i) => {
                   const market = group.getSerum3MarketByMarketIndex(
@@ -152,7 +152,7 @@ const AccountSettings = () => {
                   )
                   return (
                     <div
-                      className="flex items-center mb-2"
+                      className="mb-2 flex items-center"
                       key={mkt.marketIndex}
                     >
                       <p className="mr-3 text-th-fgd-4">{i + 1}.</p>
@@ -162,7 +162,7 @@ const AccountSettings = () => {
                   )
                 })
               ) : (
-                <p className="text-center mb-2">
+                <p className="mb-2 text-center">
                   {t('notifications:empty-state-title')}...
                 </p>
               )}
@@ -201,7 +201,7 @@ const AccountSettings = () => {
                 </div>
               </div>
             </Disclosure.Button>
-            <Disclosure.Panel className="md:px-4 pb-2">
+            <Disclosure.Panel className="pb-2 md:px-4">
               {usedPerps.length ? (
                 usedPerps.map((perp, i) => {
                   const market = group.getPerpMarketByMarketIndex(
@@ -209,7 +209,7 @@ const AccountSettings = () => {
                   )
                   return (
                     <div
-                      className="flex items-center mb-2"
+                      className="mb-2 flex items-center"
                       key={perp.marketIndex}
                     >
                       <p className="mr-3 text-th-fgd-4">{i + 1}.</p>
@@ -219,7 +219,7 @@ const AccountSettings = () => {
                   )
                 })
               ) : (
-                <p className="text-center mb-2">
+                <p className="mb-2 text-center">
                   {t('notifications:empty-state-title')}...
                 </p>
               )}
@@ -258,7 +258,7 @@ const AccountSettings = () => {
                 </div>
               </div>
             </Disclosure.Button>
-            <Disclosure.Panel className="md:px-4 pb-2">
+            <Disclosure.Panel className="pb-2 md:px-4">
               {usedPerpOo.length ? (
                 usedPerpOo.map((perp, i) => {
                   const market = group.getPerpMarketByMarketIndex(
@@ -266,7 +266,7 @@ const AccountSettings = () => {
                   )
                   return (
                     <div
-                      className="flex items-center mb-2"
+                      className="mb-2 flex items-center"
                       key={perp.orderMarket}
                     >
                       <p className="mr-3 text-th-fgd-4">{i + 1}.</p>
@@ -276,7 +276,7 @@ const AccountSettings = () => {
                   )
                 })
               ) : (
-                <p className="text-center mb-2">
+                <p className="mb-2 text-center">
                   {t('notifications:empty-state-title')}...
                 </p>
               )}

components/settings/HotKeysSettings.tsx

@@ -452,7 +452,7 @@ const HotKeyModal = ({ isOpen, onClose }: ModalProps) => {
               </div>
             </div>
           ) : null}
-          <div className="mt-4 mr-3" id="trade-step-eight">
+          <div className="mr-3 mt-4" id="trade-step-eight">
             <Tooltip
               className="hidden md:block"
               delay={100}

components/shared/BalancesTable.tsx

@@ -276,7 +276,7 @@ const BalancesTable = () => {
                     enterTo="opacity-100"
                   >
                     <Disclosure.Panel>
-                      <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                      <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                         <div className="col-span-1">
                           <Tooltip
                             content={t('account:tooltip-collateral-value')}

components/shared/DirectionTriangles.tsx

@@ -2,8 +2,8 @@ export const UpTriangle = ({ size }: { size?: 'small' }) => (
   <div
     className={`h-0 w-0 ${
       size === 'small'
-        ? 'border-l-[4px] border-r-[4px] border-b-[6.92px]'
-        : 'border-l-[5px] border-r-[5px] border-b-[8.65px]'
+        ? 'border-b-[6.92px] border-l-[4px] border-r-[4px]'
+        : 'border-b-[8.65px] border-l-[5px] border-r-[5px]'
     } border-b-th-up border-l-transparent border-r-transparent`}
   />
 )

components/shared/PnlTooltipContent.tsx

@@ -29,7 +29,7 @@ const PnlTooltipContent = ({
             {formatCurrencyValue(unrealizedPnl, 2)}
           </span>
         </div>
-        <div className="border-b border-th-bkg-4 pb-3 flex justify-between">
+        <div className="flex justify-between border-b border-th-bkg-4 pb-3">
           <p className="mr-3">{t('trade:realized-pnl')}</p>
           <span className={`font-mono ${getPnlColor(realizedPnl)}`}>
             {formatCurrencyValue(realizedPnl, 2)}
@@ -41,7 +41,7 @@ const PnlTooltipContent = ({
             {formatCurrencyValue(totalPnl, 2)}
           </span>
         </div>
-        <div className="border-b border-th-bkg-4 pb-3 flex justify-between">
+        <div className="flex justify-between border-b border-th-bkg-4 pb-3">
           <p className="mr-3">{t('trade:return-on-equity')}</p>
           <span className={`font-mono ${getPnlColor(roe)}`}>
             <FormatNumericValue classNames="text-xs" value={roe} decimals={2} />

components/shared/SecondaryTabBar.tsx

@@ -15,7 +15,7 @@ const SecondaryTabBar = ({
       <div className="hide-scroll flex space-x-2 pl-4 md:pl-6">
         {tabs.map((tab) => (
           <button
-            className={`rounded-md py-1.5 px-2.5 text-sm font-medium focus-visible:bg-th-bkg-4 md:hover:bg-th-bkg-4 ${
+            className={`rounded-md px-2.5 py-1.5 text-sm font-medium focus-visible:bg-th-bkg-4 md:hover:bg-th-bkg-4 ${
               activeTab === tab
                 ? 'bg-th-bkg-4 text-th-active focus-visible:text-th-active'
                 : 'text-th-fgd-3 focus-visible:text-th-fgd-1'

components/shared/SoonBadge.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'next-i18next'
 const SoonBadge = () => {
   const { t } = useTranslation('common')
   return (
-    <div className="flex items-center rounded-full border border-th-active px-1.5 py-0.5 text-xxs uppercase text-th-active leading-none">
+    <div className="flex items-center rounded-full border border-th-active px-1.5 py-0.5 text-xxs uppercase leading-none text-th-active">
       {t('soon')}&trade;
     </div>
   )

components/shared/TabUnderline.tsx

@@ -70,7 +70,7 @@ const TabUnderline = <T extends Values>({
             <span className="relative">
               {names ? names[i] : t(`${value}`)}
               {value === 'trade:trigger-order' ? (
-                <span className="absolute -top-3 -right-5 py-0.5 px-1 rounded bg-th-active font-bold text-xxs leading-none uppercase text-th-bkg-1 ml-2">
+                <span className="absolute -right-5 -top-3 ml-2 rounded bg-th-active px-1 py-0.5 text-xxs font-bold uppercase leading-none text-th-bkg-1">
                   beta
                 </span>
               ) : null}

components/shared/TokenListButton.tsx

@@ -14,7 +14,7 @@ const TokenListButton = ({
   return (
     <button
       onClick={() => setShowList(true)}
-      className="flex h-full w-full items-center rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg py-2 px-3 text-th-fgd-2 focus-visible:bg-th-bkg-2 md:hover:cursor-pointer md:hover:bg-th-bkg-2 md:hover:text-th-fgd-1"
+      className="flex h-full w-full items-center rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg px-3 py-2 text-th-fgd-2 focus-visible:bg-th-bkg-2 md:hover:cursor-pointer md:hover:bg-th-bkg-2 md:hover:text-th-fgd-1"
     >
       <div className="mr-2.5 flex min-w-[24px] items-center">{logo}</div>
       <div className="flex w-full items-center justify-between">

components/stats/perps/MangoPerpStatsCharts.tsx

@@ -102,7 +102,7 @@ const MangoPerpStatsCharts = () => {
   return (
     <>
       {feeValues.length ? (
-        <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:pl-6">
+        <div className="col-span-2 border-b border-th-bkg-3 px-6 py-4 md:col-span-1 md:pl-6">
           <DetailedAreaOrBarChart
             data={feeValues}
             daysToShow={feesDaysToShow}
@@ -119,7 +119,7 @@ const MangoPerpStatsCharts = () => {
         </div>
       ) : null}
       {openInterestValues.length ? (
-        <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-r">
+        <div className="col-span-2 border-b border-th-bkg-3 px-6 py-4 md:col-span-1 md:border-r">
           <DetailedAreaOrBarChart
             data={openInterestValues}
             daysToShow={oiDaysToShow}
@@ -136,7 +136,7 @@ const MangoPerpStatsCharts = () => {
         </div>
       ) : null}
       {volumeValues.length ? (
-        <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:pl-6">
+        <div className="col-span-2 border-b border-th-bkg-3 px-6 py-4 md:col-span-1 md:pl-6">
           <DetailedAreaOrBarChart
             data={volumeValues}
             daysToShow={volumeDaysToShow}

components/stats/perps/PerpMarketDetailsTable.tsx

@@ -209,7 +209,7 @@ const PerpMarketDetailsTable = () => {
                       enterTo="opacity-100"
                     >
                       <Disclosure.Panel>
-                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                           <div className="col-span-1">
                             <p className="text-xs text-th-fgd-3">
                               {t('trade:min-order-size')}

components/stats/perps/PerpMarketsOverviewTable.tsx

@@ -358,7 +358,7 @@ const MobilePerpMarketItem = ({
             enterTo="opacity-100"
           >
             <Disclosure.Panel>
-              <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+              <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                 <div className="col-span-1">
                   <p className="text-xs text-th-fgd-3">{t('price')}</p>
                   <p className="font-mono text-th-fgd-2">

components/stats/perps/PerpMarketsPositions.tsx

@@ -8,11 +8,11 @@ const PerpMarketsPositions = () => {
   const { t } = useTranslation('stats')
   return (
     <>
-      <div className="px-6 pt-6 pb-2">
+      <div className="px-6 pb-2 pt-6">
         <h2 className="text-lg">{t('stats:largest-perp-positions')}</h2>
       </div>
       <LargestPerpPositions />
-      <div className="px-6 pt-8 pb-2">
+      <div className="px-6 pb-2 pt-8">
         <h2 className="text-lg">{t('stats:closest-to-liquidation')}</h2>
       </div>
       <ClosestToLiquidation />

components/stats/perps/PerpPositionsStatsTable.tsx

@@ -248,7 +248,7 @@ const PerpPositionsStatsTable = ({
                   enterTo="opacity-100"
                 >
                   <Disclosure.Panel>
-                    <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                    <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                       <div className="col-span-1">
                         <p className="text-xs text-th-fgd-3">
                           {t('trade:size')}

components/stats/spot/SpotMarketsTable.tsx

@@ -343,7 +343,7 @@ const MobileSpotMarketItem = ({
             enterTo="opacity-100"
           >
             <Disclosure.Panel>
-              <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+              <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                 <div className="col-span-1">
                   <p className="text-xs text-th-fgd-3">{t('price')}</p>
                   <p className="font-mono text-th-fgd-2">

components/stats/tokens/TokenDetailsTable.tsx

@@ -278,7 +278,7 @@ const TokenDetailsTable = () => {
                       enterTo="opacity-100"
                     >
                       <Disclosure.Panel>
-                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                           <div className="col-span-1">
                             <Tooltip
                               content={t('asset-liability-weight-desc')}

components/stats/tokens/TokenOverviewTable.tsx

@@ -331,7 +331,7 @@ const TokenOverviewTable = () => {
                       enterTo="opacity-100"
                     >
                       <Disclosure.Panel>
-                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                           <div className="col-span-1">
                             <p className="mb-0.5 text-xs">
                               {t('total-deposits')}

components/stats/tokens/TokenStatsCharts.tsx

@@ -38,7 +38,7 @@ const TokenStatsCharts = () => {
 
   return (
     <>
-      <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-r">
+      <div className="col-span-2 border-b border-th-bkg-3 px-6 py-4 md:col-span-1 md:border-r">
         <DetailedAreaOrBarChart
           data={mangoStats.concat([
             {
@@ -60,7 +60,7 @@ const TokenStatsCharts = () => {
           yKey={'depositValue'}
         />
       </div>
-      <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:pl-6">
+      <div className="col-span-2 border-b border-th-bkg-3 px-6 py-4 md:col-span-1 md:pl-6">
         <DetailedAreaOrBarChart
           data={mangoStats.concat([
             {
@@ -82,7 +82,7 @@ const TokenStatsCharts = () => {
           yKey={'borrowValue'}
         />
       </div>
-      <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-r md:pl-6">
+      <div className="col-span-2 border-b border-th-bkg-3 px-6 py-4 md:col-span-1 md:border-r md:pl-6">
         <DetailedAreaOrBarChart
           data={mangoStats.concat([
             {

components/swap/BuyTokenInput.tsx

@@ -89,7 +89,7 @@ const BuyTokenInput = ({
               onValueChange={handleAmountOutChange}
             />
             {!isNaN(Number(amountOutFormValue)) ? (
-              <span className="absolute right-3 bottom-1.5 text-xxs text-th-fgd-4">
+              <span className="absolute bottom-1.5 right-3 text-xxs text-th-fgd-4">
                 {outputBank
                   ? formatCurrencyValue(
                       outputBank.uiPrice * Number(amountOutFormValue),

components/swap/FavoriteSwapsBar.tsx

@@ -26,7 +26,7 @@ const FavoriteSwapsBar = () => {
 
   return (
     <Transition
-      className="hide-scroll flex items-center space-x-2 overflow-x-auto border-b border-th-bkg-3 bg-th-bkg-2 py-1 px-4 md:space-x-4 md:px-6"
+      className="hide-scroll flex items-center space-x-2 overflow-x-auto border-b border-th-bkg-3 bg-th-bkg-2 px-4 py-1 md:space-x-4 md:px-6"
       show={!!favoriteSwaps.length}
       enter="transition-all ease-in duration-200"
       enterFrom="opacity-0 h-0"

components/swap/LimitSwapForm.tsx

@@ -783,7 +783,7 @@ const LimitSwapForm = ({
                 onValueChange={handleTriggerPrice}
                 isAllowed={withValueLimit}
               />
-              <div className="absolute top-1/2 -translate-y-1/2 left-2">
+              <div className="absolute left-2 top-1/2 -translate-y-1/2">
                 <TokenLogo
                   bank={flipPrices ? inputBank : outputBank}
                   size={16}
@@ -793,7 +793,7 @@ const LimitSwapForm = ({
           </div>
           <div className="flex justify-end">
             <LinkButton
-              className="flex items-center font-normal text-xxs text-th-fgd-3"
+              className="flex items-center text-xxs font-normal text-th-fgd-3"
               onClick={() => toggleFlipPrices(!flipPrices)}
             >
               <span className="mr-1">{triggerPriceSuffix}</span>
@@ -870,7 +870,7 @@ const LimitSwapForm = ({
       {ipAllowed ? (
         <Button
           onClick={onClick}
-          className="mt-6 mb-4 flex w-full items-center justify-center text-base"
+          className="mb-4 mt-6 flex w-full items-center justify-center text-base"
           size="large"
         >
           {connected ? (
@@ -894,7 +894,7 @@ const LimitSwapForm = ({
       ) : (
         <Button
           disabled
-          className="mt-6 mb-4 w-full leading-tight"
+          className="mb-4 mt-6 w-full leading-tight"
           size="large"
         >
           {t('country-not-allowed', {

components/swap/MarketSwapForm.tsx

@@ -219,7 +219,7 @@ const MarketSwapForm = ({ setShowTokenSelect }: MarketSwapFormProps) => {
     <>
       <div>
         <Transition
-          className="absolute top-0 right-0 z-10 h-full w-full bg-th-bkg-1 pb-0"
+          className="absolute right-0 top-0 z-10 h-full w-full bg-th-bkg-1 pb-0"
           show={showConfirm}
           enter="transition ease-in duration-300"
           enterFrom="-translate-x-full"
@@ -291,7 +291,7 @@ const MarketSwapForm = ({ setShowTokenSelect }: MarketSwapFormProps) => {
       ) : (
         <Button
           disabled
-          className="mt-6 mb-4 w-full leading-tight"
+          className="mb-4 mt-6 w-full leading-tight"
           size="large"
         >
           {t('country-not-allowed', {
@@ -375,7 +375,7 @@ const SwapFormSubmitButton = ({
       {connected ? (
         <Button
           onClick={onClick}
-          className="mt-6 mb-4 flex w-full items-center justify-center text-base"
+          className="mb-4 mt-6 flex w-full items-center justify-center text-base"
           disabled={disabled}
           size="large"
         >
@@ -392,7 +392,7 @@ const SwapFormSubmitButton = ({
         </Button>
       ) : (
         <SecondaryConnectButton
-          className="mt-6 mb-4 flex w-full items-center justify-center"
+          className="mb-4 mt-6 flex w-full items-center justify-center"
           isLarge
         />
       )}

components/swap/SellTokenInput.tsx

@@ -87,7 +87,7 @@ const SellTokenInput = ({
           isAllowed={withValueLimit}
         />
         {!isNaN(Number(amountInFormValue)) ? (
-          <span className="absolute right-3 bottom-1.5 text-xxs text-th-fgd-4">
+          <span className="absolute bottom-1.5 right-3 text-xxs text-th-fgd-4">
             {inputBank
               ? formatCurrencyValue(
                   inputBank.uiPrice * Number(amountInFormValue),

components/swap/SlippageSettings.tsx

@@ -32,7 +32,7 @@ const SlippageSettings = ({ onClose }: { onClose: () => void }) => {
     <>
       <h3 className="mb-3">{t('swap:slippage')}</h3>
       <IconButton
-        className="absolute top-2 right-2 text-th-fgd-3"
+        className="absolute right-2 top-2 text-th-fgd-3"
         onClick={onClose}
         hideBg
       >

components/swap/SwapForm.tsx

@@ -132,7 +132,7 @@ const SwapForm = () => {
   return (
     <ContentBox
       hidePadding
-      className="relative overflow-hidden border-x-0 bg-th-bkg-1 md:border-l md:border-r-0 md:border-t-0 md:border-b-0"
+      className="relative overflow-hidden border-x-0 bg-th-bkg-1 md:border-b-0 md:border-l md:border-r-0 md:border-t-0"
     >
       <div>
         <EnterBottomExitBottom

components/swap/SwapFormTokenList.tsx

@@ -215,7 +215,7 @@ const SwapFormTokenList = ({
           : ''}
       </p>
       <IconButton
-        className="absolute top-2 right-2 text-th-fgd-3 hover:text-th-fgd-2"
+        className="absolute right-2 top-2 text-th-fgd-3 hover:text-th-fgd-2"
         onClick={onClose}
         hideBg
       >

components/swap/SwapHistoryTable.tsx

@@ -391,7 +391,7 @@ const SwapHistoryTable = () => {
                       enterTo="opacity-100"
                     >
                       <Disclosure.Panel>
-                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                        <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                           <div className="col-span-1">
                             <p className="text-xs text-th-fgd-3">
                               {t('value')}

components/swap/SwapOrders.tsx

@@ -290,7 +290,7 @@ const SwapOrders = () => {
                 <Td>
                   <p className="text-right">
                     {size}
-                    <span className="text-th-fgd-3 font-body">
+                    <span className="font-body text-th-fgd-3">
                       {' '}
                       {bank.name}
                     </span>
@@ -299,7 +299,7 @@ const SwapOrders = () => {
                 <Td>
                   <p className="text-right">
                     {filled}/{size}
-                    <span className="text-th-fgd-3 font-body">
+                    <span className="font-body text-th-fgd-3">
                       {' '}
                       {bank.name}
                     </span>
@@ -308,7 +308,7 @@ const SwapOrders = () => {
                 <Td>
                   <p className="text-right">
                     {currentPrice}
-                    <span className="text-th-fgd-3 font-body">
+                    <span className="font-body text-th-fgd-3">
                       {' '}
                       {buyBank.name}
                     </span>
@@ -317,7 +317,7 @@ const SwapOrders = () => {
                 <Td>
                   <p className="text-right">
                     {triggerPrice}
-                    <span className="text-th-fgd-3 font-body">
+                    <span className="font-body text-th-fgd-3">
                       {' '}
                       {side === 'buy' ? sellBank.name : buyBank.name}
                     </span>
@@ -377,15 +377,15 @@ const SwapOrders = () => {
                         <SideBadge side={side} />
                         <p className="font-mono text-th-fgd-2">
                           {size}
-                          <span className="text-th-fgd-3 font-body">
+                          <span className="font-body text-th-fgd-3">
                             {' '}
                             {bank.name}
                           </span>
-                          <span className="text-th-fgd-3 font-body">
+                          <span className="font-body text-th-fgd-3">
                             {' at '}
                           </span>
                           {triggerPrice}
-                          <span className="text-th-fgd-3 font-body">
+                          <span className="font-body text-th-fgd-3">
                             {' '}
                             {side === 'buy' ? sellBank.name : buyBank.name}
                           </span>
@@ -404,14 +404,14 @@ const SwapOrders = () => {
                     enterTo="opacity-100"
                   >
                     <Disclosure.Panel>
-                      <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                      <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                         <div className="col-span-1">
                           <p className="text-xs text-th-fgd-3">
                             {t('trade:size')}
                           </p>
                           <p className="font-mono text-th-fgd-1">
                             {size}
-                            <span className="text-th-fgd-3 font-body">
+                            <span className="font-body text-th-fgd-3">
                               {' '}
                               {bank.name}
                             </span>
@@ -423,7 +423,7 @@ const SwapOrders = () => {
                           </p>
                           <p className="font-mono text-th-fgd-1">
                             {filled}/{size}
-                            <span className="text-th-fgd-3 font-body">
+                            <span className="font-body text-th-fgd-3">
                               {' '}
                               {bank.name}
                             </span>
@@ -435,7 +435,7 @@ const SwapOrders = () => {
                           </p>
                           <p className="font-mono text-th-fgd-1">
                             {currentPrice}
-                            <span className="text-th-fgd-3 font-body">
+                            <span className="font-body text-th-fgd-3">
                               {' '}
                               {buyBank.name}
                             </span>
@@ -447,7 +447,7 @@ const SwapOrders = () => {
                           </p>
                           <p className="font-mono text-th-fgd-1">
                             {triggerPrice}
-                            <span className="text-th-fgd-3 font-body">
+                            <span className="font-body text-th-fgd-3">
                               {' '}
                               {side === 'buy' ? sellBank.name : buyBank.name}
                             </span>

components/swap/SwapReviewRouteInfo.tsx

@@ -374,7 +374,7 @@ const SwapReviewRouteInfo = ({
     <div className="thin-scroll flex h-full flex-col justify-between overflow-y-auto">
       <div>
         <IconButton
-          className="absolute top-4 left-4 mr-3 text-th-fgd-2"
+          className="absolute left-4 top-4 mr-3 text-th-fgd-2"
           onClick={onClose}
           size="small"
           ref={focusRef}

components/swap/SwapSettings.tsx

@@ -47,7 +47,7 @@ const SwapSettings = ({ onClose }: { onClose: () => void }) => {
     <>
       <h3 className="mb-3">{t('settings')}</h3>
       <IconButton
-        className="absolute top-2 right-2"
+        className="absolute right-2 top-2"
         onClick={onClose}
         hideBg
         ref={focusRef}

components/swap/SwapTokenChart.tsx

@@ -465,7 +465,7 @@ const SwapTokenChart = () => {
       ) : chartData?.length && baseTokenId && quoteTokenId ? (
         <div className="relative h-full">
           {swapTooltipData ? (
-            <div className="absolute left-1/2 bottom-2 z-10 w-full -translate-x-1/2 rounded-md border border-th-bkg-3 bg-th-bkg-1 px-4 py-2">
+            <div className="absolute bottom-2 left-1/2 z-10 w-full -translate-x-1/2 rounded-md border border-th-bkg-3 bg-th-bkg-1 px-4 py-2">
               {renderTooltipContent(swapTooltipData)}
             </div>
           ) : null}
@@ -543,7 +543,7 @@ const SwapTokenChart = () => {
             </div>
           </div>
           <div className="mt-2 h-40 w-auto md:h-96">
-            <div className="absolute top-[2px] right-0 -mb-2 flex items-center justify-end space-x-4">
+            <div className="absolute right-0 top-[2px] -mb-2 flex items-center justify-end space-x-4">
               <FavoriteSwapButton
                 inputToken={inputBank!.name}
                 outputToken={outputBank!.name}

components/swap/TokenSelect.tsx

@@ -19,7 +19,7 @@ const TokenSelect = ({ bank, showTokenList, type }: TokenSelectProps) => {
   return (
     <button
       onClick={() => showTokenList(type)}
-      className="flex h-[56px] w-full items-center rounded-lg rounded-r-none bg-th-input-bkg py-2 px-3 text-th-fgd-2 focus-visible:bg-th-bkg-3 md:hover:cursor-pointer md:hover:bg-th-bkg-1 md:hover:text-th-fgd-1"
+      className="flex h-[56px] w-full items-center rounded-lg rounded-r-none bg-th-input-bkg px-3 py-2 text-th-fgd-2 focus-visible:bg-th-bkg-3 md:hover:cursor-pointer md:hover:bg-th-bkg-1 md:hover:text-th-fgd-1"
     >
       <div className="mr-2.5 flex min-w-[24px] items-center">
         <TokenLogo bank={bank} />

components/token/ChartTabs.tsx

@@ -35,7 +35,7 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2">
-      <div className="col-span-1 border-b border-th-bkg-3 md:border-r md:border-b-0">
+      <div className="col-span-1 border-b border-th-bkg-3 md:border-b-0 md:border-r">
         <div className="w-full">
           <TabButtons
             activeValue={activeDepositsTab}
@@ -46,7 +46,7 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
               ['token:deposit-rates', 0],
             ]}
           />
-          <div className="h-[412px] sm:h-96 border-t border-th-bkg-3 px-6 py-6">
+          <div className="h-[412px] border-t border-th-bkg-3 px-6 py-6 sm:h-96">
             {activeDepositsTab === 'token:deposits' ? (
               <DetailedAreaOrBarChart
                 data={statsHistory}
@@ -86,7 +86,7 @@ const ChartTabs = ({ bank }: { bank: Bank }) => {
               ['token:borrow-rates', 0],
             ]}
           />
-          <div className="h-[412px] sm:h-96 border-t border-th-bkg-3 px-6 py-6">
+          <div className="h-[412px] border-t border-th-bkg-3 px-6 py-6 sm:h-96">
             {activeBorrowsTab === 'token:borrows' ? (
               <DetailedAreaOrBarChart
                 data={statsHistory}

components/token/CoingeckoStats.tsx

@@ -113,7 +113,7 @@ const CoingeckoStats = ({
   return (
     <>
       {description ? (
-        <div className="border-b border-th-bkg-3 py-4 px-6">
+        <div className="border-b border-th-bkg-3 px-6 py-4">
           <h2 className="mb-1 text-xl">About {bank.name}</h2>
           <div className="flex items-end">
             <p className="max-w-[720px]">{parse(description)}</p>

components/token/TokenPage.tsx

@@ -146,7 +146,7 @@ const TokenPage = () => {
                 )}
               </div>
               <div className="flex flex-wrap items-end font-display text-5xl text-th-fgd-1">
-                <div className="mr-3 mb-2">
+                <div className="mb-2 mr-3">
                   {animationSettings['number-scroll'] ? (
                     <FlipNumbers
                       height={48}

components/token/TopTokenAccounts.tsx

@@ -117,7 +117,7 @@ const TopTokenAccounts = ({ bank }: { bank: Bank }) => {
             ))}
           </div>
         ) : (
-          <div className="flex flex-col items-center justify-center rounded-md border border-th-bkg-3 py-8 px-3 md:px-4">
+          <div className="flex flex-col items-center justify-center rounded-md border border-th-bkg-3 px-3 py-8 md:px-4">
             <NoSymbolIcon className="h-6 w-6 text-th-fgd-4" />
             <p>{t('no-depositors')}</p>
           </div>
@@ -140,7 +140,7 @@ const TopTokenAccounts = ({ bank }: { bank: Bank }) => {
             ))}
           </div>
         ) : (
-          <div className="flex flex-col items-center justify-center rounded-md border border-th-bkg-3 py-8 px-3 md:px-4">
+          <div className="flex flex-col items-center justify-center rounded-md border border-th-bkg-3 px-3 py-8 md:px-4">
             <NoSymbolIcon className="h-6 w-6 text-th-fgd-4" />
             <p>{t('no-borrowers')}</p>
           </div>

components/trade/AdvancedMarketHeader.tsx

@@ -61,7 +61,7 @@ const AdvancedMarketHeader = ({
         <div className="w-full pl-4 md:w-auto md:py-0 md:pl-6 lg:pb-0">
           <MarketSelectDropdown />
         </div>
-        <div className="hide-scroll flex w-full items-center justify-between overflow-x-auto border-t border-th-bkg-3 py-2 px-5 md:border-t-0 md:py-0 md:px-0 md:pr-6">
+        <div className="hide-scroll flex w-full items-center justify-between overflow-x-auto border-t border-th-bkg-3 px-5 py-2 md:border-t-0 md:px-0 md:py-0 md:pr-6">
           <div className="flex items-center">
             <>
               <OraclePrice />

components/trade/AdvancedTradeForm.tsx

@@ -742,7 +742,7 @@ const AdvancedTradeForm = () => {
                 </div>
               )}
             </div>
-            <div className="mt-6 mb-4 flex px-3 md:px-4">
+            <div className="mb-4 mt-6 flex px-3 md:px-4">
               {ipAllowed ? (
                 connected ? (
                   <Button

components/trade/DepthChart.tsx

@@ -302,7 +302,7 @@ const DepthChart = () => {
 
   return chartData.length ? (
     <>
-      <div className="flex h-10 items-center border-b border-th-bkg-3 py-1 px-2">
+      <div className="flex h-10 items-center border-b border-th-bkg-3 px-2 py-1">
         <div className="flex w-full items-center">
           <span className="w-16 font-mono text-xs text-th-fgd-3">
             {priceRangePercent}%

components/trade/FavoriteMarketsBar.tsx

@@ -18,7 +18,7 @@ const FavoriteMarketsBar = () => {
 
   return (
     <Transition
-      className="hide-scroll flex items-center space-x-2 overflow-x-auto border-b border-th-bkg-3 bg-th-bkg-2 py-1 px-4 md:space-x-4 md:px-6"
+      className="hide-scroll flex items-center space-x-2 overflow-x-auto border-b border-th-bkg-3 bg-th-bkg-2 px-4 py-1 md:space-x-4 md:px-6"
       show={!!favoriteMarkets.length}
       enter="transition-all ease-in duration-200"
       enterFrom="opacity-0 h-0"

components/trade/MarketSelectDropdown.tsx

@@ -162,10 +162,10 @@ const MarketSelectDropdown = () => {
             <ChevronDownIcon
               className={`${
                 open ? 'rotate-180' : 'rotate-360'
-              } mt-0.5 ml-2 h-6 w-6 flex-shrink-0 text-th-fgd-2`}
+              } ml-2 mt-0.5 h-6 w-6 flex-shrink-0 text-th-fgd-2`}
             />
           </Popover.Button>
-          <Popover.Panel className="absolute top-12 z-40 w-screen border-y md:border-r border-th-bkg-3 bg-th-bkg-2 -left-4 md:w-[560px]">
+          <Popover.Panel className="absolute -left-4 top-12 z-40 w-screen border-y border-th-bkg-3 bg-th-bkg-2 md:w-[560px] md:border-r">
             <div className="border-b border-th-bkg-3">
               <TabButtons
                 activeValue={spotOrPerp}
@@ -177,16 +177,16 @@ const MarketSelectDropdown = () => {
                 fillWidth
               />
             </div>
-            <div className="py-3 max-h-[calc(100vh-160px)] thin-scroll overflow-auto">
+            <div className="thin-scroll max-h-[calc(100vh-160px)] overflow-auto py-3">
               {spotOrPerp === 'perp' && perpMarketsToShow.length ? (
                 <>
-                  <div className="grid grid-cols-3 md:grid-cols-4 pl-4 pr-14 text-xxs border-b border-th-bkg-3 pb-1 mb-2">
+                  <div className="mb-2 grid grid-cols-3 border-b border-th-bkg-3 pb-1 pl-4 pr-14 text-xxs md:grid-cols-4">
                     <p className="col-span-1">{t('market')}</p>
                     <p className="col-span-1 text-right">{t('price')}</p>
                     <p className="col-span-1 text-right">
                       {t('rolling-change')}
                     </p>
-                    <p className="col-span-1 text-right hidden md:block">
+                    <p className="col-span-1 hidden text-right md:block">
                       {t('daily-volume')}
                     </p>
                   </div>
@@ -198,7 +198,7 @@ const MarketSelectDropdown = () => {
                     const volume = volumeData ? volumeData : 0
 
                     return (
-                      <div className="flex items-center w-full" key={m.name}>
+                      <div className="flex w-full items-center" key={m.name}>
                         {!isComingSoon ? (
                           <>
                             <Link
@@ -215,7 +215,7 @@ const MarketSelectDropdown = () => {
                             >
                               <div className="col-span-1 flex items-center">
                                 <MarketLogos market={m} size="small" />
-                                <span className="text-th-fgd-2 text-xs">
+                                <span className="text-xs text-th-fgd-2">
                                   {m.name}
                                 </span>
                               </div>
@@ -230,7 +230,7 @@ const MarketSelectDropdown = () => {
                               <div className="col-span-1 flex justify-end">
                                 <MarketChange market={m} size="small" />
                               </div>
-                              <div className="col-span-1 md:flex justify-end hidden">
+                              <div className="col-span-1 hidden justify-end md:flex">
                                 {loadingMarketData ? (
                                   <SheenLoader className="mt-0.5">
                                     <div className="h-3.5 w-12 bg-th-bkg-2" />
@@ -270,10 +270,10 @@ const MarketSelectDropdown = () => {
               ) : null}
               {spotOrPerp === 'spot' && serumMarketsToShow.length ? (
                 <>
-                  <div className="flex items-center justify-between mb-3 px-4">
+                  <div className="mb-3 flex items-center justify-between px-4">
                     <div className="relative w-1/2">
                       <Input
-                        className="pl-8 h-8"
+                        className="h-8 pl-8"
                         type="text"
                         value={search}
                         onChange={handleUpdateSearch}
@@ -284,7 +284,7 @@ const MarketSelectDropdown = () => {
                     <div>
                       {spotBaseTokens.map((tab) => (
                         <button
-                          className={`rounded-md py-1.5 px-2.5 text-sm font-medium focus-visible:bg-th-bkg-3 focus-visible:text-th-fgd-1 ${
+                          className={`rounded-md px-2.5 py-1.5 text-sm font-medium focus-visible:bg-th-bkg-3 focus-visible:text-th-fgd-1 ${
                             spotBaseFilter === tab
                               ? 'bg-th-bkg-3 text-th-active md:hover:text-th-active'
                               : 'text-th-fgd-3 md:hover:text-th-fgd-2'
@@ -315,13 +315,13 @@ const MarketSelectDropdown = () => {
                       </Select>
                     </div> */}
                   </div>
-                  <div className="grid grid-cols-3 md:grid-cols-4 pl-4 pr-14 text-xxs border-b border-th-bkg-3 pb-1 mb-2">
+                  <div className="mb-2 grid grid-cols-3 border-b border-th-bkg-3 pb-1 pl-4 pr-14 text-xxs md:grid-cols-4">
                     <p className="col-span-1">{t('market')}</p>
                     <p className="col-span-1 text-right">{t('price')}</p>
                     <p className="col-span-1 text-right">
                       {t('rolling-change')}
                     </p>
-                    <p className="col-span-1 text-right hidden md:block">
+                    <p className="col-span-1 hidden text-right md:block">
                       {t('daily-volume')}
                     </p>
                   </div>
@@ -348,7 +348,7 @@ const MarketSelectDropdown = () => {
                     const volume = volumeData ? volumeData : 0
 
                     return (
-                      <div className="flex items-center w-full" key={m.name}>
+                      <div className="flex w-full items-center" key={m.name}>
                         <Link
                           className={MARKET_LINK_CLASSES}
                           href={{
@@ -363,7 +363,7 @@ const MarketSelectDropdown = () => {
                         >
                           <div className="col-span-1 flex items-center">
                             <MarketLogos market={m} size="small" />
-                            <span className="text-th-fgd-2 text-xs">
+                            <span className="text-xs text-th-fgd-2">
                               {m.name}
                             </span>
                           </div>
@@ -389,7 +389,7 @@ const MarketSelectDropdown = () => {
                           <div className="col-span-1 flex justify-end">
                             <MarketChange market={m} size="small" />
                           </div>
-                          <div className="col-span-1 md:flex justify-end hidden">
+                          <div className="col-span-1 hidden justify-end md:flex">
                             {loadingMarketData ? (
                               <SheenLoader className="mt-0.5">
                                 <div className="h-3.5 w-12 bg-th-bkg-2" />

components/trade/MaxMarketSwapAmount.tsx

@@ -45,7 +45,7 @@ const MaxMarketSwapAmount = ({
   if (mangoAccountLoading) return null
 
   return (
-    <div className="mb-2 mt-3 flex items-center justify-between w-full">
+    <div className="mb-2 mt-3 flex w-full items-center justify-between">
       <p className="text-xs text-th-fgd-3">{t('trade:size')}</p>
       <MaxAmountButton
         className="text-xs"

components/trade/Orderbook.tsx

@@ -458,7 +458,7 @@ const Orderbook = () => {
 
   return (
     <div className="flex h-full flex-col">
-      <div className="h-10 flex items-center justify-between border-b border-th-bkg-3 px-4">
+      <div className="flex h-10 items-center justify-between border-b border-th-bkg-3 px-4">
         {market ? (
           <>
             <p className="text-xs">{t('trade:grouping')}:</p>
@@ -521,7 +521,7 @@ const Orderbook = () => {
           )
         })}
         <div
-          className="my-1 grid grid-cols-2 border-y border-th-bkg-3 py-1 px-4 text-xs text-th-fgd-4"
+          className="my-1 grid grid-cols-2 border-y border-th-bkg-3 px-4 py-1 text-xs text-th-fgd-4"
           id="trade-step-nine"
         >
           <div className="col-span-1 flex justify-between">

components/trade/OrderbookTooltip.tsx

@@ -27,7 +27,7 @@ const OrderbookTooltip = () => {
   const isPerp = serumOrPerpMarket instanceof PerpMarket
   return (
     <div
-      className={`absolute max-w-[75%] w-full top-4 left-1/2 -translate-x-1/2 p-3 rounded-md bg-th-bkg-1 border text-center ${
+      className={`absolute left-1/2 top-4 w-full max-w-[75%] -translate-x-1/2 rounded-md border bg-th-bkg-1 p-3 text-center ${
         isBuy ? 'border-th-up' : 'border-th-down'
       }`}
     >

components/trade/PerpPositions.tsx

@@ -320,7 +320,7 @@ const PerpPositions = () => {
                 {openPerpPositions.length > 1 ? (
                   <tr
                     key={`total-unrealized-pnl`}
-                    className="my-1 p-2 border-y border-th-bkg-3"
+                    className="my-1 border-y border-th-bkg-3 p-2"
                   >
                     <Td className="text-right font-mono">
                       <></>
@@ -335,8 +335,8 @@ const PerpPositions = () => {
                       <></>
                     </Td>
                     <Td className="text-right font-mono">
-                      <div className="flex justify-end items-center">
-                        <span className="font-body mr-2 text-xs text-th-fgd-3">
+                      <div className="flex items-center justify-end">
+                        <span className="mr-2 font-body text-xs text-th-fgd-3">
                           Total:
                         </span>
                         <Tooltip
@@ -471,7 +471,7 @@ const PerpPositions = () => {
                         enterTo="opacity-100"
                       >
                         <Disclosure.Panel>
-                          <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
+                          <div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
                             <div className="col-span-1">
                               <p className="text-xs text-th-fgd-3">
                                 {t('trade:size')}
@@ -649,13 +649,13 @@ const PerpPositions = () => {
                       <Disclosure.Button
                         className={`flex w-full justify-end border-t border-th-bkg-3 p-1 text-right focus:outline-none`}
                       >
-                        <div className="flex flex-col justify-end mt-1 ml-auto">
+                        <div className="ml-auto mt-1 flex flex-col justify-end">
                           <div className="flex flex-row">
-                            <span className="font-body mr-3 text-md text-th-fgd-3">
+                            <span className="text-md mr-3 font-body text-th-fgd-3">
                               Total Unrealized PnL:
                             </span>
                             <span
-                              className={`font-mono mr-2 ${
+                              className={`mr-2 font-mono ${
                                 totalPnlStats.unrealized > 0
                                   ? 'text-th-up'
                                   : 'text-th-down'
@@ -676,11 +676,11 @@ const PerpPositions = () => {
                               enterTo="opacity-100"
                             >
                               <Disclosure.Panel className="mt-1">
-                                <span className="font-body mr-3 text-md text-right text-th-fgd-3">
+                                <span className="text-md mr-3 text-right font-body text-th-fgd-3">
                                   Total ROE:
                                 </span>
                                 <span
-                                  className={`font-mono mr-1.5 ${
+                                  className={`mr-1.5 font-mono ${
                                     totalPnlStats.roe >= 0
                                       ? 'text-th-up'
                                       : 'text-th-down'

components/trade/RecentTrades.tsx

@@ -162,7 +162,7 @@ const RecentTrades = () => {
   return (
     <ErrorBoundary>
       <div className="hide-scroll h-full overflow-y-scroll">
-        <div className="flex items-center justify-between border-b border-th-bkg-3 py-1 pr-2 pl-0">
+        <div className="flex items-center justify-between border-b border-th-bkg-3 py-1 pl-0 pr-2">
           <Tooltip
             className="hidden md:block"
             content={t('trade:tooltip-volume-alert')}

components/trade/SpotMarketOrderSwapForm.tsx

@@ -497,7 +497,7 @@ export default function SpotMarketOrderSwapForm() {
               </Checkbox>
             </Tooltip>
           </div>
-          <div className="mt-6 mb-4 flex" onMouseEnter={fetchTransaction}>
+          <div className="mb-4 mt-6 flex" onMouseEnter={fetchTransaction}>
             {ipAllowed ? (
               <Button
                 className={`flex w-full items-center justify-center ${
@@ -686,7 +686,7 @@ export default function SpotMarketOrderSwapForm() {
                       )
                     })}
                   >
-                    <div className="tooltip-underline truncate whitespace-nowrap max-w-[140px]">
+                    <div className="tooltip-underline max-w-[140px] truncate whitespace-nowrap">
                       {selectedRoute?.marketInfos.map((info, index) => {
                         let includeSeparator = false
                         if (

components/trade/TradeAdvancedPage.tsx

@@ -332,10 +332,10 @@ const TradeAdvancedPage = () => {
           <div
             className={`border-y border-l border-th-bkg-3 lg:border-b-0 ${
               tradeLayout === 'chartMiddleOBRight'
-                ? 'lg:border-r lg:border-l-0'
+                ? 'lg:border-l-0 lg:border-r'
                 : ''
             } ${
-              tradeLayout === 'chartRight' ? 'lg:border-r lg:border-l-0' : ''
+              tradeLayout === 'chartRight' ? 'lg:border-l-0 lg:border-r' : ''
             } ${tradeLayout === 'chartLeft' ? 'lg:border-l-0' : ''}`}
             key="trade-form"
           >

components/trade/TradingViewChart.tsx

@@ -831,7 +831,7 @@ const TradingViewChart = () => {
         leaveTo="scale-0 opacity-0"
       >
         <img
-          className="absolute top-8 right-20 h-auto w-36"
+          className="absolute right-20 top-8 h-auto w-36"
           src={themeData.tvImagePath}
         />
       </Transition>

components/trade/TradingViewChartKline.tsx

@@ -251,7 +251,7 @@ const TradingViewChartKline = ({ setIsFullView, isFullView }: Props) => {
       className={clsx(
         'h-full w-full',
         isFullView
-          ? 'fixed left-0 top-0 right-0 bottom-0 z-40 bg-th-bkg-1 text-th-fgd-1'
+          ? 'fixed bottom-0 left-0 right-0 top-0 z-40 bg-th-bkg-1 text-th-fgd-1'
           : '',
       )}
     >

components/wallet/ConnectWalletButton.tsx

@@ -104,7 +104,7 @@ export default function ConnectWalletButton({
                   leaveFrom="opacity-100"
                   leaveTo="opacity-0"
                 >
-                  <Popover.Panel className="absolute top-16 right-0 z-20 w-48 rounded-md rounded-t-none bg-th-bkg-2 px-4 py-2.5 outline-none">
+                  <Popover.Panel className="absolute right-0 top-16 z-20 w-48 rounded-md rounded-t-none bg-th-bkg-2 px-4 py-2.5 outline-none">
                     {detectedWallets.map((wallet, index) => (
                       <button
                         className="flex w-full flex-row items-center justify-between rounded-none py-2 font-normal focus:outline-none focus-visible:text-th-active md:hover:cursor-pointer md:hover:text-th-active"

package.json

@@ -101,8 +101,8 @@
     "eslint-plugin-tailwindcss": "3.13.0",
     "husky": "8.0.1",
     "postcss": "8.4.12",
-    "prettier": "3.0.0",
-    "prettier-plugin-tailwindcss": "0.4.1",
+    "prettier": "3.0.2",
+    "prettier-plugin-tailwindcss": "0.5.3",
     "tailwindcss": "3.3.3",
     "typescript": "4.9.4"
   },

pages/dashboard/index.tsx

@@ -100,7 +100,7 @@ const Dashboard: NextPage = () => {
                     Collpase All
                   </Button>
                 </div>
-                <h3 className="mt-6 mb-3 text-base text-th-fgd-3">Banks</h3>
+                <h3 className="mb-3 mt-6 text-base text-th-fgd-3">Banks</h3>
                 <div className="border-b border-th-bkg-3">
                   {Array.from(group.banksMapByMint)
                     .sort((a, b) => a[0].localeCompare(b[0]))
@@ -315,7 +315,7 @@ const Dashboard: NextPage = () => {
                                     value={`${formattedBankValues.liquidationFee}%`}
                                   />
                                   {bank.mint.toBase58() !== USDC_MINT && (
-                                    <div className="flex mt-2 mb-4">
+                                    <div className="mb-4 mt-2 flex">
                                       <Button
                                         className=" ml-auto"
                                         onClick={() =>
@@ -346,7 +346,7 @@ const Dashboard: NextPage = () => {
                     )}
                 </div>
 
-                <h3 className="mt-6 mb-3 text-base text-th-fgd-3">
+                <h3 className="mb-3 mt-6 text-base text-th-fgd-3">
                   Perp Markets
                 </h3>
                 <div className="border-b border-th-bkg-3">
@@ -635,7 +635,7 @@ const Dashboard: NextPage = () => {
                       )
                     })}
                 </div>
-                <h3 className="mt-6 mb-3 text-base text-th-fgd-3">
+                <h3 className="mb-3 mt-6 text-base text-th-fgd-3">
                   Spot Markets
                 </h3>
                 <div className="border-b border-th-bkg-3">
@@ -815,7 +815,7 @@ export const DashboardNavbar = () => {
   const { asPath } = useRouter()
 
   return (
-    <div className="mt-4 mb-2 flex border border-th-bkg-3">
+    <div className="mb-2 mt-4 flex border border-th-bkg-3">
       <div>
         <Link href={'/dashboard'} shallow={true}>
           <h4

pages/nft/index.tsx

@@ -66,7 +66,7 @@ const Market: NextPage = () => {
   return isWhiteListed ? (
     <>
       <div className="mx-auto flex max-w-[1140px] flex-col px-6">
-        <div className="flex items-center justify-between pt-8 pb-6">
+        <div className="flex items-center justify-between pb-6 pt-8">
           <h1>NFT Market</h1>
           <div className="flex space-x-2">
             <Button onClick={() => setSellNftModal(true)}>

prettier.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: ['prettier-plugin-tailwindcss'],
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'all',
+}

utils/governance/accounts/vsrAccounts.ts

@@ -131,9 +131,8 @@ export const tryGetRegistrar = async (
   client: VsrClient,
 ) => {
   try {
-    const existingRegistrar = await client.program.account.registrar.fetch(
-      registrarPk,
-    )
+    const existingRegistrar =
+      await client.program.account.registrar.fetch(registrarPk)
     return existingRegistrar as unknown as Registrar
   } catch (e) {
     return null

utils/governance/market/createOpenBookMarket.ts

@@ -134,9 +134,8 @@ const makeCreateMarketInstruction = async ({
   }
 }) => {
   const ins1: TransactionInstruction[] = []
-  const accountLamports = await connection.getMinimumBalanceForRentExemption(
-    165,
-  )
+  const accountLamports =
+    await connection.getMinimumBalanceForRentExemption(165)
   ins1.push(
     SystemProgram.createAccount({
       fromPubkey: wallet,

yarn.lock

@@ -7110,15 +7110,15 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier-plugin-tailwindcss@0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.4.1.tgz#f7ed664199540978b2cbd037bac3a337d6689e86"
-  integrity sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==
+prettier-plugin-tailwindcss@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.3.tgz#ed4b31ee75bbce1db4ac020a859267d5b65ad8df"
+  integrity sha512-M5K80V21yM+CTm/FEFYRv9/9LyInYbCSXpIoPAKMm8zy89IOwdiA2e4JVbcO7tvRtAQWz32zdj7/WKcsmFyAVg==
 
-prettier@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.0.tgz#e7b19f691245a21d618c68bc54dc06122f6105ae"
-  integrity sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==
+prettier@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.2.tgz#78fcecd6d870551aa5547437cdae39d4701dca5b"
+  integrity sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==
 
 process-nextick-args@~2.0.0:
   version "2.0.1"