Archives/DocsGPT
2
0
Fork 0
mirror of https://github.com/arc53/DocsGPT synced 2024-11-17 21:26:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Design consistency changes, fixes arrow icon positioning in source docs dropdown

Browse Source
This commit is contained in:
DenyTwice 2023-09-23 21:31:05 +05:30
parent b2118602d9
commit ae01070b8f
6 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/About.tsx
View File

@ -4,7 +4,7 @@
export default function About() { export default function About() {
return ( return (
<div className="mx-5 grid min-h-screen md:mx-36"> <div className="mx-5 grid min-h-screen md:mx-36">
<article className=" place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-lg bg-gray-100 p-6 pt-14 pb-14 text-jet lg:p-10 xl:p-16"> <article className=" place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-6 rounded-3xl bg-gray-100 p-6 pt-14 pb-14 text-jet lg:p-10 xl:p-16">
<div className="flex items-center"> <div className="flex items-center">
<p className="mr-2 text-3xl">About DocsGPT</p> <p className="mr-2 text-3xl">About DocsGPT</p>
<p className="text-[21px]">🦖</p> <p className="text-[21px]">🦖</p>

4
frontend/src/Modal/index.tsx
View File

@ -17,11 +17,11 @@ const Modal = (props: ModalProps) => {
} absolute z-30 h-screen w-screen bg-gray-alpha`} } absolute z-30 h-screen w-screen bg-gray-alpha`}
> >
{props.render()} {props.render()}
<div className=" mx-auto flex w-[90vw] max-w-lg flex-row-reverse rounded-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 pb-5 pr-5 shadow-lg">
<div> <div>
<button <button
onClick={() => props.handleSubmit()} onClick={() => props.handleSubmit()}
className="ml-auto h-10 w-20 rounded-lg 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 transition-all hover:bg-violet-700"
> >
Save Save
</button> </button>

21
frontend/src/Navigation.tsx
View File

@ -11,7 +11,6 @@ import Link from './assets/link.svg';
import UploadIcon from './assets/upload.svg'; import UploadIcon from './assets/upload.svg';
import { ActiveState } from './models/misc'; import { ActiveState } from './models/misc';
import APIKeyModal from './preferences/APIKeyModal'; import APIKeyModal from './preferences/APIKeyModal';
import SelectDocsModal from './preferences/SelectDocsModal';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { import {
selectApiKeyStatus, selectApiKeyStatus,
@ -180,10 +179,10 @@ export default function Navigation({
className={({ isActive }) => className={({ isActive }) =>
`${ `${
isActive && conversationId === null ? 'bg-gray-3000' : '' isActive && conversationId === null ? 'bg-gray-3000' : ''
} my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100` } my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-3xl rounded-md hover:bg-gray-100`
} }
> >
<img src={Message} className="ml-2 w-5"></img> <img src={Message} className="ml-4 w-5"></img>
<p className="my-auto text-eerie-black">New Chat</p> <p className="my-auto text-eerie-black">New Chat</p>
</NavLink> </NavLink>
<div className="conversations-container max-h-[25rem] overflow-y-auto"> <div className="conversations-container max-h-[25rem] overflow-y-auto">
@ -195,7 +194,7 @@ export default function Navigation({
onClick={() => { onClick={() => {
handleConversationClick(conversation.id); handleConversationClick(conversation.id);
}} }}
className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-md hover:bg-gray-100 ${ className={`my-auto mx-4 mt-4 flex h-12 cursor-pointer items-center justify-between gap-4 rounded-3xl rounded-md hover:bg-gray-100 ${
conversationId === conversation.id ? 'bg-gray-100' : '' conversationId === conversation.id ? 'bg-gray-100' : ''
}`} }`}
> >
@ -228,7 +227,7 @@ export default function Navigation({
<div className="flex flex-col-reverse border-b-2"> <div className="flex flex-col-reverse border-b-2">
<div className="relative my-4 flex gap-2 px-2"> <div className="relative my-4 flex gap-2 px-2">
<div <div
className="flex h-12 w-full cursor-pointer justify-between rounded-md border-2 bg-white" className="flex h-12 w-full cursor-pointer justify-between rounded-3xl rounded-md border-2 bg-white"
onClick={() => setIsDocsListOpen(!isDocsListOpen)} onClick={() => setIsDocsListOpen(!isDocsListOpen)}
> >
{selectedDocs && ( {selectedDocs && (
@ -241,7 +240,7 @@ export default function Navigation({
alt="arrow" alt="arrow"
className={`${ className={`${
isDocsListOpen ? 'rotate-0' : 'rotate-180' isDocsListOpen ? 'rotate-0' : 'rotate-180'
} mr-3 w-3 transition-all`} } ml-auto mr-3 w-3 transition-all`}
/> />
</div> </div>
<img <img
@ -308,7 +307,7 @@ export default function Navigation({
<NavLink <NavLink
to="/about" to="/about"
className={({ isActive }) => className={({ isActive }) =>
`my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100 ${ `my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl rounded-md hover:bg-gray-100 ${
isActive ? 'bg-gray-3000' : '' isActive ? 'bg-gray-3000' : ''
}` }`
} }
@ -321,7 +320,7 @@ export default function Navigation({
href="https://discord.gg/WHJdfbQDR4" href="https://discord.gg/WHJdfbQDR4"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100" className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl rounded-md hover:bg-gray-100"
> >
<img src={Link} alt="link" className="ml-2 w-5" /> <img src={Link} alt="link" className="ml-2 w-5" />
<p className="my-auto text-eerie-black">Discord</p> <p className="my-auto text-eerie-black">Discord</p>
@ -331,7 +330,7 @@ export default function Navigation({
href="https://github.com/arc53/DocsGPT" href="https://github.com/arc53/DocsGPT"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100" className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-3xl rounded-md hover:bg-gray-100"
> >
<img src={Link} alt="link" className="ml-2 w-5" /> <img src={Link} alt="link" className="ml-2 w-5" />
<p className="my-auto text-eerie-black">Github</p> <p className="my-auto text-eerie-black">Github</p>
@ -346,11 +345,11 @@ export default function Navigation({
<img src={Hamburger} alt="menu toggle" className="w-7" /> <img src={Hamburger} alt="menu toggle" className="w-7" />
</button> </button>
</div> </div>
<SelectDocsModal {/* <SelectDocsModal
modalState={selectedDocsModalState} modalState={selectedDocsModalState}
setModalState={setSelectedDocsModalState} setModalState={setSelectedDocsModalState}
isCancellable={isSelectedDocsSet} isCancellable={isSelectedDocsSet}
/> /> */}
<APIKeyModal <APIKeyModal
modalState={apiKeyModalState} modalState={apiKeyModalState}
setModalState={setApiKeyModalState} setModalState={setApiKeyModalState}

2
frontend/src/preferences/APIKeyModal.tsx
View File

@ -60,7 +60,7 @@ export default function APIKeyModal({
return ( return (
<article <article
ref={modalRef} ref={modalRef}
className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-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 p-6 shadow-lg"
> >
<p className="text-xl text-jet">OpenAI API Key</p> <p className="text-xl text-jet">OpenAI API Key</p>
<p className="text-md leading-6 text-gray-500"> <p className="text-md leading-6 text-gray-500">

2
frontend/src/preferences/SelectDocsModal.tsx
View File

@ -61,7 +61,7 @@ export default function APIKeyModal({
isError={isError} isError={isError}
render={() => { render={() => {
return ( return (
<article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-lg bg-white p-6 shadow-lg"> <article className="mx-auto mt-24 flex w-[90vw] max-w-lg flex-col gap-4 rounded-t-lg bg-white p-6 shadow-lg">
<p className="text-xl text-jet">Select Source Documentation</p> <p className="text-xl text-jet">Select Source Documentation</p>
<p className="text-lg leading-5 text-gray-500"> <p className="text-lg leading-5 text-gray-500">
Please select the library of documentation that you would like to Please select the library of documentation that you would like to

9
frontend/src/upload/Upload.tsx
View File

@ -55,7 +55,7 @@ export default function Upload({
setProgress(undefined); setProgress(undefined);
setModalState('INACTIVE'); setModalState('INACTIVE');
}} }}
className={`rounded-md bg-blue-3000 px-4 py-2 text-sm font-medium text-white ${ className={`rounded-3xl bg-blue-3000 px-4 py-2 text-sm font-medium text-white ${
isCancellable ? '' : 'hidden' isCancellable ? '' : 'hidden'
}`} }`}
> >
@ -162,7 +162,8 @@ export default function Upload({
'text/x-rst': ['.rst'], 'text/x-rst': ['.rst'],
'text/x-markdown': ['.md'], 'text/x-markdown': ['.md'],
'application/zip': ['.zip'], 'application/zip': ['.zip'],
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'] 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
['.docx'],
}, },
}); });
@ -188,7 +189,7 @@ export default function Upload({
<span className="bg-white px-2 text-xs text-gray-4000">Name</span> <span className="bg-white px-2 text-xs text-gray-4000">Name</span>
</div> </div>
<div {...getRootProps()}> <div {...getRootProps()}>
<span className="rounded-md border border-blue-2000 px-4 py-2 font-medium text-blue-2000 hover:cursor-pointer"> <span className="rounded-3xl border border-blue-2000 px-4 py-2 font-medium text-blue-2000 hover:cursor-pointer">
<input type="button" {...getInputProps()} /> <input type="button" {...getInputProps()} />
Choose Files Choose Files
</span> </span>
@ -205,7 +206,7 @@ export default function Upload({
<div className="flex flex-row-reverse"> <div className="flex flex-row-reverse">
<button <button
onClick={uploadFile} onClick={uploadFile}
className="ml-6 rounded-md bg-blue-3000 py-2 px-6 text-white" className="ml-6 rounded-3xl bg-blue-3000 py-2 px-6 text-white"
> >
Train Train
</button> </button>