From f8bd740cfaa54eae1424e6651f9931770cde0813 Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Sat, 21 Dec 2024 20:40:57 +0530
Subject: [PATCH] feat: Adjust UI styles in PlaygroundForm and
 PlaygroundMessage components

---
 src/components/Common/Playground/Message.tsx      |  6 ++++--
 .../Option/Playground/PlaygroundForm.tsx          | 15 ++++++++-------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/Common/Playground/Message.tsx b/src/components/Common/Playground/Message.tsx
index 925fe4c..1d76280 100644
--- a/src/components/Common/Playground/Message.tsx
+++ b/src/components/Common/Playground/Message.tsx
@@ -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">
diff --git a/src/components/Option/Playground/PlaygroundForm.tsx b/src/components/Option/Playground/PlaygroundForm.tsx
index 5f19861..00eef04 100644
--- a/src/components/Option/Playground/PlaygroundForm.tsx
+++ b/src/components/Option/Playground/PlaygroundForm.tsx
@@ -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)}