fix(shared): UI

frontend/src/conversation/Conversation.tsx

@@ -206,7 +206,7 @@ export default function Conversation() {
             onClick={() => {
               setShareModalState(true);
             }}
-            className="fixed top-4 right-20 z-30 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
+            className="fixed top-4 right-20 z-0 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
           >
             <img
               className="m-2 h-5 w-5 filter dark:invert"

frontend/src/conversation/ConversationTile.tsx

@@ -79,10 +79,10 @@ export default function ConversationTile({
     setIsEdit(false);
   }
   return (
+    <>
       <div
         ref={tileRef}
         onMouseEnter={() => {
-        setOpen(false);
           setIsHovered(true);
         }}
         onMouseLeave={() => {
@@ -93,7 +93,7 @@ export default function ConversationTile({
             selectConversation(conversation.id);
         }}
         className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
-        conversationId === conversation.id || isOpen
+          conversationId === conversation.id || isOpen || isHovered
             ? 'bg-gray-100 dark:bg-[#28292E]'
             : ''
         }`}
@@ -211,6 +211,7 @@ export default function ConversationTile({
             )}
           </div>
         )}
+      </div>
       <ConfirmationModal
         message={t('convTile.deleteWarning')}
         modalState={deleteModalState}
@@ -227,6 +228,6 @@ export default function ConversationTile({
           conversationId={conversation.id}
         />
       )}
-    </div>
+    </>
   );
 }

frontend/src/locale/en.json

@@ -108,7 +108,7 @@
       "label": "Create a public page to share",
       "note": "Source document, personal information and further conversation will remain private",
       "create": "Create",
-      "option":"Allow users to prompt further"
+      "option": "Allow users to prompt further"
     }
   },
   "sharedConv": {

frontend/src/locale/es.json

@@ -108,7 +108,7 @@
       "label": "Crear una página pública para compartir",
       "note": "El documento original, la información personal y las conversaciones posteriores permanecerán privadas",
       "create": "Crear",
-      "option":"Permitir a los usuarios realizar más consultas."
+      "option": "Permitir a los usuarios realizar más consultas."
     }
   },
   "sharedConv": {

frontend/src/locale/jp.json

@@ -108,7 +108,7 @@
       "label": "共有ページを作成して共有する",
       "note": "ソースドキュメント、個人情報、および以降の会話は非公開のままになります",
       "create": "作成",
-      "option":"ユーザーがより多くのクエリを実行できるようにします。"
+      "option": "ユーザーがより多くのクエリを実行できるようにします。"
     }
   },
   "sharedConv": {

frontend/src/locale/zh.json

@@ -108,7 +108,7 @@
       "label": "创建用于分享的公共页面",
       "note": "源文档、个人信息和后续对话将保持私密",
       "create": "创建",
-      "option":"允许用户进行更多查询。"
+      "option": "允许用户进行更多查询。"
     }
   },
   "sharedConv": {

frontend/src/modals/ConfirmationModal.tsx

@@ -1,4 +1,3 @@
-import { SyntheticEvent } from 'react';
 import Exit from '../assets/exit.svg';
 import { ActiveState } from '../models/misc';
 import { useTranslation } from 'react-i18next';
@@ -22,7 +21,6 @@ function ConfirmationModal({
   const { t } = useTranslation();
   return (
     <article
-      onClick={(event: SyntheticEvent) => event.stopPropagation()}
       className={`${
         modalState === 'ACTIVE' ? 'visible' : 'hidden'
       } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha`}

frontend/src/modals/ShareConversationModal.tsx

@@ -1,4 +1,4 @@
-import { SyntheticEvent, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import {
@@ -117,10 +117,7 @@ export const ShareConversationModal = ({
   };
 
   return (
-    <div
+    <div className="fixed top-0 left-0 z-40 flex h-screen w-screen cursor-default items-center justify-center bg-gray-alpha bg-opacity-50 text-chinese-black dark:text-silver">
-      onClick={(event: SyntheticEvent) => event.stopPropagation()}
-      className="z-100 fixed top-0 left-0 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50 text-chinese-black dark:text-silver"
-    >
       <div className="relative w-11/12 rounded-2xl bg-white p-10 dark:bg-outer-space sm:w-[512px]">
         <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
           <img className="filter dark:invert" src={Exit} />
@@ -173,7 +170,7 @@ export const ShareConversationModal = ({
             </span>
             {status === 'fetched' ? (
               <button
-                className="my-1 h-10 w-28 rounded-full border border-solid border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white"
+                className="my-1 h-10 w-28 rounded-full border border-solid  bg-purple-30 p-2 text-sm text-white hover:bg-[#6F3FD1]"
                 onClick={() => handleCopyKey(`${domain}/share/${identifier}`)}
               >
                 {isCopied
@@ -182,7 +179,7 @@ export const ShareConversationModal = ({
               </button>
             ) : (
               <button
-                className="my-1 flex h-10 w-28 items-center justify-evenly rounded-full  border border-solid border-purple-30 p-2 text-center text-sm font-normal text-purple-30 hover:bg-purple-30 hover:text-white"
+                className="my-1 flex h-10 w-28 items-center justify-evenly rounded-full  border border-solid bg-purple-30 p-2 text-center text-sm font-normal text-white hover:bg-[#6F3FD1]"
                 onClick={() => {
                   shareCoversationPublicly(allowPrompt);
                 }}