add a glow effect to the border to wizard button (#170)

* add a highlight glow border to wizard button * improve glowing effect * improve styles, fix mobile button position * prevent click outside close chat * make button smaller
SwaprHQ · Feb 19, 2025 · 1b75830 · 1b75830
1 parent 296dcb9
commit 1b75830
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 13 deletions.
diff --git a/app/components/AiChatBase.tsx b/app/components/AiChatBase.tsx
@@ -34,11 +34,14 @@ export const AiChatBase = ({
   }, [messages, isOpen, scrollAreaElement]);
 
   return (
-    <Dialog.Root modal onOpenChange={isOpen => setOpen(isOpen)} open={isOpen}>
-      <div className="fixed bottom-4 flex w-full items-center justify-end px-2 md:bottom-10 md:px-6">
+    <Dialog.Root onOpenChange={isOpen => setOpen(isOpen)} open={isOpen} modal>
+      <div className="fixed bottom-4 right-2 flex w-full items-center justify-end px-2 md:bottom-10 md:right-0 md:px-6">
         <div className="flex flex-col items-end">
           <Dialog.Portal>
-            <Dialog.Content className="fixed bottom-20 right-0 w-full origin-bottom-right rounded-16 border border-outline-base-em bg-surface-surface-0 shadow-2 data-[state=open]:animate-grow md:bottom-28 md:right-4 md:w-[420px]">
+            <Dialog.Content
+              className="fixed bottom-20 right-0 w-full origin-bottom-right rounded-16 border border-outline-base-em bg-surface-surface-0 shadow-2 data-[state=open]:animate-grow md:bottom-28 md:right-4 md:w-[420px]"
+              onInteractOutside={event => event.preventDefault()}
+            >
               <Dialog.Description hidden={true}>
                 Presagio chatbot window
               </Dialog.Description>
@@ -95,18 +98,28 @@ export const AiChatBase = ({
               onClick={() => {
                 trackOnClickEvents.map(event => trackEvent(event));
               }}
-              className={twMerge(
-                'flex size-12 items-center justify-center rounded-100 bg-transparent shadow-1 outline-outline-primary-low-em backdrop-blur-sm transition-colors duration-700 hover:bg-outline-primary-base-em focus:bg-outline-primary-base-em md:size-16',
-                'data-[state=open]:bg-outline-primary-base-em data-[state=open]:shadow-2'
-              )}
+              className="group relative flex size-12 items-center justify-center rounded-100 p-0.5 shadow-1 outline-outline-primary-med-em duration-500 hover:scale-105 md:size-14"
             >
-              <Image
-                alt="ai wizard"
-                width={42}
-                height={42}
-                src={wizardSvg}
-                className="w-7 md:w-10"
+              <span
+                className={twMerge(
+                  'absolute inset-0 animate-border-rotate rounded-100 border-0 bg-gradient-border group-hover:animate-border-rotate-fast',
+                  isOpen && 'animate-none bg-outline-primary-low-em'
+                )}
               />
+              <div
+                className={twMerge(
+                  'relative flex h-full w-full items-center justify-center rounded-100 bg-surface-white focus:bg-outline-primary-base-em dark:bg-surface-black',
+                  isOpen && 'bg-outline-primary-base-em shadow-2'
+                )}
+              >
+                <Image
+                  alt="ai wizard"
+                  width={42}
+                  height={42}
+                  src={wizardSvg}
+                  className="w-7 md:w-9"
+                />
+              </div>
             </button>
           </Dialog.Trigger>
         </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -10,6 +10,12 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      backgroundImage: {
+        'gradient-border': `linear-gradient(90deg, 
+          #4c21b612 56%, 
+          var(--outline-warning-med-em) 63%, 
+          #5a27da30 100%)`,
+      },
       keyframes: {
         grow: {
           '0%': { transform: 'scale(0.5)', opacity: '0' },
@@ -23,11 +29,17 @@ const config: Config = {
           '0%, 100%': { opacity: '0.2' },
           '20%': { opacity: '1' },
         },
+        'border-rotate': {
+          '0%': { transform: 'rotate(0deg)' },
+          '100%': { transform: 'rotate(360deg)' },
+        },
       },
       animation: {
         'loading-dot': 'loading-dot 1.4s infinite ease-in-out',
         'city-flip': 'cityFlip 200ms ease-in-out',
         grow: 'grow 0.2s ease-out',
+        'border-rotate-fast': 'border-rotate 0.7s linear infinite',
+        'border-rotate': 'border-rotate 5s linear infinite',
       },
     },
   },