From 41d160dca9abb6652f3e5adf0e7ace3f481f6148 Mon Sep 17 00:00:00 2001
From: Pranav Rajveer <rajveer23pr@gmail.com>
Date: Mon, 11 Mar 2024 14:36:14 +0530
Subject: [PATCH] fix: added the borders and made it look decent, padding and
 all.

---
 src/components/NotionRenderer.tsx           |  7 ++++++-
 src/components/Signin.tsx                   | 14 +++++++-------
 src/components/VideoPlayer2.tsx             |  2 +-
 src/components/comment/CommentInputForm.tsx |  2 +-
 src/components/comment/Comments.tsx         | 11 +++++++----
 5 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/NotionRenderer.tsx b/src/components/NotionRenderer.tsx
index 138bc1d34..5469d0d2e 100644
--- a/src/components/NotionRenderer.tsx
+++ b/src/components/NotionRenderer.tsx
@@ -31,7 +31,12 @@ export const NotionRenderer = ({ id }: { id: string }) => {
   return (
     <div>
       <div style={{}}>
-        <NotionRendererLib recordMap={data} fullPage={true} darkMode={true} className='z-10'/>
+        <NotionRendererLib
+          recordMap={data}
+          fullPage={true}
+          darkMode={true}
+          className="z-10"
+        />
       </div>
     </div>
   );
diff --git a/src/components/Signin.tsx b/src/components/Signin.tsx
index c858ee292..70358f58f 100644
--- a/src/components/Signin.tsx
+++ b/src/components/Signin.tsx
@@ -24,10 +24,10 @@ const Signin = () => {
   const password = useRef('');
 
   const handleSubmit = async (e?: React.FormEvent<HTMLButtonElement>) => {
-    if(e){
+    if (e) {
       e.preventDefault();
     }
-    
+
     if (!email.current || !password.current) {
       setRequiredError({
         emailReq: email.current ? false : true,
@@ -36,7 +36,6 @@ const Signin = () => {
       return;
     }
 
-
     const res = await signIn('credentials', {
       username: email.current,
       password: password.current,
@@ -96,12 +95,13 @@ const Signin = () => {
                     }));
                     password.current = e.target.value;
                   }}
-                  onKeyDown={async (e)=>{
-                    if(e.key === "Enter"){
+                  onKeyDown={async (e) => {
+                    if (e.key === 'Enter') {
                       setIsPasswordVisible(false);
                       handleSubmit();
-                    }}}
-                  />
+                    }
+                  }}
+                />
                 <button
                   className="inset-y-0 right-0 flex items-center px-4 text-gray-600"
                   onClick={togglePasswordVisibility}
diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx
index c2e8e31b2..a1bebf547 100644
--- a/src/components/VideoPlayer2.tsx
+++ b/src/components/VideoPlayer2.tsx
@@ -284,7 +284,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
     }
   }, [searchParams, playerRef.current]);
   return (
-    <div 
+    <div
       data-vjs-player
       className="mx-auto md:max-w-[calc(100vw-3rem)] 2xl:max-w-[calc(100vw-17rem)]"
     >
diff --git a/src/components/comment/CommentInputForm.tsx b/src/components/comment/CommentInputForm.tsx
index 5e3fb5999..f450b3cbc 100644
--- a/src/components/comment/CommentInputForm.tsx
+++ b/src/components/comment/CommentInputForm.tsx
@@ -43,7 +43,7 @@ const CommentInputForm = ({
       <textarea
         id="content"
         name="content"
-        className="min-h-[50px] rounded-md dark:bg-gray-800 p-2"
+        className="min-h-[50px] rounded-md dark:bg-gray-800 border-2 text-muted-foreground p-2 "
         placeholder="Add a public comment..."
       />
       <FormErrors id="content" errors={fieldErrors} />
diff --git a/src/components/comment/Comments.tsx b/src/components/comment/Comments.tsx
index c2a0fbd7f..047396611 100644
--- a/src/components/comment/Comments.tsx
+++ b/src/components/comment/Comments.tsx
@@ -109,12 +109,12 @@ const Comments = async ({
           </div>
         </div>
       </CardHeader>
-      <CardContent className="p-0 lg:p-6">
+      <CardContent className="p-0 lg:p-8 border dark:border-primary-darker rounded-md">
         <CommentInputForm
           contentId={content.id}
           parentId={data?.parentComment?.id}
         />
-        <div className="mb-5 flex mt-5">
+        <div className="mb-5 flex">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
@@ -213,7 +213,10 @@ const Comments = async ({
         </div>
         <div className="grid gap-6 max-h-[400px] overflow-y-auto">
           {data.comments.map((c) => (
-            <div className="text-sm flex items-start gap-4 w-full" key={c.id}>
+            <div
+              className="text-sm flex items-start gap-4 w-full border p-4 rounded-md"
+              key={c.id}
+            >
               <div className="flex items-start gap-4 w-full">
                 <Avatar className="w-10 h-10 border">
                   <AvatarImage alt="@shadcn" src="/placeholder-user.jpg" />
@@ -272,7 +275,7 @@ const Comments = async ({
           ))}
         </div>
       </CardContent>
-      <CardFooter>
+      <CardFooter className="mt-2">
         <Pagination dataLength={data.comments.length} />
       </CardFooter>
     </Card>