From 5bc758aa2deb9c90ca4be41868c00d07e4c8aa4a Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Thu, 13 Mar 2025 20:39:17 +0530
Subject: [PATCH] (fix:ui) minor adjustments

---
 frontend/src/components/Input.tsx               | 10 +++++++++-
 .../src/conversation/ConversationBubble.tsx     |  2 +-
 .../src/conversation/sharedConversationSlice.ts |  3 +--
 frontend/src/index.css                          | 17 ++++++++++++-----
 frontend/src/modals/AddToolModal.tsx            |  2 +-
 frontend/src/modals/ConfirmationModal.tsx       |  2 +-
 6 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
index 4cdf0d0d..39dff2b0 100644
--- a/frontend/src/components/Input.tsx
+++ b/frontend/src/components/Input.tsx
@@ -35,7 +35,15 @@ const Input = ({
     <div className={`relative ${className}`}>
       <input
         ref={inputRef}
-        className={`peer h-[42px] w-full rounded-full px-3 py-1 bg-transparent outline-none dark:text-white placeholder-transparent ${colorStyles[colorVariant]} ${borderStyles[borderVariant]}`}
+        className={`h-[42px] w-full rounded-full px-3 py-1 
+          bg-transparent outline-none 
+          text-jet dark:text-bright-gray
+          placeholder-transparent 
+          ${colorStyles[colorVariant]} 
+          ${borderStyles[borderVariant]}
+          [&:-webkit-autofill]:bg-transparent
+          [&:-webkit-autofill]:appearance-none
+          [&:-webkit-autofill_selected]:bg-transparent`}
         type={type}
         id={id}
         name={name}
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 20869c69..8638718f 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -155,7 +155,7 @@ const ConversationBubble = forwardRef<
               />
               <div className="flex items-center justify-end gap-2">
                 <button
-                  className="px-4 py-2 text-purple-30 text-sm hover:text-chinese-black-2 hover:bg-gainsboro dark:hover:bg-onyx-2 transition-colors rounded-full"
+                  className="px-4 py-2 text-purple-30 text-sm font-semibold hover:text-chinese-black-2 dark:hover:text-[#B9BCBE] hover:bg-gainsboro dark:hover:bg-onyx-2 transition-colors rounded-full"
                   onClick={() => setIsEditClicked(false)}
                 >
                   {t('conversation.edit.cancel')}
diff --git a/frontend/src/conversation/sharedConversationSlice.ts b/frontend/src/conversation/sharedConversationSlice.ts
index bef306dd..7ae4862b 100644
--- a/frontend/src/conversation/sharedConversationSlice.ts
+++ b/frontend/src/conversation/sharedConversationSlice.ts
@@ -231,8 +231,7 @@ export const sharedConversationSlice = createSlice({
           return state;
         }
         state.status = 'failed';
-        state.queries[state.queries.length - 1].error =
-          'Something went wrong. Please check your internet connection.';
+        state.queries[state.queries.length - 1].error = 'Something went wrong';
       });
   },
 });
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e918b3a4..88e56469 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -490,9 +490,10 @@ input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
-  -webkit-text-fill-color: #343541 !important; /* jet color */
-  -webkit-box-shadow: 0 0 0 30px white inset !important;
+  -webkit-text-fill-color: #343541 !important;
+  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
   transition: background-color 5000s ease-in-out 0s;
+  caret-color: #343541;
 }
 
 /* Dark mode specific autofill styles */
@@ -500,9 +501,15 @@ input:-webkit-autofill:active {
 .dark input:-webkit-autofill:hover,
 .dark input:-webkit-autofill:focus,
 .dark input:-webkit-autofill:active {
-  -webkit-text-fill-color: white !important;
-  -webkit-box-shadow: 0 0 0 30px #202124 inset !important; /* raisin-black */
-  transition: background-color 5000s ease-in-out 0s;
+  -webkit-text-fill-color: #E5E7EB !important;
+  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
+  background-color: transparent !important;
+  caret-color: #E5E7EB;
+}
+
+/* Additional autocomplete dropdown styles for dark mode */
+.dark input:-webkit-autofill::first-line {
+  color: #E5E7EB;
 }
 
 .inputbox-style {
diff --git a/frontend/src/modals/AddToolModal.tsx b/frontend/src/modals/AddToolModal.tsx
index adaa82e3..42b55d69 100644
--- a/frontend/src/modals/AddToolModal.tsx
+++ b/frontend/src/modals/AddToolModal.tsx
@@ -107,7 +107,7 @@ export default function AddToolModal({
                     <Spinner />
                   </div>
                 ) : (
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-fr">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-fr pb-2">
                     {availableTools.map((tool, index) => (
                       <div
                         role="button"
diff --git a/frontend/src/modals/ConfirmationModal.tsx b/frontend/src/modals/ConfirmationModal.tsx
index 783282c0..25f8c2da 100644
--- a/frontend/src/modals/ConfirmationModal.tsx
+++ b/frontend/src/modals/ConfirmationModal.tsx
@@ -26,7 +26,7 @@ export default function ConfirmationModal({
 
   const submitButtonClasses =
     variant === 'danger'
-      ? 'rounded-3xl bg-rosso-corsa px-5 py-2 text-sm text-lotion transition-all hover:bg-red-2000 hover:font-bold tracking-[0.015em] hover:tracking-normal'
+      ? 'rounded-3xl bg-rosso-corsa px-5 py-2 text-sm text-lotion transition-all hover:bg-red-2000 hover:font-bold tracking-[0.019em] hover:tracking-normal'
       : 'rounded-3xl bg-purple-30 px-5 py-2 text-sm text-lotion transition-all hover:bg-violets-are-blue';
 
   return (