From 5bd1eab607f329ec466de8e0a39b3b35e91e576f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 11 Oct 2023 13:48:39 -0500
Subject: [PATCH] AccountNotePanel: use our native Textarea component

---
 src/components/ui/textarea/textarea.tsx       |  2 +-
 .../components/panels/account-note-panel.tsx  | 22 ++++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/textarea/textarea.tsx b/src/components/ui/textarea/textarea.tsx
index ab6252e21..e8ddc2c7d 100644
--- a/src/components/ui/textarea/textarea.tsx
+++ b/src/components/ui/textarea/textarea.tsx
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import Stack from '../stack/stack';
 import Text from '../text/text';
 
-interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
+interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'id' | 'maxLength' | 'onChange' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
   /** Put the cursor into the input on mount. */
   autoFocus?: boolean;
   /** Allows the textarea height to grow while typing */
diff --git a/src/features/ui/components/panels/account-note-panel.tsx b/src/features/ui/components/panels/account-note-panel.tsx
index 032039dae..5a28136c8 100644
--- a/src/features/ui/components/panels/account-note-panel.tsx
+++ b/src/features/ui/components/panels/account-note-panel.tsx
@@ -1,10 +1,9 @@
 import debounce from 'lodash/debounce';
 import React, { useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import Textarea from 'react-textarea-autosize';
 
 import { submitAccountNote } from 'soapbox/actions/account-notes';
-import { HStack, Text, Widget } from 'soapbox/components/ui';
+import { HStack, Text, Textarea, Widget } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import type { Account as AccountEntity } from 'soapbox/schemas';
@@ -64,14 +63,17 @@ const AccountNotePanel: React.FC<IAccountNotePanel> = ({ account }) => {
         )}
       </HStack>}
     >
-      <Textarea
-        id={`account-note-${account.id}`}
-        className='mx-[-8px] w-full resize-none rounded-md border-0 bg-transparent p-2 text-sm text-gray-800 transition-colors placeholder:text-gray-600 focus:border-0 focus:bg-white focus:shadow-none focus:ring-0 motion-reduce:transition-none dark:text-white dark:placeholder:text-gray-600 focus:dark:bg-primary-900'
-        placeholder={intl.formatMessage(messages.placeholder)}
-        value={value || ''}
-        onChange={handleChange}
-        ref={textarea}
-      />
+      <div className='-mx-2'>
+        <Textarea
+          id={`account-note-${account.id}`}
+          theme='transparent'
+          placeholder={intl.formatMessage(messages.placeholder)}
+          value={value || ''}
+          onChange={handleChange}
+          ref={textarea}
+          autoGrow
+        />
+      </div>
     </Widget>
   );
 };