jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Search bar UI improvements in sessions page

Browse source
This commit is contained in:
Sudheer Salavadi 2024-07-09 14:15:35 +05:30
parent 2ba8d08acc
commit a0fa716f10
3 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/shared/Filters/FilterModal/FilterModal.tsx
View file

@ -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>
) : (

2
frontend/app/components/shared/SessionSearch/SessionSearch.tsx
View file

@ -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'}>

16
frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
View file

@ -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',