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

fix: minor ui inconsistencies

Browse Source
This commit is contained in:
Siddhant Rai
2024-09-03 16:11:24 +05:30
parent c4cb9b07cb
commit 28e06fa684
6 changed files with 109 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/Input.tsx
View File

@@ -10,6 +10,7 @@ const Input = ({
maxLength,
className,
colorVariant = 'silver',
borderVariant = 'thick',
children,
onChange,
onPaste,
@@ -20,10 +21,13 @@ const Input = ({
jet: 'border-jet',
gray: 'border-gray-5000 dark:text-silver',
};
const borderStyles = {
thin: 'border',
thick: 'border-2',
};
return (
<input
className={`h-[42px] w-full rounded-full border-2 px-3 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]}`}
className={`h-[42px] w-full rounded-full px-3 py-1 outline-none dark:bg-transparent dark:text-white ${className} ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
type={type}
id={id}
name={name}

1
frontend/src/components/types/index.ts
View File

@@ -2,6 +2,7 @@ export type InputProps = {
type: 'text' | 'number';
value: string | string[] | number;
colorVariant?: 'silver' | 'jet' | 'gray';
borderVariant?: 'thin' | 'thick';
isAutoFocused?: boolean;
id?: string;
maxLength?: number;

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

@@ -180,7 +180,7 @@ const ConversationBubble = forwardRef<
))}
{(sources?.length ?? 0) > 3 && (
<div
className="flex h-24 cursor-pointer flex-col-reverse rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
className="flex h-28 cursor-pointer flex-col-reverse rounded-[20px] bg-gray-1000 p-4 text-purple-30 hover:bg-[#F1F1F1] hover:text-[#6D3ECC] dark:bg-gun-metal dark:hover:bg-[#2C2E3C] dark:hover:text-[#8C67D7]"
onClick={() => setIsSidebarOpen(true)}
>
<p className="ellipsis-text h-22 text-xs">{`View ${

20
frontend/src/index.css
View File

@@ -424,6 +424,26 @@ template {
width: 0;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 50px white inset;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 50px white inset;
}
@media (prefers-color-scheme: dark) {
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 50px rgb(68, 70, 84) inset;
-webkit-text-fill-color: white;
}
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 50px rgb(68, 70, 84) inset;
-webkit-text-fill-color: white;
}
}
.inputbox-style {
resize: none;
padding-left: 36px;

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

@@ -275,7 +275,7 @@ function Upload({
} else
setRedditData({
...redditData,
[name]: value,
[name]: name === 'number_posts' ? parseInt(value) : value,
});
};
@@ -321,6 +321,7 @@ function Upload({
colorVariant="gray"
value={docName}
onChange={(e) => setDocName(e.target.value)}
borderVariant="thin"
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
@@ -356,6 +357,7 @@ function Upload({
{activeTab === 'remote' && (
<>
<Dropdown
border="border"
options={urlOptions}
selectedValue={urlType}
onSelect={(value: { label: string; value: string }) =>
@@ -371,6 +373,7 @@ function Upload({
type="text"
value={urlName}
onChange={(e) => setUrlName(e.target.value)}
borderVariant="thin"
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
@@ -382,6 +385,7 @@ function Upload({
type="text"
value={url}
onChange={(e) => setUrl(e.target.value)}
borderVariant="thin"
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
@@ -390,68 +394,83 @@ function Upload({
</div>
</>
) : (
<>
<Input
placeholder="Enter client ID"
type="text"
name="client_id"
value={redditData.client_id}
onChange={handleChange}
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.id')}
</span>
<div className="flex flex-col gap-1 mt-2">
<div>
<Input
placeholder="Enter client ID"
type="text"
name="client_id"
value={redditData.client_id}
onChange={handleChange}
borderVariant="thin"
></Input>
<div className="relative bottom-[52px] left-2">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.id')}
</span>
</div>
</div>
<Input
placeholder="Enter client secret"
type="text"
name="client_secret"
value={redditData.client_secret}
onChange={handleChange}
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.secret')}
</span>
<div>
<Input
placeholder="Enter client secret"
type="text"
name="client_secret"
value={redditData.client_secret}
onChange={handleChange}
borderVariant="thin"
></Input>
<div className="relative bottom-[52px] left-2">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.secret')}
</span>
</div>
</div>
<Input
placeholder="Enter user agent"
type="text"
name="user_agent"
value={redditData.user_agent}
onChange={handleChange}
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.agent')}
</span>
<div>
<Input
placeholder="Enter user agent"
type="text"
name="user_agent"
value={redditData.user_agent}
onChange={handleChange}
borderVariant="thin"
></Input>
<div className="relative bottom-[52px] left-2">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.agent')}
</span>
</div>
</div>
<Input
placeholder="Enter search queries"
type="text"
name="search_queries"
value={redditData.search_queries}
onChange={handleChange}
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.searchQueries')}
</span>
<div>
<Input
placeholder="Enter search queries"
type="text"
name="search_queries"
value={redditData.search_queries}
onChange={handleChange}
borderVariant="thin"
></Input>
<div className="relative bottom-[52px] left-2">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.searchQueries')}
</span>
</div>
</div>
<Input
placeholder="Enter number of posts"
type="number"
name="number_posts"
value={redditData.number_posts}
onChange={handleChange}
></Input>
<div className="relative bottom-12 left-2 mt-[-20px]">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.numberOfPosts')}
</span>
<div>
<Input
placeholder="Enter number of posts"
type="number"
name="number_posts"
value={redditData.number_posts}
onChange={handleChange}
borderVariant="thin"
></Input>
<div className="relative bottom-[52px] left-2">
<span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
{t('modals.uploadDoc.reddit.numberOfPosts')}
</span>
</div>
</div>
</>
</div>
)}
</>
)}