Make ML branding more inline & more prominent (#5815)

* Make changes to ML button

* A snapshot a day keeps the bugs away! 📷🐛

* A snapshot a day keeps the bugs away! 📷🐛

* A snapshot a day keeps the bugs away! 📷🐛

---------

Co-authored-by: Zookeeper Lee <lee@zoo.dev>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Pierre Jacquier <pierre@zoo.dev>

src/Toolbar.tsx

@@ -206,9 +206,12 @@ export function Toolbar({
                 id={maybeIconConfig[0].id + '-dropdown'}
                 name={maybeIconConfig[0].title}
                 className={
+                  (maybeIconConfig[0].alwaysDark
+                    ? 'dark bg-chalkboard-90 '
+                    : '!bg-transparent ') +
                   'group/wrapper ' +
                   buttonBorderClassName +
-                  ' !bg-transparent relative group !gap-0'
+                  ' relative group !gap-0'
                 }
                 splitMenuItems={maybeIconConfig.map((itemConfig) => ({
                   id: itemConfig.id,
@@ -234,6 +237,7 @@ export function Toolbar({
                     data-testid={maybeIconConfig[0].id}
                     iconStart={{
                       icon: maybeIconConfig[0].icon,
+                      iconColor: maybeIconConfig[0].iconColor,
                       className: iconClassName,
                       bgClassName: bgClassName,
                     }}
@@ -301,6 +305,7 @@ export function Toolbar({
                 data-testid={itemConfig.id}
                 iconStart={{
                   icon: itemConfig.icon,
+                  iconColor: itemConfig.iconColor,
                   className: iconClassName,
                   bgClassName: bgClassName,
                 }}
@@ -438,7 +443,11 @@ const ToolbarItemTooltipRichContent = ({
     <>
       <div className="rounded-top flex items-center gap-2 pt-3 pb-2 px-2 bg-chalkboard-20/50 dark:bg-chalkboard-80/50">
         {itemConfig.icon && (
-          <CustomIcon className="w-5 h-5" name={itemConfig.icon} />
+          <CustomIcon
+            className="w-5 h-5"
+            style={{ color: itemConfig.iconColor }}
+            name={itemConfig.icon}
+          />
         )}
         <span
           className={`text-sm flex-1 ${

src/components/ActionIcon.tsx

@@ -15,6 +15,7 @@ const iconSizes = {
 
 export interface ActionIconProps extends React.PropsWithChildren {
   icon?: SolidIconDefinition | BrandIconDefinition | CustomIconName
+  iconColor?: string
   className?: string
   bgClassName?: string
   iconClassName?: string
@@ -25,6 +26,7 @@ export interface ActionIconProps extends React.PropsWithChildren {
 export const ActionIcon = (props: ActionIconProps) => {
   const {
     icon = faCircleExclamation,
+    iconColor,
     className,
     bgClassName,
     iconClassName,
@@ -36,30 +38,32 @@ export const ActionIcon = (props: ActionIconProps) => {
   const computedBgClassName = `bg-chalkboard-20 dark:bg-chalkboard-80 group-disabled:bg-chalkboard-30 dark:group-disabled:bg-chalkboard-80 ${bgClassName}`
 
   return (
-    <div
+    <span style={{ color: iconColor }}>
-      data-testid={props['data-testid']}
+      <div
-      className={
+        data-testid={props['data-testid']}
-        `w-fit self-stretch inline-grid place-content-center ${className} ` +
+        className={
-        computedBgClassName
+          `w-fit self-stretch inline-grid place-content-center ${className} ` +
-      }
+          computedBgClassName
-    >
+        }
-      {children ? (
+      >
-        children
+        {children ? (
-      ) : typeof icon === 'string' ? (
+          children
-        <CustomIcon
+        ) : typeof icon === 'string' ? (
-          name={icon}
+          <CustomIcon
-          width={iconSizes[size]}
+            name={icon}
-          height={iconSizes[size]}
+            width={iconSizes[size]}
-          className={computedIconClassName}
+            height={iconSizes[size]}
-        />
+            className={computedIconClassName}
-      ) : (
+          />
-        <FontAwesomeIcon
+        ) : (
-          icon={icon}
+          <FontAwesomeIcon
-          width={iconSizes[size]}
+            icon={icon}
-          height={iconSizes[size]}
+            width={iconSizes[size]}
-          className={computedIconClassName}
+            height={iconSizes[size]}
-        />
+            className={computedIconClassName}
-      )}
+          />
-    </div>
+        )}
+      </div>
+    </span>
   )
 }

src/lib/toolbar.ts

@@ -27,6 +27,8 @@ export type ToolbarItem = {
   id: string
   onClick: (props: ToolbarItemCallbackProps) => void
   icon?: CustomIconName
+  iconColor?: string
+  alwaysDark?: true
   status: 'available' | 'unavailable' | 'kcl-only'
   disabled?: (state: StateFrom<typeof modelingMachine>) => boolean
   disableHotkey?: (state: StateFrom<typeof modelingMachine>) => boolean
@@ -308,9 +310,11 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
               data: { name: 'Text-to-CAD', groupId: 'modeling' },
             }),
           icon: 'sparkles',
+          iconColor: '#29FFA4',
+          alwaysDark: true,
           status: 'available',
-          title: 'Create with AI',
+          title: 'Create with Zoo Text-to-CAD',
-          description: 'Generate geometry from a text prompt.',
+          description: 'Create geometry with AI / ML.',
           links: [
             {
               label: 'API docs',
@@ -326,9 +330,11 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
               data: { name: 'Prompt-to-edit', groupId: 'modeling' },
             }),
           icon: 'sparkles',
+          iconColor: '#29FFA4',
+          alwaysDark: true,
           status: 'available',
-          title: 'Edit with AI',
+          title: 'Modify with Zoo Text-to-CAD',
-          description: 'Edit geometry based on a text prompt.',
+          description: 'Edit geometry with AI / ML.',
           links: [],
         },
       ],