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>
This commit is contained in:
49fl
2025-03-21 11:07:23 -04:00
committed by GitHub
parent 869126e436
commit c2f1ff67f2
28 changed files with 50 additions and 31 deletions

View File

@ -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
data-testid={props['data-testid']}
className={
`w-fit self-stretch inline-grid place-content-center ${className} ` +
computedBgClassName
}
>
{children ? (
children
) : typeof icon === 'string' ? (
<CustomIcon
name={icon}
width={iconSizes[size]}
height={iconSizes[size]}
className={computedIconClassName}
/>
) : (
<FontAwesomeIcon
icon={icon}
width={iconSizes[size]}
height={iconSizes[size]}
className={computedIconClassName}
/>
)}
</div>
<span style={{ color: iconColor }}>
<div
data-testid={props['data-testid']}
className={
`w-fit self-stretch inline-grid place-content-center ${className} ` +
computedBgClassName
}
>
{children ? (
children
) : typeof icon === 'string' ? (
<CustomIcon
name={icon}
width={iconSizes[size]}
height={iconSizes[size]}
className={computedIconClassName}
/>
) : (
<FontAwesomeIcon
icon={icon}
width={iconSizes[size]}
height={iconSizes[size]}
className={computedIconClassName}
/>
)}
</div>
</span>
)
}