From bd8bb4922bb220c9b2c3fc9245cad2f047d1f0bc Mon Sep 17 00:00:00 2001
From: Rykkel <220993G@mymail.nyp.edu.sg>
Date: Wed, 31 Jul 2024 20:13:27 +0800
Subject: [PATCH] Comment submit button UI

---
 client/src/components/CommentsModule.tsx | 17 +++++++++++++----
 client/src/icons.tsx                     | 20 +++++++++++++++++++-
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/client/src/components/CommentsModule.tsx b/client/src/components/CommentsModule.tsx
index 9277ba1..1c1c214 100644
--- a/client/src/components/CommentsModule.tsx
+++ b/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>
diff --git a/client/src/icons.tsx b/client/src/icons.tsx
index 75c50ed..6d99a45 100644
--- a/client/src/icons.tsx
+++ b/client/src/icons.tsx
@@ -613,4 +613,22 @@ export const TrophyIcon = () => {
       />
     </svg>
   )
-}
\ No newline at end of file
+}
+
+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>
+  )
+}