From 43217754c88eda7c35021f5a55de65c64cd9339f Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Sun, 9 Oct 2022 19:23:03 -0700
Subject: [PATCH] Add styled expanding textarea component

---
 web/components/answers/create-answer-panel.tsx   |  6 +++---
 .../answers/multiple-choice-answers.tsx          |  6 +++---
 .../challenges/create-challenge-modal.tsx        |  6 +++---
 web/components/contract/contract-description.tsx |  7 +++----
 web/components/create-post.tsx                   |  8 +++-----
 web/components/expanding-input.tsx               | 16 ++++++++++++++++
 web/components/manalinks/create-links-button.tsx |  5 ++---
 web/pages/create.tsx                             |  7 +++----
 web/pages/date-docs/create.tsx                   |  6 ++----
 web/pages/profile.tsx                            |  6 +++---
 10 files changed, 41 insertions(+), 32 deletions(-)
 create mode 100644 web/components/expanding-input.tsx

diff --git a/web/components/answers/create-answer-panel.tsx b/web/components/answers/create-answer-panel.tsx
index 58f55327..4012e587 100644
--- a/web/components/answers/create-answer-panel.tsx
+++ b/web/components/answers/create-answer-panel.tsx
@@ -1,6 +1,5 @@
 import clsx from 'clsx'
 import React, { useState } from 'react'
-import Textarea from 'react-expanding-textarea'
 import { findBestMatch } from 'string-similarity'
 
 import { FreeResponseContract } from 'common/contract'
@@ -26,6 +25,7 @@ import { MAX_ANSWER_LENGTH } from 'common/answer'
 import { withTracking } from 'web/lib/service/analytics'
 import { lowerCase } from 'lodash'
 import { Button } from '../button'
+import { ExpandingInput } from '../expanding-input'
 
 export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
   const { contract } = props
@@ -122,10 +122,10 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
     <Col className="gap-4 rounded">
       <Col className="flex-1 gap-2 px-4 xl:px-0">
         <div className="mb-1">Add your answer</div>
-        <Textarea
+        <ExpandingInput
           value={text}
           onChange={(e) => changeAnswer(e.target.value)}
-          className="textarea textarea-bordered w-full resize-none"
+          className="w-full"
           placeholder="Type your answer..."
           rows={1}
           maxLength={MAX_ANSWER_LENGTH}
diff --git a/web/components/answers/multiple-choice-answers.tsx b/web/components/answers/multiple-choice-answers.tsx
index c2857eb2..bdc61022 100644
--- a/web/components/answers/multiple-choice-answers.tsx
+++ b/web/components/answers/multiple-choice-answers.tsx
@@ -1,8 +1,8 @@
 import { MAX_ANSWER_LENGTH } from 'common/answer'
