From a0fa716f101f3304fed7ff835513b8e6f482abe7 Mon Sep 17 00:00:00 2001
From: Sudheer Salavadi <connect.uxmaster@gmail.com>
Date: Tue, 9 Jul 2024 14:15:35 +0530
Subject: [PATCH] Search bar UI improvements in sessions page

---
 .../shared/Filters/FilterModal/FilterModal.tsx   |  4 ++--
 .../shared/SessionSearch/SessionSearch.tsx       |  2 +-
 .../SessionSearchField/AiSessionSearchField.tsx  | 16 ++++++++--------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
index d16e6dfa9..821ff211c 100644
--- a/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
+++ b/frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
@@ -226,9 +226,9 @@ function FilterModal(props: Props) {
             {isResultEmpty && !fetchingFilterSearchList ? (
               <div className="flex items-center flex-col">
                 <AnimatedSVG name={ICONS.NO_SEARCH_RESULTS} size={30} />
-                <div className="color-gray-medium font-medium px-3 mt-4">
+                <div className="font-medium px-3 mt-4">
                   {' '}
-                  No Suggestions Found
+                  No matching filters.
                 </div>
               </div>
             ) : (
diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
index 24c2e25e9..38e598bf4 100644
--- a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
+++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
@@ -110,7 +110,7 @@ function SessionSearch(props: Props) {
   return !metaLoading ? (
     <>
       {showPanel ? (
-        <div className="border bg-white rounded mt-4">
+        <div className="border bg-white rounded-lg mt-4">
           <div className="p-5">
             {aiFiltersStore.isLoading ? (
               <div className={'font-semibold flex items-center gap-2'}>
diff --git a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
index cae038e0c..60731d1fb 100644
--- a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
+++ b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
@@ -81,11 +81,11 @@ function SessionSearchField(props: Props) {
         placeholder={
           'Search sessions using any captured event (click, input, page, error...)'
         }
-        style={{ minWidth: 360, height: 33 }}
+        style={{ minWidth: 360, height: 30 }}
         id="search"
         type="search"
         autoComplete="off"
-        className="px-2 py-1 text-lg placeholder-lg !border-0 rounded-r-lg nofocus"
+        className="px-2 py-1 text-lg placeholder-lg !border-0 rounded-r-full nofocus"
       />
 
       {showModal && (
@@ -144,9 +144,9 @@ const AiSearchField = observer(
           id="search"
           onKeyDown={handleKeyDown}
           value={searchQuery}
-          style={{ minWidth: 360, height: 33 }}
+          style={{ minWidth: 360, height: 30 }}
           autoComplete="off"
-          className="px-2 py-1 text-lg placeholder-lg !border-0 rounded-r-lg nofocus"
+          className="px-2 py-1 text-lg placeholder-lg !border-0 rounded-e-full nofocus"
           leadingButton={
             searchQuery !== '' ? (
               <div
@@ -189,7 +189,7 @@ function AiSessionSearchField(props: Props) {
                    ? gradientBox
                    : isFocused ? regularBoxFocused : regularBoxUnfocused;
   return (
-    <div className={'bg-white rounded-lg'}>
+    <div className={'bg-white rounded-full'}>
       <div
         className={aiFiltersStore.isLoading ? 'animate-bg-spin' : ''}
         style={boxStyle}
@@ -315,7 +315,7 @@ export const AskAiSwitchToggle = ({
 
 const gradientBox = {
   border: 'double 1.5px transparent',
-  borderRadius: '6px',
+  borderRadius: '100px',
   background:
     'linear-gradient(#ffffff, #ffffff), linear-gradient(-45deg, #394eff, #3eaaaf, #3ccf65)',
   backgroundOrigin: 'border-box',
@@ -328,7 +328,7 @@ const gradientBox = {
 };
 
 const regularBoxUnfocused = {
-  borderRadius: '6px',
+  borderRadius: '100px',
   border: 'solid 1.5px #BFBFBF',
   background: '#fffff',
   display: 'flex',
@@ -338,7 +338,7 @@ const regularBoxUnfocused = {
 };
 
 const regularBoxFocused = {
-  borderRadius: '6px',
+  borderRadius: '100px',
   border: 'solid 1.5px #394EFF',
   background: '#fffff',
   display: 'flex',