ai stylize glow (#70)

src/app/global.css

@@ -72,6 +72,31 @@
     );
     background-size: 300% auto;
   }
+
+  .highlight-button {
+    @apply relative;
+    background: linear-gradient(
+      120deg,
+      theme("colors.primary.50/10") 0%,
+      theme("colors.primary.50/10") 40%,
+      theme("colors.primary.100/50") 45%,
+      theme("colors.primary.50/10") 50%,
+      theme("colors.primary.50/10") 100%
+    );
+    background-size: 200% 100%;
+    background-position: 100% 0;
+    animation: highlight-sweep 3s infinite linear;
+  }
+}
+
+@keyframes glow {
+  0%,
+  100% {
+    box-shadow: 0 0 8px 2px rgba(var(--color-primary-500-rgb), 0.5);
+  }
+  50% {
+    box-shadow: 0 0 12px 4px rgba(var(--color-primary-500-rgb), 0.7);
+  }
 }
 
 /* Custom animations */
@@ -130,3 +155,12 @@
   animation: gradient 4s linear infinite;
   background-size: 300% auto;
 }
+
+@keyframes highlight-sweep {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}

src/components/features/ToolbarButton.tsx

@@ -12,6 +12,7 @@ export interface ToolbarButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean;
   hidden?: boolean;
+  prominent?: boolean;
 }
 
 export const ToolbarButton = ({
@@ -47,6 +48,8 @@ export const ToolbarButton = ({
     children ? "w-fit flex items-center gap-2 text-nowrap" : "size-10",
     active && "pointer-events-none text-primary ",
     disabled && "pointer-events-none text-secondary-300",
+    buttonProps.prominent &&
+      "highlight-button border border-primary-400/30 text-primary-500 hover:bg-primary-100/40 hover:border-primary-400/60",
     customButtonClassNames,
   );
 

src/components/features/ToolbarMain/ToolbarMain.tsx

@@ -8,9 +8,9 @@ import {
   faFilePlus,
   faFilm,
   faFloppyDisk,
-  faHatWizard,
   faImage,
   faLocationArrow,
+  faMagicWandSparkles,
   faText,
 } from "@fortawesome/pro-solid-svg-icons";
 
@@ -61,7 +61,7 @@ export const ToolbarMain = ({
               <button
                 data-tooltip="Add..."
                 className={twMerge(
-                  "size-10 rounded-xl p-2 hover:bg-gray-200/50",
+                  "size-10 rounded-lg p-2 hover:bg-gray-200/50",
                   toolTipStyles,
                 )}
               >
@@ -85,8 +85,11 @@ export const ToolbarMain = ({
             </PopoverPanel>
           </Popover>
           <ToolbarButton
-            icon={faHatWizard}
-            buttonProps={buttonProps.AI_STYLIZE}
+            icon={faMagicWandSparkles}
+            buttonProps={{
+              ...buttonProps.AI_STYLIZE,
+              prominent: true,
+            }}
             tooltip="AI Stylize"
           />
         </div>

src/components/styles.ts

@@ -15,7 +15,7 @@ export const toolTipStyles = twMerge(
   "before:border-l-8 before:border-l-transparent",
   "before:border-r-8 before:border-r-transparent",
   "before:border-t-8 before:border-t-white",
-  "after:absolute after:left-1/2 after:bottom-full after:-translate-x-1/2 after:z-40 ",
+  "after:absolute after:left-1/2 after:bottom-full after:-translate-x-1/2 after:z-40",
   "after:content-[attr(data-tooltip)] after:text-black after:text-nowrap",
   "after:rounded-lg after:border after:border-ui-border after:bg-ui-panel after:px-2.5 after:py-1.5 after:mb-2 after:shadow-xl",
   "after:hidden before:hidden hover:after:block hover:before:block",