Comment submit button UI

client/src/components/CommentsModule.tsx

@@ -6,6 +6,8 @@ import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
 import instance from '../security/http';
 import { useNavigate, useParams } from "react-router-dom";
 import { retrieveUserInformation } from "../security/users";
+import { Button } from "@nextui-org/react";
+import { PaperAirplaneIcon } from "../icons";
 
 
 const validationSchema = Yup.object({
@@ -56,15 +58,22 @@ export default function CommentsModule() {
                         onSubmit={submitComment}
                     >
                         {({ isValid, dirty }) => (
-                            <Form className="flex flex-col gap-4">
+                            <Form>
+                                <div className="relative">
                                 <NextUIFormikTextarea
                                     label="Comment"
                                     name="content"
                                     placeholder="Write your comment here"
                                 />
-                                <button type="submit" disabled={!isValid || !dirty}>
-                                    Submit
-                                </button>
+                                <div className="flex justify-end my-2">
+                                    <Button isIconOnly
+                                        type="submit" 
+                                        disabled={!isValid || !dirty}
+                                        className="bg-primary-950 text-white">
+                                        <PaperAirplaneIcon />
+                                    </Button>
+                                </div>
+                                </div>
                             </Form>
                         )}
                     </Formik>

client/src/icons.tsx

@@ -614,3 +614,21 @@ export const TrophyIcon = () => {
     </svg>
   )
 }
+
+export const PaperAirplaneIcon = () => {
+  return (
+    <svg 
+      xmlns="http://www.w3.org/2000/svg" 
+      fill="none" viewBox="0 0 24 24" 
+      stroke-width="1.5"
+      stroke="currentColor"
+      className="size-6"
+      >
+        <path 
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" 
+        />
+      </svg>
+  )
+}