Fix form-control styling

web/components/answers/answer-item.tsx

@@ -100,7 +100,7 @@ export function AnswerItem(props: {
             </div>
           ))}
         {showChoice ? (
-          <div className="form-control py-1">
+          <div className="flex flex-col py-1">
             <label className="cursor-pointer gap-3 px-1 py-2">
               <span className="">Choose this answer</span>
               {showChoice === 'radio' && (

web/components/challenges/create-challenge-modal.tsx

@@ -171,7 +171,7 @@ function CreateChallengeForm(props: {
               <div>You'll bet:</div>
               <Row
                 className={
-                  'form-control w-full max-w-xs items-center justify-between gap-4 pr-3'
+                  'w-full max-w-xs items-center justify-between gap-4 pr-3'
                 }
               >
                 <AmountInput

web/components/create-post.tsx

@@ -55,7 +55,7 @@ export function CreatePost(props: { group?: Group }) {
       <div className="rounded-lg px-6 py-4 sm:py-0">
         <Title className="!mt-0" text="Create a post" />
         <form>
-          <div className="form-control w-full">
+          <div className="flex w-full flex-col">
             <label className="px-1 py-2">
               <span className="mb-1">
                 Title<span className={'text-red-700'}> *</span>

web/components/groups/create-group-button.tsx

@@ -103,7 +103,7 @@ export function CreateGroupButton(props: {
       </Col>
       {errorText && <div className={'text-error'}>{errorText}</div>}
 
-      <div className="form-control w-full">
+      <div className="flex w-full flex-col">
         <label className="mb-2 ml-1 mt-0">Group name</label>
         <Input
           placeholder={'Your group name'}

web/components/groups/edit-group-button.tsx

@@ -51,7 +51,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
       </Button>
       <Modal open={open} setOpen={updateOpen}>
         <div className="h-full rounded-md bg-white p-8">
-          <div className="form-control w-full">
+          <div className="flex w-full flex-col">
             <label className="px-1 py-2">
               <span className="mb-1">Group name</span>
             </label>
@@ -66,7 +66,7 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
 
           <Spacer h={4} />
 
-          <div className="form-control w-full">
+          <div className="flex w-full flex-col">
             <label className="px-1 py-2">
               <span className="mb-0">Add members</span>
             </label>

web/components/groups/group-selector.tsx

@@ -72,7 +72,7 @@ export function GroupSelector(props: {
     )
   }
   return (
-    <div className="form-control items-start">
+    <div className="flex flex-col items-start">
       <Combobox
         as="div"
         value={selectedGroup}

web/components/manalinks/create-links-button.tsx

@@ -116,7 +116,7 @@ function CreateManalinkForm(props: {
         >
           <Title className="!my-0" text="Create a Manalink" />
           <div className="flex flex-col flex-wrap gap-x-5 gap-y-2">
-            <div className="form-control flex-auto">
+            <div className="flex flex-auto flex-col">
               <label className="px-1 py-2">Amount</label>
               <div className="relative">
                 <span className="absolute mx-3 mt-3.5 text-sm text-gray-400">
@@ -136,7 +136,7 @@ function CreateManalinkForm(props: {
               </div>
             </div>
             <div className="flex flex-col gap-2 md:flex-row">
-              <div className="form-control w-full md:w-1/2">
+              <div className="flex w-full flex-col md:w-1/2">
                 <label className="px-1 py-2">Uses</label>
                 <Input
                   type="number"
@@ -149,7 +149,7 @@ function CreateManalinkForm(props: {
                   }
                 />
               </div>
-              <div className="form-control w-full md:w-1/2">
+              <div className="flex w-full flex-col md:w-1/2">
                 <label className="px-1 py-2">Expires in</label>
                 <Select
                   value={expiresIn}
@@ -163,7 +163,7 @@ function CreateManalinkForm(props: {
                 </Select>
               </div>
             </div>
-            <div className="form-control w-full">
+            <div className="flex w-full flex-col">
               <label className="px-1 py-2">Message</label>
               <ExpandingInput
                 placeholder={defaultMessage}

web/pages/create.tsx

@@ -96,7 +96,7 @@ export default function Create(props: { auth: { user: User } }) {
           <Title className="!mt-0" text="Create a market" />
 
           <form>
-            <div className="form-control w-full">
+            <div className="flex w-full flex-col">
               <label className="px-1 pt-2 pb-3">
                 Question<span className={'text-red-700'}>*</span>
               </label>
@@ -314,7 +314,7 @@ export function NewContract(props: {
 
       {outcomeType === 'PSEUDO_NUMERIC' && (
         <>
-          <div className="form-control mb-2 items-start">
+          <div className="mb-2 flex flex-col items-start">
             <label className="gap-2 px-1 py-2">
               <span className="mb-1">Range</span>
               <InfoTooltip text="The lower and higher bounds of the numeric range. Choose bounds the value could reasonably be expected to hit." />
@@ -359,7 +359,7 @@ export function NewContract(props: {
               </div>
             )}
           </div>
-          <div className="form-control mb-2 items-start">
+          <div className="mb-2 flex flex-col items-start">
             <label className="gap-2 px-1 py-2">
               <span className="mb-1">Initial value</span>
               <InfoTooltip text="The starting value for this market. Should be in between min and max values." />
@@ -406,7 +406,7 @@ export function NewContract(props: {
         )}
       </Row>
 
-      <Row className="form-control my-2 items-center gap-2 text-sm">
+      <Row className="my-2 items-center gap-2 text-sm">
         <span>Display this market on homepage</span>
         <ShortToggle
           on={visibility === 'public'}
@@ -416,7 +416,7 @@ export function NewContract(props: {
 
       <Spacer h={6} />
 
-      <div className="form-control mb-1 items-start">
+      <div className="mb-1 flex flex-col items-start">
         <label className="mb-1 gap-2 px-1 py-2">
           <span>Question closes in</span>
           <InfoTooltip text="Predicting will be halted after this time (local timezone)." />
@@ -459,7 +459,7 @@ export function NewContract(props: {
 
       <Spacer h={6} />
 
-      <div className="form-control mb-1 items-start gap-1">
+      <div className="mb-1 flex flex-col items-start gap-1">
         <label className="gap-2 px-1 py-2">
           <span className="mb-1">Description</span>
           <InfoTooltip text="Optional. Describe how you will resolve this question." />
@@ -470,7 +470,7 @@ export function NewContract(props: {
       <Spacer h={6} />
       <span className={'text-error'}>{errorText}</span>
       <Row className="items-end justify-between">
-        <div className="form-control mb-1 items-start">
+        <div className="mb-1 flex flex-col items-start">
           <label className="mb-1 gap-2 px-1 py-2">
             <span>Cost</span>
             <InfoTooltip

web/pages/post/[...slugs]/index.tsx

@@ -117,7 +117,7 @@ export default function PostPage(props: {
 
         <Spacer h={2} />
         <div className="rounded-lg bg-white px-6 py-4 sm:py-0">
-          <div className="form-control w-full py-2">
+          <div className="flex w-full flex-col py-2">
             {user && user.id === post.creatorId ? (
               <RichEditPost post={post} />
             ) : (