From 894e5cacc2145f0b587429606a35b3c14108bf74 Mon Sep 17 00:00:00 2001
From: rbakkalian <71007207+rbakkalian@users.noreply.github.com>
Date: Fri, 10 May 2024 23:49:38 +0400
Subject: [PATCH] Styled conversation page with all its components (#39)

---
 frontend/src/pages/Conversation/Conversation.tsx    | 12 ++++++++----
 .../pages/Conversation/Discussions/Discussion.tsx   |  2 +-
 .../pages/Conversation/Discussions/Discussions.tsx  |  8 +++++---
 frontend/src/pages/Conversation/Navbar/Navbar.tsx   | 13 +++++++------
 frontend/src/pages/Conversation/Prompt/Prompt.tsx   | 10 +++++++---
 frontend/src/ui/Grid/Grid.tsx                       |  2 +-
 frontend/src/ui/Modal/Modal.tsx                     |  3 +--
 7 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/frontend/src/pages/Conversation/Conversation.tsx b/frontend/src/pages/Conversation/Conversation.tsx
index 0372004..0d4c92c 100644
--- a/frontend/src/pages/Conversation/Conversation.tsx
+++ b/frontend/src/pages/Conversation/Conversation.tsx
@@ -12,14 +12,18 @@ function Conversation() {
   if (!id) return null;
 
   return (
-    <Grid className="h-full" gridTemplateColumns="0.15fr 0.85fr" gridTemplateRows="85% 15%">
-      <GridItem gridColumn="1/2" gridRow="1/3" className="bg-amber-900">
+    <Grid
+      className="h-screen bg-neutral-50 dark:bg-neutral-900"
+      gridTemplateColumns="20% 80%"
+      gridTemplateRows="90.30% 9.70%"
+    >
+      <GridItem gridColumn="1" gridRow="1/3" className="bg-neutral-900 ml-2 mr-2">
         <Navbar id={id} />
       </GridItem>
-      <GridItem gridColumn="2" gridRow="1/2" className="bg-amber-400 overflow-auto">
+      <GridItem gridColumn="2" gridRow="1" className="bg-neutral-800 overflow-auto">
         <Discussions id={id} />
       </GridItem>
-      <GridItem gridColumn="2" gridRow="2" className="bg-warmGray-400">
+      <GridItem gridColumn="2" gridRow="2" className="bg-neutral-800">
         <Prompt id={id} />
       </GridItem>
     </Grid>
diff --git a/frontend/src/pages/Conversation/Discussions/Discussion.tsx b/frontend/src/pages/Conversation/Discussions/Discussion.tsx
index 80d7d67..3545f37 100644
--- a/frontend/src/pages/Conversation/Discussions/Discussion.tsx
+++ b/frontend/src/pages/Conversation/Discussions/Discussion.tsx
@@ -7,7 +7,7 @@ interface DiscussionProps {
 
 export default function Discussion({ role, text }: DiscussionProps) {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col text-white">
       <div className="font-bold">{role === PromptRole.User ? "YOU" : "Chatto"}</div>
       <div>{text}</div>
     </div>
diff --git a/frontend/src/pages/Conversation/Discussions/Discussions.tsx b/frontend/src/pages/Conversation/Discussions/Discussions.tsx
index 7643d7a..5f050bc 100644
--- a/frontend/src/pages/Conversation/Discussions/Discussions.tsx
+++ b/frontend/src/pages/Conversation/Discussions/Discussions.tsx
@@ -11,10 +11,12 @@ export default function Discussions({ id }: DiscussionProps) {
   const { data, isLoading, isError } = useGetConversation(id);
 
   return (
-    <div className="p-4 flex flex-col gap-6">
+    <div className="p-4 flex flex-col gap-6 bg-neutral-50 dark:bg-neutral-800">
       {isLoading && !data && <SpinLoader size="l" />}
-      {isError && <div className="text-3xl">Something went Wrong</div>}
-      {data?.discussions?.length === 0 && !isError && !isLoading && <div className="text-3xl">Ask me Questions</div>}
+      {isError && <div className="text-3xl text-white">Something Went Wrong</div>}
+      {data?.discussions?.length === 0 && !isError && !isLoading && (
+        <div className="text-3xl text-white">Ask me Questions</div>
+      )}
       {data?.discussions?.map((discussion) => (
         <Discussion key={discussion.id} text={discussion.text} role={discussion.promptRole} />
       ))}
diff --git a/frontend/src/pages/Conversation/Navbar/Navbar.tsx b/frontend/src/pages/Conversation/Navbar/Navbar.tsx
index 44f6fc6..b0069bd 100644
--- a/frontend/src/pages/Conversation/Navbar/Navbar.tsx
+++ b/frontend/src/pages/Conversation/Navbar/Navbar.tsx
@@ -21,23 +21,23 @@ function Navbar({ id }: NavbarProps) {
   };
 
   return (
-    <div className="p-2 h-full flex flex-col items-center">
-      <Button className="my-4 w-full" onClick={() => navigate("/conversation")}>
-        Create a Conversation
+    <div className="bg-neutral-50 p-2 h-full flex flex-col items-center dark:bg-neutral-900">
+      <Button className="my-4 w-full bg-blue-500 text-white" onClick={() => navigate("/conversation")}>
+        New Chat
       </Button>
       <div
         className={clsx("flex gap-2 flex-col overflow-auto flex-1 w-full items-center", {
           "justify-center": isFetching || data?.length === 0,
         })}
       >
-        {isError && <Button>Something went Wrong</Button>}
+        {isError && <p className="text-red-600">Something Went Wrong</p>}
         {isFetching && <SpinLoader size="l" />}
         {!isFetching && data && data.length === 0 && <div>No Conversation</div>}
         {data?.map((conversation) => (
           <button
             type="button"
-            className={clsx("truncate border-2 p-2 flex justify-between items-center w-full min-h-8", {
-              "border-red-600": conversation.id === id,
+            className={clsx("truncate border-2 p-2 text-white flex justify-between items-center w-full min-h-8", {
+              "border-gray-600": conversation.id === id,
             })}
             key={conversation.id}
             onClick={() => onConversationClick(conversation.id)}
@@ -48,6 +48,7 @@ function Navbar({ id }: NavbarProps) {
                 e.stopPropagation();
                 setModalConversationId(conversation.id);
               }}
+              className="text-white"
             >
               Edit
             </Button>
diff --git a/frontend/src/pages/Conversation/Prompt/Prompt.tsx b/frontend/src/pages/Conversation/Prompt/Prompt.tsx
index 5db6a9d..7d7807a 100644
--- a/frontend/src/pages/Conversation/Prompt/Prompt.tsx
+++ b/frontend/src/pages/Conversation/Prompt/Prompt.tsx
@@ -19,17 +19,21 @@ function Prompt({ id }: PromptProps) {
   };
 
   return (
-    <div className="p-4 flex h-full gap-2">
+    <div
+      className="ml-12 mr-12 h-auto gap-2 flex items-center justify-center bg-neutral-50 dark:bg-neutral-800 border
+      border-gray-300 dark:border-gray-700 rounded-full"
+    >
       <TextInput
-        className="flex-1 h-full resize-none"
+        className="flex-1 h-full resize-none bg-transparent text-white rounded-l-full"
         value={textValue}
         onInput={(e) => setTextValue(e.currentTarget.value)}
         disabled={isPending}
+        placeholder="Enter your message..."
       />
       <Button
         disabled={isPending || !textValue}
         onClick={submitQuestion}
-        className="flex items-center justify-center w-40 gap-2"
+        className="w-20 bg-blue-500 text-white rounded-full flex items-center justify-center"
       >
         {isPending && <SpinLoader size="xs" />}
         Submit
diff --git a/frontend/src/ui/Grid/Grid.tsx b/frontend/src/ui/Grid/Grid.tsx
index 116e135..d39e70d 100644
--- a/frontend/src/ui/Grid/Grid.tsx
+++ b/frontend/src/ui/Grid/Grid.tsx
@@ -20,7 +20,7 @@ type GridApplicationProps = GridApplicationCondProps &
 
 export default function Grid({ children, className, ...props }: GridApplicationProps) {
   return (
-    <div className={twMerge("grid w-full h-full", className)} style={props}>
+    <div className={twMerge("grid w-full h-full bg-neutral-50 dark:bg-neutral-900", className)} style={props}>
       {children}
     </div>
   );
diff --git a/frontend/src/ui/Modal/Modal.tsx b/frontend/src/ui/Modal/Modal.tsx
index bbdee0b..ae19e82 100644
--- a/frontend/src/ui/Modal/Modal.tsx
+++ b/frontend/src/ui/Modal/Modal.tsx
@@ -18,8 +18,7 @@ export default function Modal({ open, onClose, title, children }: FrameProps) {
       <div className="relative w-full max-w-sm mx-auto mt-8">
         <button
           type="button"
-          className="absolute right-0 flex justify-center
-          h-8 w-8 bg-gray-600 cursor-pointer shadow-xl"
+          className="absolute right-0 flex justify-center h-8 w-8 bg-gray-600 cursor-pointer shadow-xl"
           onClick={onClose}
         >
           <span className="text-2xl leading-7 select-none">&times;</span>