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

Fix styling issues in various components

Browse Source
This commit is contained in:
n4ze3m 2024-03-10 12:52:53 +05:30
parent b7e940d57d
commit 00bd19374a
7 changed files with 26 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Layouts/Layout.tsx
View File

@ -70,7 +70,7 @@ export default function OptionLayout({
<div>
<div>
<div className="flex flex-col">
<div className="sticky top-0 z-[999] flex h-16 p-3 bg-white border-b border-gray-200 dark:bg-[#171717] dark:border-gray-600">
<div className="sticky top-0 z-[999] flex h-16 p-3 bg-white border-b dark:bg-[#171717] dark:border-gray-600">
<div className="flex gap-2 items-center">
{pathname !== "/" && (
<div>
@ -91,7 +91,7 @@ export default function OptionLayout({
<div>
<button
onClick={clearChat}
className="inline-flex items-center rounded-lg border dark:border-gray-700 bg-transparent px-3 py-3 text-sm font-medium leading-4 text-gray-800 shadow-sm dark:text-white disabled:opacity-50 ">
className="inline-flex items-center rounded-lg border dark:border-gray-700 bg-transparent px-3 py-3 text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ">
<SquarePen className="h-4 w-4 mr-3" />
New Chat
</button>
@ -161,13 +161,6 @@ export default function OptionLayout({
{pathname === "/" && messages.length > 0 && !streaming && (
<ShareBtn messages={messages} />
)}
{/* <Tooltip title="Manage Prompts">
<NavLink
to="/prompts"
className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
<Book className="w-6 h-6" />
</NavLink>
</Tooltip> */}
<Tooltip title="Github Repository">
<a
href="https://github.com/n4ze3m/page-assist"
@ -176,13 +169,6 @@ export default function OptionLayout({
<GithubIcon className="w-6 h-6" />
</a>
</Tooltip>
{/* <Tooltip title="Manage Ollama Models">
<NavLink
to="/models"
className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
<BrainCircuit className="w-6 h-6" />
</NavLink>
</Tooltip> */}
<Tooltip title="Manage Ollama Models">
<NavLink
to="/settings"
@ -204,7 +190,9 @@ export default function OptionLayout({
closeIcon={null}
onClose={() => setSidebarOpen(false)}
open={sidebarOpen}>
<Sidebar />
<Sidebar
onClose={() => setSidebarOpen(false)}
/>
</Drawer>
</div>
)

8
src/components/Layouts/SettingsOptionLayout.tsx
View File

@ -23,15 +23,15 @@ const LinkComponent = (item: {
to={item.href}
className={classNames(
item.current === item.href
? "bg-gray-100 text-indigo-600 dark:bg-[#262626] dark:text-white"
: "text-gray-700 hover:text-indigo-600 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-[#262626]",
? "bg-gray-100 text-gray-600 dark:bg-[#262626] dark:text-white"
: "text-gray-700 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-[#262626]",
"group flex gap-x-3 rounded-md py-2 pl-2 pr-3 text-sm leading-6 font-semibold"
)}>
<item.icon
className={classNames(
item.current === item.href
? "text-indigo-600 dark:text-white"
: "text-gray-400 group-hover:text-indigo-600 dark:text-gray-200 dark:group-hover:text-white",
? "text-gray-600 dark:text-white"
: "text-gray-400 group-hover:text-gray-600 dark:text-gray-200 dark:group-hover:text-white",
"h-6 w-6 shrink-0"
)}
aria-hidden="true"

2
src/components/Option/Playground/PlaygroundEmpty.tsx
View File

@ -35,7 +35,7 @@ export const PlaygroundEmpty = () => {
return (
<div className="mx-auto sm:max-w-xl px-4 mt-10">
<div className="rounded-lg justify-center items-center flex flex-col border p-8 bg-white dark:bg-[#262626] shadow-sm dark:border-gray-600">
<div className="rounded-lg justify-center items-center flex flex-col border p-8 bg-white dark:bg-[#262626] dark:border-gray-600">
{(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>

2
src/components/Option/Playground/PlaygroundForm.tsx
View File

@ -154,7 +154,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
}
}
return (
<div className="px-3 pt-3 md:px-6 md:pt-6 md:bg-white dark:bg-[#262626] border rounded-t-xl border-black/10 dark:border-gray-600">
<div className="px-3 pt-3 md:px-6 md:pt-6 md:bg-white dark:bg-[#262626] border rounded-t-xl dark:border-gray-600">
<div
className={`h-full rounded-md shadow relative ${
form.values.image.length === 0 ? "hidden" : "block"

10
src/components/Option/Settings/other.tsx
View File

@ -24,7 +24,7 @@ export const SettingOther = () => {
<div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
</div>
<div className="flex flex-row justify-between">
<span className="text-gray-500 dark:text-gray-400 text-lg">
<span className="text-gray-500 dark:text-neutral-50">
Speech Recognition Language
</span>
@ -44,9 +44,7 @@ export const SettingOther = () => {
/>
</div>
<div className="flex flex-row justify-between">
<span className="text-gray-500 dark:text-gray-400 text-lg">
Change Theme
</span>
<span className="text-gray-500 dark:text-neutral-50 ">Change Theme</span>
<button
onClick={toggleDarkMode}
@ -59,8 +57,9 @@ export const SettingOther = () => {
{mode === "dark" ? "Light" : "Dark"}
</button>
</div>
<SearchModeSettings />
<div className="flex flex-row justify-between">
<span className="text-gray-500 dark:text-gray-400 text-lg">
<span className="text-gray-500 dark:text-neutral-50 ">
Delete Chat History
</span>
@ -83,7 +82,6 @@ export const SettingOther = () => {
Delete
</button>
</div>
<SearchModeSettings />
</dl>
)
}

2
src/components/Option/Settings/search-mode.tsx
View File

@ -19,7 +19,7 @@ export const SearchModeSettings = () => {
return (
<div className="flex flex-row justify-between">
<span className="text-gray-500 dark:text-gray-400 text-lg">
<span className="text-gray-500 dark:text-neutral-50 ">
Perform Simple Internet Search
</span>

20
src/components/Option/Sidebar.tsx
View File

@ -10,14 +10,17 @@ import { Empty, Skeleton } from "antd"
import { useMessageOption } from "~hooks/useMessageOption"
import { useState } from "react"
import { PencilIcon, Trash2 } from "lucide-react"
import { useNavigate } from "react-router-dom"
type Props = {}
type Props = {
onClose: () => void
}
export const Sidebar = ({}: Props) => {
export const Sidebar = ({ onClose }: Props) => {
const { setMessages, setHistory, setHistoryId, historyId, clearChat } =
useMessageOption()
const [processingId, setProcessingId] = useState<string>("")
const client = useQueryClient()
const navigate = useNavigate()
const { data: chatHistories, status } = useQuery({
queryKey: ["fetchChatHistory"],
@ -28,21 +31,20 @@ export const Sidebar = ({}: Props) => {
}
})
const { isPending: isDeleting, mutate: deleteHistory } = useMutation({
const { mutate: deleteHistory } = useMutation({
mutationKey: ["deleteHistory"],
mutationFn: deleteByHistoryId,
onSuccess: (history_id) => {
client.invalidateQueries({
queryKey: ["fetchChatHistory"]
})
setProcessingId("")
if (historyId === history_id) {
clearChat()
}
}
})
const { isPending: isEditing, mutate: editHistory } = useMutation({
const { mutate: editHistory } = useMutation({
mutationKey: ["editHistory"],
mutationFn: async (data: { id: string; title: string }) => {
return await updateHistory(data.id, data.title)
@ -51,7 +53,6 @@ export const Sidebar = ({}: Props) => {
client.invalidateQueries({
queryKey: ["fetchChatHistory"]
})
setProcessingId("")
}
})
@ -86,6 +87,8 @@ export const Sidebar = ({}: Props) => {
setHistoryId(chat.id)
setHistory(formatToChatHistory(history))
setMessages(formatToMessage(history))
navigate("/")
onClose()
}}>
<span className="flex-grow truncate">{chat.title}</span>
</button>
@ -97,8 +100,6 @@ export const Sidebar = ({}: Props) => {
if (newTitle) {
editHistory({ id: chat.id, title: newTitle })
}
setProcessingId(chat.id)
}}
className="text-gray-500 dark:text-gray-400 opacity-80">
<PencilIcon className="w-4 h-4" />
@ -111,7 +112,6 @@ export const Sidebar = ({}: Props) => {
)
return
deleteHistory(chat.id)
setProcessingId(chat.id)
}}
className="text-red-500 dark:text-red-400 opacity-80">
<Trash2 className=" w-4 h-4 " />