LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-12-14 11:51:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(shared): UI

Browse Source
This commit is contained in:
ManishMadan2882
2024-07-30 01:13:47 +05:30
parent a58369fbb1
commit ad30a8476c
8 changed files with 138 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/conversation/Conversation.tsx
View File

@@ -206,7 +206,7 @@ export default function Conversation() {
onClick={() => { onClick={() => {
setShareModalState(true); 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 <img
className="m-2 h-5 w-5 filter dark:invert" className="m-2 h-5 w-5 filter dark:invert"

7
frontend/src/conversation/ConversationTile.tsx
View File

@@ -79,10 +79,10 @@ export default function ConversationTile({
setIsEdit(false); setIsEdit(false);
} }
return ( return (
<>
<div <div
ref={tileRef} ref={tileRef}
onMouseEnter={() => { onMouseEnter={() => {
setOpen(false);
setIsHovered(true); setIsHovered(true);
}} }}
onMouseLeave={() => { onMouseLeave={() => {
@@ -93,7 +93,7 @@ export default function ConversationTile({
selectConversation(conversation.id); 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] ${ 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]' ? 'bg-gray-100 dark:bg-[#28292E]'
: '' : ''
}`} }`}
@@ -211,6 +211,7 @@ export default function ConversationTile({
)} )}
</div> </div>
)} )}
</div>
<ConfirmationModal <ConfirmationModal
message={t('convTile.deleteWarning')} message={t('convTile.deleteWarning')}
modalState={deleteModalState} modalState={deleteModalState}
@@ -227,6 +228,6 @@ export default function ConversationTile({
conversationId={conversation.id} conversationId={conversation.id}
/> />
)} )}
</div> </>
); );
} }

2
frontend/src/modals/ConfirmationModal.tsx
View File

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

11
frontend/src/modals/ShareConversationModal.tsx
View File

@@ -1,4 +1,4 @@
import { SyntheticEvent, useState } from 'react'; import { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { import {
@@ -117,10 +117,7 @@ export const ShareConversationModal = ({
}; };
return ( 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]"> <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}> <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
<img className="filter dark:invert" src={Exit} /> <img className="filter dark:invert" src={Exit} />
@@ -173,7 +170,7 @@ export const ShareConversationModal = ({
</span> </span>
{status === 'fetched' ? ( {status === 'fetched' ? (
<button <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}`)} onClick={() => handleCopyKey(`${domain}/share/${identifier}`)}
> >
{isCopied {isCopied
@@ -182,7 +179,7 @@ export const ShareConversationModal = ({
</button> </button>
) : ( ) : (
<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={() => { onClick={() => {
shareCoversationPublicly(allowPrompt); shareCoversationPublicly(allowPrompt);
}} }}