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

feat: Adjust UI styles in PlaygroundForm and PlaygroundMessage components

Browse Source
This commit is contained in:
n4ze3m 2024-12-21 20:40:57 +05:30
parent 15fb80d75d
commit f8bd740cfa
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -68,7 +68,7 @@ export const PlaygroundMessage = (props: Props) => {
)} )}
</div> </div>
</div> </div>
<div className="flex w-[calc(100%-50px)] flex-col gap-3 lg:w-[calc(100%-115px)]"> <div className="flex w-[calc(100%-50px)] flex-col gap-2 lg:w-[calc(100%-115px)]">
<span className="text-xs font-bold text-gray-800 dark:text-white"> <span className="text-xs font-bold text-gray-800 dark:text-white">
{props.isBot {props.isBot
? props.name === "chrome::gemini-nano::page-assist" ? props.name === "chrome::gemini-nano::page-assist"
@ -212,7 +212,9 @@ export const PlaygroundMessage = (props: Props) => {
{props.generationInfo && ( {props.generationInfo && (
<Popover <Popover
content={ content={
<GenerationInfo generationInfo={props.generationInfo} /> <GenerationInfo
generationInfo={props.generationInfo}
/>
} }
title={t("generationInfo")}> title={t("generationInfo")}>
<button className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"> <button className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">

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

@ -192,7 +192,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
return ( return (
<div <div
className={`px-3 pt-3 md:px-4 md:pt-4 bg-gray-100 dark:bg-[#262626] border rounded-t-xl dark:border-gray-600 className={`px-3 pt-3 bg-gray-100 dark:bg-[#262626] border rounded-t-xl dark:border-gray-600
${temporaryChat && "!bg-gray-300 dark:!bg-black "} ${temporaryChat && "!bg-gray-300 dark:!bg-black "}
`}> `}>
<div <div
@ -217,7 +217,8 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
</div> </div>
</div> </div>
<div> <div>
<div className={`flex rounded-t-xl bg-white dark:bg-transparent ${ <div
className={`flex rounded-t-xl bg-white dark:bg-transparent ${
temporaryChat && "!bg-gray-300 dark:!bg-black" temporaryChat && "!bg-gray-300 dark:!bg-black"
}`}> }`}>
<form <form
@ -275,17 +276,17 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100" className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
onPaste={handlePaste} onPaste={handlePaste}
rows={1} rows={1}
style={{ minHeight: "40px" }} style={{ minHeight: "30px" }}
tabIndex={0} tabIndex={0}
placeholder={t("form.textarea.placeholder")} placeholder={t("form.textarea.placeholder")}
{...form.getInputProps("message")} {...form.getInputProps("message")}
/> />
<div className="mt-4 flex justify-between items-center"> <div className="mt-2 flex justify-between items-center">
<div className="flex"> <div className="flex">
{!selectedKnowledge && ( {!selectedKnowledge && (
<Tooltip title={t("tooltip.searchInternet")}> <Tooltip title={t("tooltip.searchInternet")}>
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<PiGlobe className="h-5 w-5 dark:text-gray-300" /> <PiGlobe className={`h-5 w-5 dark:text-gray-300 `} />
<Switch <Switch
value={webSearch} value={webSearch}
onChange={(e) => setWebSearch(e)} onChange={(e) => setWebSearch(e)}