From ef77779ceca05505f3a3ade2031cdef64751f112 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Thu, 3 Mar 2022 01:09:32 -0800
Subject: [PATCH] Format Tailwind classes with Prettier

Not sure why Husky hooks aren't enforcing this :shrug:
---
 web/components/answers/answer-bet-panel.tsx     | 14 +++++++-------
 web/components/answers/answer-resolve-panel.tsx |  4 ++--
 web/components/answers/answers-panel.tsx        |  4 ++--
 web/components/answers/create-answer-panel.tsx  | 16 ++++++++--------
 web/components/bet-panel.tsx                    | 10 +++++-----
 web/components/fast-fold-following.tsx          |  2 +-
 web/pages/add-funds.tsx                         |  4 ++--
 web/pages/create.tsx                            |  4 ++--
 8 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/web/components/answers/answer-bet-panel.tsx b/web/components/answers/answer-bet-panel.tsx
index bad83813..82b0967b 100644
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/web/components/answers/answer-bet-panel.tsx
@@ -94,11 +94,11 @@ export function AnswerBetPanel(props: {
 
   return (
     <Col className={clsx('px-2 pb-2 pt-4 sm:pt-0', className)}>
-      <Row className="self-stretch items-center justify-between">
+      <Row className="items-center justify-between self-stretch">
         <div className="text-xl">Buy this answer</div>
 
         <button className="btn-ghost btn-circle" onClick={closePanel}>
-          <XIcon className="w-8 h-8 text-gray-500 mx-auto" aria-hidden="true" />
+          <XIcon className="mx-auto h-8 w-8 text-gray-500" aria-hidden="true" />
         </button>
       </Row>
       <div className="my-3 text-left text-sm text-gray-500">Amount </div>
@@ -112,8 +112,8 @@ export function AnswerBetPanel(props: {
         inputRef={inputRef}
         contractIdForLoan={contract.id}
       />
-      <Col className="gap-3 mt-3 w-full">
-        <Row className="justify-between items-center text-sm">
+      <Col className="mt-3 w-full gap-3">
+        <Row className="items-center justify-between text-sm">
           <div className="text-gray-500">Probability</div>
           <Row>
             <div>{formatPercent(initialProb)}</div>
@@ -122,8 +122,8 @@ export function AnswerBetPanel(props: {
           </Row>
         </Row>
 
-        <Row className="justify-between items-start text-sm gap-2">
-          <Row className="flex-nowrap whitespace-nowrap items-center gap-2 text-gray-500">
+        <Row className="items-start justify-between gap-2 text-sm">
+          <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
             <div>Payout if chosen</div>
             <InfoTooltip
               text={`Current payout for ${formatWithCommas(
@@ -133,7 +133,7 @@ export function AnswerBetPanel(props: {
               )} shares`}
             />
           </Row>
-          <Row className="flex-wrap justify-end items-end gap-2">
+          <Row className="flex-wrap items-end justify-end gap-2">
             <span className="whitespace-nowrap">
               {formatMoney(currentPayout)}
             </span>
diff --git a/web/components/answers/answer-resolve-panel.tsx b/web/components/answers/answer-resolve-panel.tsx
index b1146e19..c244d72b 100644
--- a/web/components/answers/answer-resolve-panel.tsx
+++ b/web/components/answers/answer-resolve-panel.tsx
@@ -71,9 +71,9 @@ export function AnswerResolvePanel(props: {
       : 'btn-disabled'
 
   return (
-    <Col className="gap-4 p-4 bg-gray-50 rounded">
+    <Col className="gap-4 rounded bg-gray-50 p-4">
       <div>Resolve your market</div>
-      <Col className="sm:flex-row sm:items-center gap-4">
+      <Col className="gap-4 sm:flex-row sm:items-center">
         <ChooseCancelSelector
           className="sm:!flex-row sm:items-center"
           selected={resolveOption}
diff --git a/web/components/answers/answers-panel.tsx b/web/components/answers/answers-panel.tsx
index 5fc30595..9f42efb9 100644
--- a/web/components/answers/answers-panel.tsx
+++ b/web/components/answers/answers-panel.tsx
@@ -95,9 +95,9 @@ export function AnswersPanel(props: { contract: Contract; answers: Answer[] }) {
       ))}
 
       {sortedAnswers.length === 0 ? (
-        <div className="text-gray-500 p-4">No answers yet...</div>
+        <div className="p-4 text-gray-500">No answers yet...</div>
       ) : (
-        <div className="text-gray-500 self-end p-4">
+        <div className="self-end p-4 text-gray-500">
           None of the above:{' '}
           {formatPercent(getOutcomeProbability(contract.totalShares, '0'))}
         </div>
diff --git a/web/components/answers/create-answer-panel.tsx b/web/components/answers/create-answer-panel.tsx
index 28596521..8e5b88a8 100644
--- a/web/components/answers/create-answer-panel.tsx
+++ b/web/components/answers/create-answer-panel.tsx
@@ -73,7 +73,7 @@ export function CreateAnswerPanel(props: { contract: Contract }) {
   const currentReturnPercent = (currentReturn * 100).toFixed() + '%'
 
   return (
-    <Col className="gap-4 p-4 bg-gray-50 rounded">
+    <Col className="gap-4 rounded bg-gray-50 p-4">
       <Col className="flex-1 gap-2">
         <div className="mb-1">Add your answer</div>
         <Textarea
@@ -87,14 +87,14 @@ export function CreateAnswerPanel(props: { contract: Contract }) {
         <div />
         <Col
           className={clsx(
-            'sm:flex-row sm:items-end gap-4',
+            'gap-4 sm:flex-row sm:items-end',
             text ? 'justify-between' : 'self-end'
           )}
         >
           {text && (
             <>
-              <Col className="gap-2 mt-1">
-                <div className="text-gray-500 text-sm">Buy amount</div>
+              <Col className="mt-1 gap-2">
+                <div className="text-sm text-gray-500">Buy amount</div>
                 <AmountInput
                   amount={betAmount}
                   onChange={setBetAmount}
@@ -106,7 +106,7 @@ export function CreateAnswerPanel(props: { contract: Contract }) {
                 />
               </Col>
               <Col className="gap-3">
-                <Row className="justify-between items-center text-sm">
+                <Row className="items-center justify-between text-sm">
                   <div className="text-gray-500">Probability</div>
                   <Row>
                     <div>{formatPercent(0)}</div>
@@ -115,8 +115,8 @@ export function CreateAnswerPanel(props: { contract: Contract }) {
                   </Row>
                 </Row>
 
-                <Row className="justify-between text-sm gap-2">
-                  <Row className="flex-nowrap whitespace-nowrap items-center gap-2 text-gray-500">
+                <Row className="justify-between gap-2 text-sm">
+                  <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
                     <div>Payout if chosen</div>
                     <InfoTooltip
                       text={`Current payout for ${formatWithCommas(
@@ -124,7 +124,7 @@ export function CreateAnswerPanel(props: { contract: Contract }) {
                       )} / ${formatWithCommas(shares)} shares`}
                     />
                   </Row>
-                  <Row className="flex-wrap justify-end items-end gap-2">
+                  <Row className="flex-wrap items-end justify-end gap-2">
                     <span className="whitespace-nowrap">
                       {formatMoney(currentPayout)}
                     </span>
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index ec3e7cfc..03b3e34a 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -157,8 +157,8 @@ export function BetPanel(props: {
         contractIdForLoan={contract.id}
       />
 
-      <Col className="gap-3 mt-3 w-full">
-        <Row className="justify-between items-center text-sm">
+      <Col className="mt-3 w-full gap-3">
+        <Row className="items-center justify-between text-sm">
           <div className="text-gray-500">Probability</div>
           <Row>
             <div>{formatPercent(initialProb)}</div>
@@ -167,8 +167,8 @@ export function BetPanel(props: {
           </Row>
         </Row>
 
-        <Row className="justify-between items-start text-sm gap-2">
-          <Row className="flex-nowrap whitespace-nowrap items-center gap-2 text-gray-500">
+        <Row className="items-start justify-between gap-2 text-sm">
+          <Row className="flex-nowrap items-center gap-2 whitespace-nowrap text-gray-500">
             <div>
               Payout if <OutcomeLabel outcome={betChoice ?? 'YES'} />
             </div>
@@ -182,7 +182,7 @@ export function BetPanel(props: {
               )} ${betChoice} shares`}
             />
           </Row>
-          <Row className="flex-wrap justify-end items-end gap-2">
+          <Row className="flex-wrap items-end justify-end gap-2">
             <span className="whitespace-nowrap">
               {formatMoney(currentPayout)}
             </span>
diff --git a/web/components/fast-fold-following.tsx b/web/components/fast-fold-following.tsx
index db0bd105..577719b6 100644
--- a/web/components/fast-fold-following.tsx
+++ b/web/components/fast-fold-following.tsx
@@ -32,7 +32,7 @@ function FollowFoldButton(props: {
       className={clsx(
         'rounded-full border-2 px-4 py-1 shadow-md',
         'cursor-pointer',
-        followed ? 'bg-gray-300 border-gray-300' : 'bg-white'
+        followed ? 'border-gray-300 bg-gray-300' : 'bg-white'
       )}
       onClick={onClick}
     >
diff --git a/web/pages/add-funds.tsx b/web/pages/add-funds.tsx
index 2ecf6317..339be265 100644
--- a/web/pages/add-funds.tsx
+++ b/web/pages/add-funds.tsx
@@ -19,10 +19,10 @@ export default function AddFundsPage() {
       <SEO title="Add funds" description="Add funds" url="/add-funds" />
 
       <Col className="items-center">
-        <Col className="bg-white rounded sm:shadow-md p-4 py-8 sm:p-8 h-full">
+        <Col className="h-full rounded bg-white p-4 py-8 sm:p-8 sm:shadow-md">
           <Title className="!mt-0" text="Get Manifold Dollars" />
           <img
-            className="mb-6 block self-center -scale-x-100"
+            className="mb-6 block -scale-x-100 self-center"
             src="/stylized-crane-black.png"
             width={200}
             height={200}
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index 47ce00d4..5e8830e0 100644
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@@ -137,7 +137,7 @@ export function NewContract(props: { question: string; tag?: string }) {
         <span className="mb-1">Answer type</span>
       </label>
       <Row className="form-control gap-2">
-        <label className="cursor-pointer label gap-2">
+        <label className="label cursor-pointer gap-2">
           <input
             className="radio"
             type="radio"
@@ -149,7 +149,7 @@ export function NewContract(props: { question: string; tag?: string }) {
           <span className="label-text">Yes / No</span>
         </label>
 
-        <label className="cursor-pointer label gap-2">
+        <label className="label cursor-pointer gap-2">
           <input
             className="radio"
             type="radio"