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

fix ui add border around search plus animation (#2005)

Browse source 
* fix ui add border around search plus animation

* code style
This commit is contained in:
Delirium 2024-03-27 17:08:26 +01:00 • committed by GitHub
parent f2e9876802
commit 3d30010a4e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -17,11 +17,10 @@ import {
edit,
fetchFilterSearch,
} from 'Duck/search';
import { Icon, Input, Toggler as Switch } from 'UI';
import { Icon, Input } from 'UI';
import FilterModal from 'Shared/Filters/FilterModal';
import { SwitchToggle } from '../../ui/Toggler/Toggler';
import OutsideClickDetectingDiv from '../OutsideClickDetectingDiv';
const ASSIST_ROUTE = assistRoute();
@ -187,7 +186,10 @@ function AiSessionSearchField(props: Props) {
};
return (
<div className={'bg-white rounded-lg'}>
<div style={gradientBoxUnfocused}>
<div
className={aiFiltersStore.isLoading ? 'animate-bg-spin' : ''}
style={tab === 'ask' ? gradientBox : gradientBoxUnfocused}
>
<div ref={askAiRef} className={'px-2'}>
<AskAiSwitchToggle
enabled={tab === 'ask'}
@ -307,10 +309,24 @@ export const AskAiSwitchToggle = ({
);
};
const gradientBox = {
border: 'double 1.5px transparent',
borderRadius: '6px',
background:
'linear-gradient(#ffffff, #ffffff), linear-gradient(-45deg, #394eff, #3eaaaf, #3ccf65)',
backgroundOrigin: 'border-box',
backgroundSize: '200% 200%',
backgroundClip: 'content-box, border-box',
display: 'flex',
gap: '0.25rem',
alignItems: 'center',
width: '100%',
};
const gradientBoxUnfocused = {
borderRadius: '6px',
border: 'double 1px transparent',
background: 'white',
border: 'solid 1.5px #BFBFBF',
background: '#fffff',
display: 'flex',
gap: '0.25rem',
alignItems: 'center',