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

pull/340/head
DenyTwice 9 months ago
parent b2118602d9
commit ae01070b8f

@ -4,7 +4,7 @@
export default function About() {
return (
<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">
<p className="mr-2 text-3xl">About DocsGPT</p>
<p className="text-[21px]">🦖</p>

@ -17,11 +17,11 @@ 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-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>
<button
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
</button>

@ -11,7 +11,6 @@ import Link from './assets/link.svg';
import UploadIcon from './assets/upload.svg';
import { ActiveState } from './models/misc';
import APIKeyModal from './preferences/APIKeyModal';
import SelectDocsModal from './preferences/SelectDocsModal';
import { useDispatch, useSelector } from 'react-redux';
import {
selectApiKeyStatus,
@ -180,10 +179,10 @@ export default function Navigation({
className={({ isActive }) =>
`${
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>
</NavLink>
<div className="conversations-container max-h-[25rem] overflow-y-auto">
@ -195,7 +194,7 @@ export default function Navigation({
onClick={() => {
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' : ''
}`}
>
@ -228,7 +227,7 @@ export default function Navigation({
<div className="flex flex-col-reverse border-b-2">
<div className="relative my-4 flex gap-2 px-2">
<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)}
>
{selectedDocs && (
@ -241,7 +240,7 @@ export default function Navigation({
alt="arrow"
className={`${
isDocsListOpen ? 'rotate-0' : 'rotate-180'
} mr-3 w-3 transition-all`}
} ml-auto mr-3 w-3 transition-all`}
/>
</div>
<img
@ -308,7 +307,7 @@ export default function Navigation({
<NavLink
to="/about"
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' : ''
}`
}
@ -321,7 +320,7 @@ export default function Navigation({
href="https://discord.gg/WHJdfbQDR4"
target="_blank"
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" />
<p className="my-auto text-eerie-black">Discord</p>
@ -331,7 +330,7 @@ export default function Navigation({
href="https://github.com/arc53/DocsGPT"
target="_blank"
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" />
<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" />
</button>
</div>
<SelectDocsModal
{/* <SelectDocsModal
modalState={selectedDocsModalState}
setModalState={setSelectedDocsModalState}
isCancellable={isSelectedDocsSet}
/>
/> */}
<APIKeyModal
modalState={apiKeyModalState}
setModalState={setApiKeyModalState}

@ -60,7 +60,7 @@ export default function APIKeyModal({
return (
<article
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-md leading-6 text-gray-500">

@ -61,7 +61,7 @@ export default function APIKeyModal({
isError={isError}
render={() => {
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-lg leading-5 text-gray-500">
Please select the library of documentation that you would like to

@ -55,7 +55,7 @@ export default function Upload({
setProgress(undefined);
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'
}`}
>
@ -162,7 +162,8 @@ export default function Upload({
'text/x-rst': ['.rst'],
'text/x-markdown': ['.md'],
'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>
</div>
<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()} />
Choose Files
</span>
@ -205,7 +206,7 @@ export default function Upload({
<div className="flex flex-row-reverse">
<button
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
</button>

Loading…
Cancel
Save