feat(ui): use <Alert/> for selected entity alerts

invokeai/frontend/web/src/features/controlLayers/components/HUD/CanvasSelectedEntityStatusAlert.tsx

@@ -1,8 +1,8 @@
-import { Box, Flex, Icon, Text } from '@invoke-ai/ui-library';
+import type { AlertStatus } from '@invoke-ai/ui-library';
+import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
-import type { Property } from 'csstype';
 import { useEntityAdapterSafe } from 'features/controlLayers/contexts/EntityAdapterContext';
 import { useEntityTitle } from 'features/controlLayers/hooks/useEntityTitle';
 import { useEntityTypeIsHidden } from 'features/controlLayers/hooks/useEntityTypeIsHidden';
@@ -16,7 +16,6 @@ import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'
 import { atom } from 'nanostores';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiWarningCircleFill } from 'react-icons/pi';
 
 type ContentProps = {
   entityIdentifier: CanvasEntityIdentifier;
@@ -25,9 +24,10 @@ type ContentProps = {
 
 const $isFilteringFallback = atom(false);
 
-type EntityStatus = {
-  value: string;
-  color?: Property.Color;
+type AlertData = {
+  status: AlertStatus;
+  title: string;
+  description: string;
 };
 
 const CanvasSelectedEntityStatusAlertContent = memo(({ entityIdentifier, adapter }: ContentProps) => {
@@ -47,73 +47,60 @@ const CanvasSelectedEntityStatusAlertContent = memo(({ entityIdentifier, adapter
   const isFiltering = useStore(adapter.filterer?.$isFiltering ?? $isFilteringFallback);
   const isTransforming = useStore(adapter.transformer.$isTransforming);
 
-  const status = useMemo<EntityStatus | null>(() => {
+  const alert = useMemo<AlertData | null>(() => {
     if (isFiltering) {
       return {
-        value: t('controlLayers.HUD.entityStatus.isFiltering'),
-        color: 'invokeBlue.300',
+        status: 'info',
+        title,
+        description: t('controlLayers.HUD.entityStatus.isFiltering'),
       };
     }
 
     if (isTransforming) {
       return {
-        value: t('controlLayers.HUD.entityStatus.isTransforming'),
-        color: 'invokeBlue.300',
+        status: 'info',
+        title,
+        description: t('controlLayers.HUD.entityStatus.isTransforming'),
       };
     }
 
     if (isHidden) {
       return {
-        value: t('controlLayers.HUD.entityStatus.isHidden'),
-        color: 'invokePurple.300',
+        status: 'warning',
+        title,
+        description: t('controlLayers.HUD.entityStatus.isHidden'),
       };
     }
 
     if (isLocked) {
       return {
-        value: t('controlLayers.HUD.entityStatus.isLocked'),
-        color: 'invokeRed.300',
+        status: 'warning',
+        title,
+        description: t('controlLayers.HUD.entityStatus.isLocked'),
       };
     }
 
     if (!isEnabled) {
       return {
-        value: t('controlLayers.HUD.entityStatus.isDisabled'),
-        color: 'invokeRed.300',
+        status: 'warning',
+        title,
+        description: t('controlLayers.HUD.entityStatus.isDisabled'),
       };
     }
 
     return null;
-  }, [isFiltering, isTransforming, isHidden, isLocked, isEnabled, t]);
+  }, [isFiltering, isTransforming, isHidden, isLocked, isEnabled, title, t]);
 
-  if (!status) {
+  if (!alert) {
     return null;
   }
 
   return (
-    <Box position="relative" shadow="dark-lg">
-      <Flex
-        position="absolute"
-        top={0}
-        right={0}
-        left={0}
-        bottom={0}
-        bg={status.color}
-        opacity={0.3}
-        borderRadius="base"
-        borderColor="whiteAlpha.400"
-        borderWidth={1}
-      />
-      <Flex px={6} py={4} gap={6} alignItems="center" justifyContent="center">
-        <Icon as={PiWarningCircleFill} />
-        <Text as="span" h={8}>
-          <Text as="span" fontWeight="semibold">
-            {title}
-          </Text>{' '}
-          {status.value}
-        </Text>
-      </Flex>
-    </Box>
+    <Alert status={alert.status} borderRadius="base" fontSize="sm" shadow="md">
+      <AlertIcon />
+      <AlertTitle>{alert.title}</AlertTitle>
+      <AlertDescription>{alert.description}.</AlertDescription>
+    </Alert>
   );
 });