From 7a2e4911991521adc0dd92afb80c47523d806cf5 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 7 May 2024 20:37:05 +0530
Subject: [PATCH] fix(UI):conversation,settings

---
 frontend/src/App.tsx                             | 2 +-
 frontend/src/Modal/index.tsx                     | 6 +++---
 frontend/src/conversation/Conversation.tsx       | 6 +++---
 frontend/src/conversation/ConversationBubble.tsx | 2 +-
 frontend/src/preferences/DeleteConvModal.tsx     | 5 ++---
 frontend/src/settings/Documents.tsx              | 4 ++--
 frontend/src/settings/General.tsx                | 4 ++--
 7 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 987f38e..4a8ef6c 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -19,7 +19,7 @@ export default function App() {
       <div
         className={`transition-all duration-200 ${
           !isMobile
-            ? `ml-0 ${!navOpen ? '-mt-5 md:mx-auto lg:mx-auto' : 'md:ml-72'}`
+            ? `ml-0 ${!navOpen ? 'md:mx-auto lg:mx-auto' : 'md:ml-72'}`
             : 'ml-0 md:ml-16'
         }`}
       >
diff --git a/frontend/src/Modal/index.tsx b/frontend/src/Modal/index.tsx
index bc5f025..a13d703 100644
--- a/frontend/src/Modal/index.tsx
+++ b/frontend/src/Modal/index.tsx
@@ -19,18 +19,18 @@ const Modal = (props: ModalProps) => {
       } absolute z-30  h-screen w-screen  bg-gray-alpha`}
     >
       {props.render()}
-      <div className=" mx-auto flex w-[90vw] max-w-lg flex-row-reverse rounded-b-lg bg-white pb-5 pr-5  shadow-lg">
+      <div className=" mx-auto flex w-[90vw] max-w-lg flex-row-reverse rounded-b-lg bg-white dark:bg-outer-space pb-5 pr-5  shadow-lg">
         <div>
           <button
             onClick={() => props.handleSubmit()}
-            className="ml-auto h-10 w-20 rounded-3xl bg-violet-800 text-white transition-all hover:bg-violet-700"
+            className="ml-auto h-10 w-20 rounded-3xl bg-violet-800 text-white dark:text-silver transition-all hover:bg-violet-700"
           >
             {props.textDelete ? 'Delete' : 'Save'}
           </button>
           {props.isCancellable && (
             <button
               onClick={() => props.handleCancel && props.handleCancel()}
-              className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
+              className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
             >
               Cancel
             </button>
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index b4efe80..c6632da 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -133,7 +133,7 @@ export default function Conversation() {
     <div
       onWheel={handleUserInterruption}
       onTouchMove={handleUserInterruption}
-      className="flex w-full flex-col justify-center p-4 md:flex-row"
+      className="flex w-full justify-center p-4 h-full"
     >
       {queries.length > 0 && !hasScrolledToLast && (
         <button
@@ -144,13 +144,13 @@ export default function Conversation() {
           <img
             src={ArrowDown}
             alt="arrow down"
-            className="h4- w-4 opacity-50 md:h-5 md:w-5"
+            className="h-4 w-4 opacity-50 md:h-5 md:w-5"
           />
         </button>
       )}
 
       {queries.length > 0 && (
-        <div className="mt-20 mb-9 flex flex-col transition-all md:w-3/4">
+        <div className="w-full md:w-8/12">
           {queries.map((query, index) => {
             return (
               <Fragment key={index}>
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index e8caf2f..7bd26f2 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -88,7 +88,7 @@ const ConversationBubble = forwardRef<
               <img src={Alert} alt="alert" className="mr-2 inline" />
             )}
             <ReactMarkdown
-              className="whitespace-pre-wrap break-words"
+              className="whitespace-pre-wrap break-words leading-normal"
               remarkPlugins={[remarkGfm]}
               components={{
                 code({ node, inline, className, children, ...props }) {
diff --git a/frontend/src/preferences/DeleteConvModal.tsx b/frontend/src/preferences/DeleteConvModal.tsx
index f1a60e1..ba7ed06 100644
--- a/frontend/src/preferences/DeleteConvModal.tsx
+++ b/frontend/src/preferences/DeleteConvModal.tsx
@@ -49,12 +49,11 @@ export default function DeleteConvModal({
         return (
           <article
             ref={modalRef}
-            className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-t-lg bg-white p-6 shadow-lg"
+            className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-t-lg bg-white dark:bg-outer-space dark:text-silver p-6 shadow-lg"
           >
-            <p className="text-xl text-jet">
+            <p className="text-xl text-jet dark:text-silver">
               Are you sure you want to delete all the conversations?
             </p>
-            <p className="text-md leading-6 text-gray-500"></p>
           </article>
         );
       }}
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index bccefd3..e9d9c1c 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -8,8 +8,8 @@ const Documents: React.FC<DocumentsProps> = ({
   return (
     <div className="mt-8">
       <div className="flex flex-col">
-        <div className="mt-[27px] w-max overflow-x-auto rounded-xl border dark:border-chinese-silver">
-          <table className="block w-full table-auto content-center justify-center text-center dark:text-bright-gray">
+        <div className="w-full overflow-x-auto">
+          <table className="block w-max table-auto content-center justify-center rounded-xl border text-center dark:border-chinese-silver dark:text-bright-gray">
             <thead>
               <tr>
                 <th className="border-r p-4 md:w-[244px]">Document Name</th>
diff --git a/frontend/src/settings/General.tsx b/frontend/src/settings/General.tsx
index 6af23b9..6d5e85e 100644
--- a/frontend/src/settings/General.tsx
+++ b/frontend/src/settings/General.tsx
@@ -100,10 +100,10 @@ const General: React.FC = () => {
           Delete all conversations
         </p>
         <button
-          className="mt-2 flex w-full cursor-pointer items-center justify-between rounded-3xl  border-2 border-solid border-purple-30 bg-white  px-5 py-3 text-purple-30 hover:bg-purple-30 hover:text-white dark:border-chinese-silver dark:bg-transparent"
+          className="mt-2 flex w-full cursor-pointer items-center justify-between rounded-3xl  border-2 border-solid border-purple-30 px-5 py-3 text-purple-30 hover:bg-purple-30 hover:text-white"
           onClick={() => dispatch(setModalStateDeleteConv('ACTIVE'))}
         >
-          <span className="overflow-hidden text-ellipsis dark:text-bright-gray">
+          <span className="overflow-hidden text-ellipsis ">
             Delete
           </span>
         </button>