From f9ee5031fde6ee559e3c73b3e52ae135a6a21cdd Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Wed, 3 Aug 2022 15:43:03 -0700
Subject: [PATCH] Update editor style for send button

---
 web/components/editor.tsx             | 23 ++++++++---------------
 web/components/feed/feed-comments.tsx | 22 ++++++++--------------
 2 files changed, 16 insertions(+), 29 deletions(-)

diff --git a/web/components/editor.tsx b/web/components/editor.tsx
index 868c2129..f71e8589 100644
--- a/web/components/editor.tsx
+++ b/web/components/editor.tsx
@@ -50,7 +50,7 @@ export function useTextEditor(props: {
   const editorClass = clsx(
     proseClass,
     !simple && 'min-h-[6em]',
-    'resize-none outline-none border-none pt-3 px-4 focus:ring-0'
+    'outline-none pt-2 px-4'
   )
 
   const editor = useEditor(
@@ -123,8 +123,9 @@ function isValidIframe(text: string) {
 export function TextEditor(props: {
   editor: Editor | null
   upload: ReturnType<typeof useUploadMutation>
+  children?: React.ReactNode // additional toolbar buttons
 }) {
-  const { editor, upload } = props
+  const { editor, upload, children } = props
   const [iframeOpen, setIframeOpen] = useState(false)
 
   return (
@@ -146,20 +147,10 @@ export function TextEditor(props: {
             images!
           </FloatingMenu>
         )}
-        <div className="overflow-hidden rounded-lg border border-gray-300 shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
+        <div className="rounded-lg border border-gray-300 shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
           <EditorContent editor={editor} />
-          {/* Spacer element to match the height of the toolbar */}
-          <div className="py-2" aria-hidden="true">
-            {/* Matches height of button in toolbar (1px border + 36px content height) */}
-            <div className="py-px">
-              <div className="h-9" />
-            </div>
-          </div>
-        </div>
-
-        {/* Toolbar, with buttons for image and embeds */}
-        <div className="absolute inset-x-0 bottom-0 flex justify-between py-2 pl-3 pr-2">
-          <div className="flex items-center space-x-5">
+          {/* Toolbar, with buttons for images and embeds */}
+          <div className="flex h-9 items-center gap-5 pl-4 pr-1">
             <div className="flex items-center">
               <FileUploadButton
                 onFiles={upload.mutate}
@@ -184,6 +175,8 @@ export function TextEditor(props: {
                 <span className="sr-only">Embed an iframe</span>
               </button>
             </div>
+            <div className="ml-auto" />
+            {children}
           </div>
         </div>
       </div>
diff --git a/web/components/feed/feed-comments.tsx b/web/components/feed/feed-comments.tsx
index 07a5db6d..0a7b3a90 100644
--- a/web/components/feed/feed-comments.tsx
+++ b/web/components/feed/feed-comments.tsx
@@ -505,29 +505,23 @@ export function CommentInputTextArea(props: {
 
   return (
     <>
-      <Row className="gap-1.5 text-gray-700">
-        <TextEditor editor={editor} upload={upload} />
-        <Col className={clsx('relative justify-end')}>
+      <div>
+        <TextEditor editor={editor} upload={upload}>
           {user && !isSubmitting && (
             <button
-              className={clsx(
-                'btn btn-ghost btn-sm absolute right-2 bottom-2 flex-row pl-2 capitalize',
-                (!editor || editor.isEmpty) &&
-                  'pointer-events-none text-gray-500'
-              )}
+              className="btn btn-ghost btn-sm px-2 disabled:bg-inherit disabled:text-gray-300"
+              disabled={!editor || editor.isEmpty}
               onClick={submit}
             >
-              <PaperAirplaneIcon
-                className={'m-0 min-w-[22px] rotate-90 p-0 '}
-                height={25}
-              />
+              <PaperAirplaneIcon className="m-0 h-[25px] min-w-[22px] rotate-90 p-0" />
             </button>
           )}
+
           {isSubmitting && (
             <LoadingIndicator spinnerClassName={'border-gray-500'} />
           )}
-        </Col>
-      </Row>
+        </TextEditor>
+      </div>
       <Row>
         {!user && (
           <button