From 3d30010a4ee355b4111b4239f3b96e4462e06219 Mon Sep 17 00:00:00 2001
From: Delirium <nikita@openreplay.com>
Date: Wed, 27 Mar 2024 17:08:26 +0100
Subject: [PATCH] fix ui add border around search plus animation (#2005)

* fix ui add border around search plus animation

* code style
---
 .../AiSessionSearchField.tsx                  | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
index ac83aa3bb..d67526da2 100644
--- a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
+++ b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx
@@ -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',