From a6c4ac724ee2cb91cd999837dd0598d070bd8282 Mon Sep 17 00:00:00 2001
From: Maruf Bepary <bepary71@gmail.com>
Date: Thu, 11 Dec 2025 11:37:05 +0100
Subject: [PATCH] Improved design of the comment intput - Instead of using
 overlay for the action section the component is split into 2 sections - The
 larger section at the top is for the text area - The button section is for
 the actions - Added clear button - Added icons

---
 components/posts/comments/CommentInput.tsx | 92 +++++++++++++---------
 1 file changed, 56 insertions(+), 36 deletions(-)

diff --git a/components/posts/comments/CommentInput.tsx b/components/posts/comments/CommentInput.tsx
index 6ebb2a3..367bf32 100644
--- a/components/posts/comments/CommentInput.tsx
+++ b/components/posts/comments/CommentInput.tsx
@@ -1,6 +1,7 @@
 import ProfileModal from "@/components/modal/profile/ProfileModal";
 import AuthButtons from "@/components/navbar/right-content/AuthButtons";
-import { Flex, Textarea, Button, Text, Stack } from "@chakra-ui/react";
+import { Flex, Textarea, Button, Text, Stack, Icon } from "@chakra-ui/react";
+import { LuSend, LuTrash } from "react-icons/lu";
 import { User } from "firebase/auth";
 import React, { useState } from "react";
 
@@ -73,45 +74,64 @@ const CommentInput: React.FC<CommentInputProps> = ({
             </Text>
           </Stack>
 
-          <Textarea
-            value={commentText}
-            onChange={(event) => setCommentText(event.target.value)}
-            placeholder="Comment"
-            fontSize="10pt"
-            borderRadius={10}
-            minHeight="140px"
-            padding={4}
-            pb={10}
-            bg={{ base: "gray.50", _dark: "gray.800" }}
+          <Flex
+            direction="column"
+            bg={{ base: "white", _dark: "gray.800" }}
+            borderRadius="xl"
+            border="1px solid"
             borderColor={{ base: "gray.200", _dark: "gray.600" }}
-            _placeholder={{ color: "gray.500" }}
-            _focus={{
-              outline: "none",
-              bg: { base: "white", _dark: "gray.800" },
-              border: "1px solid",
-              borderColor: { base: "red.500", _dark: "red.400" },
+            overflow="hidden"
+            _focusWithin={{
+              borderColor: { base: "black", _dark: "gray.200" },
+              boxShadow: {
+                base: "0 0 0 1px black",
+                _dark: "0 0 0 1px gray.200",
+              },
             }}
-          />
-
-          <Flex
-            position="absolute"
-            left="1px"
-            right={0.1}
-            bottom="1px"
-            justify="flex-end"
-            bg={{ base: "gray.100", _dark: "gray.700" }}
-            p="6px 8px"
-            borderRadius="0px 0px 10px 10px"
-            zIndex="1"
           >
-            <Button
-              height="30px"
-              disabled={!commentText.length}
-              loading={createLoading}
-              onClick={() => onCreateComment(commentText)}
+            <Textarea
+              value={commentText}
+              onChange={(event) => setCommentText(event.target.value)}
+              placeholder="What are your thoughts?"
+              fontSize="11pt"
+              minHeight="100px"
+              border="none"
+              _focus={{ outline: "none", border: "none", boxShadow: "none" }}
+              p={4}
+              bg="transparent"
+              _placeholder={{ color: "gray.500" }}
+            />
+
+            <Flex
+              bg={{ base: "gray.50", _dark: "gray.700" }}
+              p={2}
+              justify="flex-end"
+              align="center"
+              borderTop="1px solid"
+              borderColor={{ base: "gray.100", _dark: "gray.600" }}
             >
-              Comment
-            </Button>
+              <Stack direction="row" gap={2} align="center">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setCommentText("")}
+                  disabled={!commentText.length}
+                >
+                  <Icon as={LuTrash} mr={2} />
+                  Clear
+                </Button>
+
+                <Button
+                  disabled={!commentText.length}
+                  loading={createLoading}
+                  borderRadius={"xl"}
+                  onClick={() => onCreateComment(commentText)}
+                >
+                  <Icon as={LuSend} mr={2} />
+                  Comment
+                </Button>
+              </Stack>
+            </Flex>
           </Flex>
         </>
       ) : (