-import Textarea from 'react-expanding-textarea'
 import { XIcon } from '@heroicons/react/solid'
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
+import { ExpandingInput } from '../expanding-input'
 
 export function MultipleChoiceAnswers(props: {
   answers: string[]
@@ -27,10 +27,10 @@ export function MultipleChoiceAnswers(props: {
       {answers.map((answer, i) => (
         <Row className="mb-2 items-center gap-2 align-middle">
           {i + 1}.{' '}
-          <Textarea
+          <ExpandingInput
             value={answer}
             onChange={(e) => setAnswer(i, e.target.value)}
-            className="textarea textarea-bordered ml-2 w-full resize-none"
+            className="ml-2 w-full"
             placeholder="Type your answer..."
             rows={1}
             maxLength={MAX_ANSWER_LENGTH}
diff --git a/web/components/challenges/create-challenge-modal.tsx b/web/components/challenges/create-challenge-modal.tsx
index f18fbdad..f8d91a7b 100644
--- a/web/components/challenges/create-challenge-modal.tsx
+++ b/web/components/challenges/create-challenge-modal.tsx
@@ -20,11 +20,11 @@ import { getProbability } from 'common/calculate'
 import { createMarket } from 'web/lib/firebase/api'
 import { removeUndefinedProps } from 'common/util/object'
 import { FIXED_ANTE } from 'common/economy'
-import Textarea from 'react-expanding-textarea'
 import { useTextEditor } from 'web/components/editor'
 import { LoadingIndicator } from 'web/components/loading-indicator'
 import { track } from 'web/lib/service/analytics'
 import { CopyLinkButton } from '../copy-link-button'
+import { ExpandingInput } from '../expanding-input'
 
 type challengeInfo = {
   amount: number
@@ -153,9 +153,9 @@ function CreateChallengeForm(props: {
             {contract ? (
               <span className="underline">{contract.question}</span>
             ) : (
-              <Textarea
+              <ExpandingInput
                 placeholder="e.g. Will a Democrat be the next president?"
-                className="input input-bordered mt-1 w-full resize-none"
+                className="mt-1 w-full"
                 autoFocus={true}
                 maxLength={MAX_QUESTION_LENGTH}
                 value={challengeInfo.question}
diff --git a/web/components/contract/contract-description.tsx b/web/components/contract/contract-description.tsx
index 259e39df..dc94d339 100644
--- a/web/components/contract/contract-description.tsx
+++ b/web/components/contract/contract-description.tsx
@@ -1,8 +1,6 @@
 import clsx from 'clsx'
 import dayjs from 'dayjs'
 import { useState } from 'react'
-import Textarea from 'react-expanding-textarea'
-
 import { Contract, MAX_DESCRIPTION_LENGTH } from 'common/contract'
 import { exhibitExts } from 'common/util/parse'
 import { useAdmin } from 'web/hooks/use-admin'
@@ -15,6 +13,7 @@ import { Button } from '../button'
 import { Spacer } from '../layout/spacer'
 import { Editor, Content as ContentType } from '@tiptap/react'
 import { insertContent } from '../editor/utils'
+import { ExpandingInput } from '../expanding-input'
 
 export function ContractDescription(props: {
   contract: Contract
@@ -138,8 +137,8 @@ function EditQuestion(props: {
 
   return editing ? (
     <div className="mt-4">
-      <Textarea
-        className="textarea textarea-bordered mb-1 h-24 w-full resize-none"
+      <ExpandingInput
+        className="mb-1 h-24 w-full"
         rows={2}
         value={text}
         onChange={(e) => setText(e.target.value || '')}
diff --git a/web/components/create-post.tsx b/web/components/create-post.tsx
index 6d42051c..f7d9b8bd 100644
--- a/web/components/create-post.tsx
+++ b/web/components/create-post.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { Spacer } from 'web/components/layout/spacer'
 import { Title } from 'web/components/title'
-import Textarea from 'react-expanding-textarea'
 
 import { TextEditor, useTextEditor } from 'web/components/editor'
 import { createPost } from 'web/lib/firebase/api'
@@ -10,6 +9,7 @@ import Router from 'next/router'
 import { MAX_POST_TITLE_LENGTH } from 'common/post'
 import { postPath } from 'web/lib/firebase/posts'
 import { Group } from 'common/group'
+import { ExpandingInput } from './expanding-input'
 
 export function CreatePost(props: { group?: Group }) {
   const [title, setTitle] = useState('')
@@ -60,9 +60,8 @@ export function CreatePost(props: { group?: Group }) {
                 Title<span className={'text-red-700'}> *</span>
               </span>
             </label>
-            <Textarea
+            <ExpandingInput
               placeholder="e.g. Elon Mania Post"
-              className="input input-bordered resize-none"
               autoFocus
               maxLength={MAX_POST_TITLE_LENGTH}
               value={title}
@@ -74,9 +73,8 @@ export function CreatePost(props: { group?: Group }) {
                 Subtitle<span className={'text-red-700'}> *</span>
               </span>
             </label>
-            <Textarea
+            <ExpandingInput
               placeholder="e.g. How Elon Musk is getting everyone's attention"
-              className="input input-bordered resize-none"
               autoFocus
               maxLength={MAX_POST_TITLE_LENGTH}
               value={subtitle}
diff --git a/web/components/expanding-input.tsx b/web/components/expanding-input.tsx
new file mode 100644
index 00000000..ff442348
--- /dev/null
+++ b/web/components/expanding-input.tsx
@@ -0,0 +1,16 @@
+import clsx from 'clsx'
+import Textarea from 'react-expanding-textarea'
+
+/** Expanding `<textarea>` with same style as input.tsx */
+export const ExpandingInput = (props: Parameters<typeof Textarea>[0]) => {
+  const { className, ...rest } = props
+  return (
+    <Textarea
+      className={clsx(
+        'textarea textarea-bordered resize-none text-[16px] md:text-[14px]',
+        className
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/web/components/manalinks/create-links-button.tsx b/web/components/manalinks/create-links-button.tsx
index b2fc1f11..8d5bac67 100644
--- a/web/components/manalinks/create-links-button.tsx
+++ b/web/components/manalinks/create-links-button.tsx
@@ -7,13 +7,13 @@ import { User } from 'common/user'
 import { ManalinkCard, ManalinkInfo } from 'web/components/manalink-card'
 import { createManalink } from 'web/lib/firebase/manalinks'
 import { Modal } from 'web/components/layout/modal'
-import Textarea from 'react-expanding-textarea'
 import dayjs from 'dayjs'
 import { Button } from '../button'
 import { getManalinkUrl } from 'web/pages/links'
 import { DuplicateIcon } from '@heroicons/react/outline'
 import { QRCode } from '../qr-code'
 import { Input } from '../input'
+import { ExpandingInput } from '../expanding-input'
 
 export function CreateLinksButton(props: {
   user: User
@@ -165,10 +165,9 @@ function CreateManalinkForm(props: {
             </div>
             <div className="form-control w-full">
               <label className="label">Message</label>
-              <Textarea
+              <ExpandingInput
                 placeholder={defaultMessage}
                 maxLength={200}
-                className="input input-bordered resize-none"
                 autoFocus
                 value={newManalink.message}
                 rows="3"
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index 248b43ee..7ba99a39 100644
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@@ -2,7 +2,6 @@ import router, { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
-import Textarea from 'react-expanding-textarea'
 import { Spacer } from 'web/components/layout/spacer'
 import { getUserAndPrivateUser } from 'web/lib/firebase/users'
 import { Contract, contractPath } from 'web/lib/firebase/contracts'
@@ -40,6 +39,7 @@ import { Button } from 'web/components/button'
 import { AddFundsModal } from 'web/components/add-funds-modal'
 import ShortToggle from 'web/components/widgets/short-toggle'
 import { Input } from 'web/components/input'
+import { ExpandingInput } from 'web/components/expanding-input'
 
 export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
   return { props: { auth: await getUserAndPrivateUser(creds.uid) } }
@@ -105,9 +105,8 @@ export default function Create(props: { auth: { user: User } }) {
                 </span>
               </label>
 
-              <Textarea
+              <ExpandingInput
                 placeholder="e.g. Will the Democrats win the 2024 US presidential election?"
-                className="input input-bordered resize-none"
                 autoFocus
                 maxLength={MAX_QUESTION_LENGTH}
                 value={question}
@@ -446,7 +445,7 @@ export function NewContract(props: {
             className={'col-span-4 sm:col-span-2'}
           />
         </Row>
-        <Row className='mt-4 gap-2'>
+        <Row className="mt-4 gap-2">
           <Input
             type={'date'}
             onClick={(e) => e.stopPropagation()}
diff --git a/web/pages/date-docs/create.tsx b/web/pages/date-docs/create.tsx
index a93f28fa..639ed51c 100644
--- a/web/pages/date-docs/create.tsx
+++ b/web/pages/date-docs/create.tsx
@@ -1,7 +1,5 @@
 import Router from 'next/router'
 import { useEffect, useState } from 'react'
-import Textarea from 'react-expanding-textarea'
-
 import { DateDoc } from 'common/post'
 import { useTextEditor, TextEditor } from 'web/components/editor'
 import { Page } from 'web/components/page'
@@ -18,6 +16,7 @@ import { NoSEO } from 'web/components/NoSEO'
 import ShortToggle from 'web/components/widgets/short-toggle'
 import { removeUndefinedProps } from 'common/util/object'
 import { Input } from 'web/components/input'
+import { ExpandingInput } from 'web/components/expanding-input'
 
 export default function CreateDateDocPage() {
   const user = useUser()
@@ -122,8 +121,7 @@ export default function CreateDateDocPage() {
               </Row>
 
               <Col className="gap-2">
-                <Textarea
-                  className="input input-bordered resize-none"
+                <ExpandingInput
                   maxLength={MAX_QUESTION_LENGTH}
                   value={question}
                   onChange={(e) => setQuestion(e.target.value || '')}
diff --git a/web/pages/profile.tsx b/web/pages/profile.tsx
index 0c3de33c..04878c6c 100644
--- a/web/pages/profile.tsx
+++ b/web/pages/profile.tsx
@@ -3,8 +3,8 @@ import { PrivateUser, User } from 'common/user'
 import { cleanDisplayName, cleanUsername } from 'common/util/clean-username'
 import Link from 'next/link'
 import React, { useState } from 'react'
-import Textarea from 'react-expanding-textarea'
 import { ConfirmationButton } from 'web/components/confirmation-button'
+import { ExpandingInput } from 'web/components/expanding-input'
 import { Input } from 'web/components/input'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
@@ -44,8 +44,8 @@ function EditUserField(props: {
       <label className="label">{label}</label>
 
       {field === 'bio' ? (
-        <Textarea
-          className="textarea textarea-bordered w-full resize-none"
+        <ExpandingInput
+          className="w-full"
           value={value}
           onChange={(e) => setValue(e.target.value)}
           onBlur={updateField}