fix(UI):conversation,settings

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'
         }`}
       >

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>

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}>

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 }) {

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>
         );
       }}

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>

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>