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 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">
{props.isBot
? props.name === "chrome::gemini-nano::page-assist"
@ -212,7 +212,9 @@ export const PlaygroundMessage = (props: Props) => {
{props.generationInfo && (
<Popover
content={
<GenerationInfo generationInfo={props.generationInfo} />
<GenerationInfo
generationInfo={props.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">

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

@ -192,7 +192,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
return (
<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 "}
`}>
<div
@ -217,9 +217,10 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
</div>
</div>
<div>
<div className={`flex rounded-t-xl bg-white dark:bg-transparent ${
temporaryChat && "!bg-gray-300 dark:!bg-black"
}`}>
<div
className={`flex rounded-t-xl bg-white dark:bg-transparent ${
temporaryChat && "!bg-gray-300 dark:!bg-black"
}`}>
<form
onSubmit={form.onSubmit(async (value) => {
stopListening()
@ -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"
onPaste={handlePaste}
rows={1}
style={{ minHeight: "40px" }}
style={{ minHeight: "30px" }}
tabIndex={0}
placeholder={t("form.textarea.placeholder")}
{...form.getInputProps("message")}
/>
<div className="mt-4 flex justify-between items-center">
<div className="mt-2 flex justify-between items-center">
<div className="flex">
{!selectedKnowledge && (
<Tooltip title={t("tooltip.searchInternet")}>
<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
value={webSearch}
onChange={(e) => setWebSearch(e)}