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:
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user