Canvas V2 Minor UI Tweaks

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBar.tsx

@@ -9,7 +9,7 @@ export const EntityListGlobalActionBar = memo(() => {
     <Flex w="full" py={1} px={1} gap={2} alignItems="center">
       <EntityListGlobalActionBarDenoisingStrength />
       <Spacer />
-      <Flex>
+      <Flex gap={0.5}>
         <EntityListGlobalActionBarFitBboxToLayers />
         <EntityListGlobalActionBarAddLayerMenu />
       </Flex>

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx

@@ -23,7 +23,7 @@ export const EntityListGlobalActionBarAddLayerMenu = memo(() => {
       <MenuButton
         as={IconButton}
         size="sm"
-        variant="link"
+        variant="ghost"
         alignSelf="stretch"
         tooltip={t('controlLayers.addLayer')}
         aria-label={t('controlLayers.addLayer')}

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarFitBboxToLayers.tsx

@@ -15,7 +15,7 @@ export const EntityListGlobalActionBarFitBboxToLayers = memo(() => {
     <IconButton
       onClick={onClick}
       size="sm"
-      variant="link"
+      variant="ghost"
       alignSelf="stretch"
       aria-label={t('controlLayers.fitBboxToLayers')}
       tooltip={t('controlLayers.fitBboxToLayers')}

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx

@@ -11,8 +11,8 @@ export const EntityListSelectedEntityActionBar = memo(() => {
     <Flex w="full" py={1} px={1} gap={2} alignItems="center">
       <EntityListSelectedEntityActionBarOpacity />
       <Spacer />
-      <EntityListSelectedEntityActionBarFill />
-      <Flex>
+      <Flex gap={0.5}>
+        <EntityListSelectedEntityActionBarFill />
         <EntityListSelectedEntityActionBarFilterButton />
         <EntityListSelectedEntityActionBarTransformButton />
         <EntityListSelectedEntityActionBarDuplicateButton />

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton.tsx

@@ -22,7 +22,7 @@ export const EntityListSelectedEntityActionBarDuplicateButton = memo(() => {
       onClick={onClick}
       isDisabled={!selectedEntityIdentifier}
       size="sm"
-      variant="link"
+      variant="ghost"
       alignSelf="stretch"
       aria-label={t('controlLayers.duplicate')}
       tooltip={t('controlLayers.duplicate')}

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill.tsx

@@ -47,7 +47,17 @@ export const EntityListSelectedEntityActionBarFill = memo(() => {
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <Flex role="button" aria-label={t('controlLayers.maskFill')} tabIndex={-1} w={8} h={8}>
+        <Flex
+          role="button"
+          aria-label={t('controlLayers.maskFill')}
+          tabIndex={-1}
+          w={8}
+          h={8}
+          _hover={{ bg: 'base.800' }}
+          _active={{ bg: 'transparent' }}
+          borderRadius="md"
+          transitionDuration="faster"
+        >
           <Tooltip label={t('controlLayers.maskFill')}>
             <Flex w="full" h="full" alignItems="center" justifyContent="center">
               <Box borderRadius="full" w={6} h={6} borderWidth={1} bg={rgbColorToString(fill.color)} />

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton.tsx

@@ -5,7 +5,7 @@ import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/sel
 import { isFilterableEntityIdentifier } from 'features/controlLayers/store/types';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiShootingStarBold } from 'react-icons/pi';
+import { PiFunnelBold } from 'react-icons/pi';
 
 export const EntityListSelectedEntityActionBarFilterButton = memo(() => {
   const { t } = useTranslation();
@@ -25,11 +25,11 @@ export const EntityListSelectedEntityActionBarFilterButton = memo(() => {
       onClick={filter.start}
       isDisabled={filter.isDisabled}
       size="sm"
-      variant="link"
+      variant="ghost"
       alignSelf="stretch"
       aria-label={t('controlLayers.filter.filter')}
       tooltip={t('controlLayers.filter.filter')}
-      icon={<PiShootingStarBold />}
+      icon={<PiFunnelBold />}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton.tsx

@@ -25,7 +25,7 @@ export const EntityListSelectedEntityActionBarTransformButton = memo(() => {
       onClick={transform.start}
       isDisabled={transform.isDisabled}
       size="sm"
-      variant="link"
+      variant="ghost"
       alignSelf="stretch"
       aria-label={t('controlLayers.transform.transform')}
       tooltip={t('controlLayers.transform.transform')}

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolFillColorPicker.tsx

@@ -23,7 +23,17 @@ export const ToolColorPicker = memo(() => {
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <Flex role="button" aria-label={t('controlLayers.fill.fillColor')} tabIndex={-1} w={8} h={8}>
+        <Flex
+          role="button"
+          aria-label={t('controlLayers.fill.fillColor')}
+          tabIndex={-1}
+          w={10}
+          h={10}
+          _hover={{ bg: 'base.800' }}
+          _active={{ bg: 'transparent' }}
+          borderRadius="base"
+          transitionDuration="faster"
+        >
           <Tooltip label={t('controlLayers.fill.fillColor')}>
             <Flex w="full" h="full" alignItems="center" justifyContent="center">
               <Box borderRadius="full" w={6} h={6} borderWidth={1} bg={rgbaColorToString(fill)} />

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityAddOfTypeButton.tsx

@@ -63,7 +63,7 @@ export const CanvasEntityAddOfTypeButton = memo(({ type }: Props) => {
       size="sm"
       aria-label={label}
       tooltip={label}
-      variant="link"
+      variant="ghost"
       icon={<PiPlusBold />}
       onClick={onClick}
       alignSelf="stretch"

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityDeleteButton.tsx

@@ -4,7 +4,7 @@ import { useEntityIdentifierContext } from 'features/controlLayers/contexts/Enti
 import { entityDeleted } from 'features/controlLayers/store/canvasSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiTrashSimpleFill } from 'react-icons/pi';
+import { PiTrashSimpleBold } from 'react-icons/pi';
 
 export const CanvasEntityDeleteButton = memo(() => {
   const { t } = useTranslation();
@@ -19,9 +19,8 @@ export const CanvasEntityDeleteButton = memo(() => {
       size="sm"
       aria-label={t('common.delete')}
       tooltip={t('common.delete')}
-      variant="link"
-      alignSelf="stretch"
-      icon={<PiTrashSimpleFill />}
+      variant="ghost"
+      icon={<PiTrashSimpleBold />}
       onClick={onClick}
       colorScheme="error"
     />

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx

@@ -5,7 +5,7 @@ import { useEntityIsEnabled } from 'features/controlLayers/hooks/useEntityIsEnab
 import { entityIsEnabledToggled } from 'features/controlLayers/store/canvasSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiCircleBold, PiCircleFill } from 'react-icons/pi';
+import { PiCircleDashedBold, PiCircleFill } from 'react-icons/pi';
 
 export const CanvasEntityEnabledToggle = memo(() => {
   const { t } = useTranslation();
@@ -21,9 +21,8 @@ export const CanvasEntityEnabledToggle = memo(() => {
       size="sm"
       aria-label={t(isEnabled ? 'common.enabled' : 'common.disabled')}
       tooltip={t(isEnabled ? 'common.enabled' : 'common.disabled')}
-      variant="link"
-      alignSelf="stretch"
-      icon={isEnabled ? <PiCircleFill /> : <PiCircleBold />}
+      variant="ghost"
+      icon={isEnabled ? <PiCircleFill /> : <PiCircleDashedBold />}
       onClick={onClick}
     />
   );

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityGroupList.tsx

@@ -27,7 +27,7 @@ export const CanvasEntityGroupList = memo(({ isSelected, type, children }: Props
 
   return (
     <Flex flexDir="column" w="full">
-      <Flex w="full" px={1}>
+      <Flex w="full" px={1} gap={0.5}>
         <Flex
           flexGrow={1}
           as={Button}

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderCommonActions.tsx

@@ -10,7 +10,7 @@ export const CanvasEntityHeaderCommonActions = memo(() => {
   const entityIdentifier = useEntityIdentifierContext();
 
   return (
-    <Flex alignSelf="stretch">
+    <Flex alignSelf="stretch" alignItems="center" gap={0.5}>
       <CanvasEntityIsBookmarkedForQuickSwitchToggle />
       {entityIdentifier.type !== 'ip_adapter' && <CanvasEntityIsLockedToggle />}
       <CanvasEntityEnabledToggle />

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsBookmarkedForQuickSwitchToggle.tsx

@@ -25,8 +25,7 @@ export const CanvasEntityIsBookmarkedForQuickSwitchToggle = memo(() => {
       size="sm"
       aria-label={t(isBookmarked ? 'controlLayers.removeBookmark' : 'controlLayers.bookmark')}
       tooltip={t(isBookmarked ? 'controlLayers.removeBookmark' : 'controlLayers.bookmark')}
-      variant="link"
-      alignSelf="stretch"
+      variant={isBookmarked ? 'outline' : 'ghost'}
       icon={isBookmarked ? <PiBookmarkSimpleFill /> : <PiBookmarkSimpleBold />}
       onClick={onClick}
     />

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityIsLockedToggle.tsx

@@ -21,8 +21,7 @@ export const CanvasEntityIsLockedToggle = memo(() => {
       size="sm"
       aria-label={t(isLocked ? 'controlLayers.locked' : 'controlLayers.unlocked')}
       tooltip={t(isLocked ? 'controlLayers.locked' : 'controlLayers.unlocked')}
-      variant="link"
-      alignSelf="stretch"
+      variant={isLocked ? 'outline' : 'ghost'}
       icon={isLocked ? <PiLockSimpleFill /> : <PiLockSimpleOpenBold />}
       onClick={onClick}
     />

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsFilter.tsx

@@ -3,15 +3,15 @@ import { useEntityIdentifierContext } from 'features/controlLayers/contexts/Enti
 import { useEntityFilter } from 'features/controlLayers/hooks/useEntityFilter';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiShootingStarBold } from 'react-icons/pi';
+import { PiFunnelBold } from 'react-icons/pi';
 
 export const CanvasEntityMenuItemsFilter = memo(() => {
   const { t } = useTranslation();
   const entityIdentifier = useEntityIdentifierContext();
   const filter = useEntityFilter(entityIdentifier);
 
   return (
-    <MenuItem onClick={filter.start} icon={<PiShootingStarBold />} isDisabled={filter.isDisabled}>
+    <MenuItem onClick={filter.start} icon={<PiFunnelBold />} isDisabled={filter.isDisabled}>
       {t('controlLayers.filter.filter')}
     </MenuItem>
   );

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMergeVisibleButton.tsx

@@ -83,7 +83,7 @@ export const CanvasEntityMergeVisibleButton = memo(({ type }: Props) => {
       size="sm"
       aria-label={t('controlLayers.mergeVisible')}
       tooltip={t('controlLayers.mergeVisible')}
-      variant="link"
+      variant="ghost"
       icon={<PiStackBold />}
       onClick={onClick}
       alignSelf="stretch"

invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTypeIsHiddenToggle.tsx

@@ -31,7 +31,7 @@ export const CanvasEntityTypeIsHiddenToggle = memo(({ type }: Props) => {
       size="sm"
       aria-label={t(isHidden ? 'controlLayers.hidingType' : 'controlLayers.showingType', { type: typeString })}
       tooltip={t(isHidden ? 'controlLayers.hidingType' : 'controlLayers.showingType', { type: typeString })}
-      variant="link"
+      variant={isHidden ? 'outline' : 'ghost'}
       icon={isHidden ? <PiEyeClosedBold /> : <PiEyeBold />}
       onClick={onClick}
       alignSelf="stretch"