iod/page-assist
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update sidepanel styles

Browse Source
This commit is contained in:
n4ze3m 2024-02-07 23:22:06 +05:30
parent b54527cab5
commit f90df7a6c6
8 changed files with 19 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Common/Playground/Message.tsx
View File

@ -25,9 +25,7 @@ export const PlaygroundMessage = (props: Props) => {
return (
<div
className={`group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 ${
!props.isBot ? "dark:bg-black" : "bg-gray-50 dark:bg-[#0a0a0a]"
}`}>
className={`group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 `}>
<div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
<div className="flex flex-row gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 lg:px-0 m-auto w-full">
<div className="w-8 flex flex-col relative items-end">

4
src/components/Sidepanel/Chat/empty.tsx
View File

@ -41,7 +41,7 @@ export const EmptySidePanel = () => {
return (
<div className="mx-auto sm:max-w-md px-4 mt-10">
<div className="rounded-lg justify-center items-center flex flex-col border p-8 bg-white dark:bg-black shadow-sm">
<div className="rounded-lg justify-center items-center flex flex-col border dark:border-gray-700 p-8 bg-white dark:bg-[#262626] shadow-sm">
{(ollamaStatus === "pending" || isRefetching) && (
<div className="inline-flex items-center space-x-2">
<div className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>
@ -98,7 +98,7 @@ export const EmptySidePanel = () => {
setSelectedModel(e.target.value)
}}
value={selectedModel}
className="bg-gray-100 truncate w-full dark:bg-black dark:text-gray-100 rounded-md px-4 py-2 mt-2">
className="bg-gray-100 truncate w-full dark:bg-[#171717] dark:text-gray-100 rounded-md px-4 py-2 mt-2">
<option key="0x" value={""}>
Select a model
</option>

6
src/components/Sidepanel/Chat/form.tsx
View File

@ -57,7 +57,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
})
return (
<div className="p-3 md:p-6 md:bg-white dark:bg-[#171717] border rounded-t-xl border-black/10 dark:border-gray-900/50">
<div className="p-3 md:p-6 md:bg-white dark:bg-[#262626] border rounded-t-xl border-black/10 dark:border-gray-700">
<div className="flex-grow space-y-6 ">
{chatMode === "normal" && form.values.image && (
<div className="h-full rounded-md shadow relative">
@ -71,7 +71,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
onClick={() => {
form.setFieldValue("image", "")
}}
className="absolute top-2 right-2 bg-white dark:bg-black p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 text-black dark:text-gray-100">
className="absolute top-2 right-2 bg-white dark:bg-[#262626] p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 text-black dark:text-gray-100">
<XMarkIcon className="h-5 w-5" />
</button>
</div>
@ -92,7 +92,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
})
})}
className="shrink-0 flex-grow flex items-center ">
<div className="flex items-center p-2 rounded-2xl border bg-gray-100 w-full dark:bg-black dark:border-gray-800">
<div className="flex items-center p-2 rounded-2xl border bg-gray-100 w-full dark:bg-[#262626] dark:border-gray-700">
<button
type="button"
onClick={() => {

2
src/components/Sidepanel/Chat/header.tsx
View File

@ -8,7 +8,7 @@ import { Tooltip } from "antd"
export const SidepanelHeader = () => {
const { clearChat, isEmbedding } = useMessage()
return (
<div className="flex px-3 justify-between bg-white dark:bg-black border-b border-gray-200 dark:border-gray-800 py-4 items-center">
<div className="flex px-3 justify-between bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center">
<div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
<img className="h-6 w-auto" src={logoImage} alt="Page Assist" />
<span className="ml-1 text-sm ">Page Assist</span>

14
src/components/Sidepanel/Settings/body.tsx
View File

@ -67,12 +67,12 @@ export const SettingsBody = () => {
return (
<div className="flex flex-col gap-4 p-4 max-w-2xl mx-auto lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl">
<div className="border border-gray-300 dark:border-gray-700 rounded p-4">
<div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
<h2 className="text-md mb-4 font-semibold dark:text-white">
Ollama URL
</h2>
<input
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-black dark:text-white dark:placeholder-gray-400"
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
value={ollamaURL}
type="url"
onChange={(e) => setOllamaURL(e.target.value)}
@ -86,7 +86,7 @@ export const SettingsBody = () => {
/>
</div>
</div>
<div className="border border-gray-300 dark:border-gray-700 rounded p-4">
<div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
<h2 className="text-md font-semibold dark:text-white">Prompt</h2>
<div className="my-3 flex justify-end">
<Radio.Group
@ -103,7 +103,7 @@ export const SettingsBody = () => {
System Prompt
</span>
<textarea
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-black dark:text-white dark:placeholder-gray-400"
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
value={systemPrompt}
onChange={(e) => setSystemPrompt(e.target.value)}
/>
@ -124,7 +124,7 @@ export const SettingsBody = () => {
System Prompt
</span>
<textarea
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-black dark:text-white dark:placeholder-gray-400"
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
value={ragPrompt}
onChange={(e) => setRagPrompt(e.target.value)}
/>
@ -134,7 +134,7 @@ export const SettingsBody = () => {
Question Prompt
</span>
<textarea
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-black dark:text-white dark:placeholder-gray-400"
className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
value={ragQuestionPrompt}
onChange={(e) => setRagQuestionPrompt(e.target.value)}
/>
@ -151,7 +151,7 @@ export const SettingsBody = () => {
)}
</div>
<div className="border border-gray-300 dark:border-gray-700 rounded p-4">
<div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
<h2 className="text-md mb-4 font-semibold dark:text-white">Theme</h2>
{mode === "dark" ? (
<button

2
src/components/Sidepanel/Settings/header.tsx
View File

@ -3,7 +3,7 @@ import { ChevronLeftIcon } from "@heroicons/react/24/outline"
import { Link } from "react-router-dom"
export const SidepanelSettingsHeader = () => {
return (
<div className="flex px-3 justify-start gap-3 bg-white dark:bg-black border-b border-gray-200 dark:border-gray-800 py-4 items-center">
<div className="flex px-3 justify-start gap-3 bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center">
<Link to="/">
<ChevronLeftIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
</Link>

4
src/routes/sidepanel-chat.tsx
View File

@ -72,8 +72,8 @@ export const SidepanelChat = () => {
ref={drop}
className={`flex ${
dropState === "dragging" && chatMode === "normal"
? "bg-gray-100 dark:bg-gray-800 z-10"
: "bg-white dark:bg-black"
? "bg-neutral-200 dark:bg-gray-800 z-10"
: "bg-neutral-50 dark:bg-[#171717]"
} flex-col min-h-screen mx-auto max-w-7xl`}>
<div className="sticky top-0 z-10">
<SidepanelHeader />

4
src/routes/sidepanel-settings.tsx
View File

@ -3,8 +3,8 @@ import { SidepanelSettingsHeader } from "~components/Sidepanel/Settings/header"
export const SidepanelSettings = () => {
return (
<div className="flex bg-white dark:bg-black flex-col min-h-screen mx-auto max-w-7xl">
<div className="sticky top-0 z-10">
<div className="flex bg-neutral-50 dark:bg-[#171717] flex-col min-h-screen mx-auto max-w-7xl">
<div className="sticky bg-white dark:bg-[#171717] top-0 z-10">
<SidepanelSettingsHeader />
</div>
<SettingsBody />