feat(ui): format warnings tooltip

invoke-ai · Nov 29, 2024 · 46a09d9 · 46a09d9
1 parent df0c7d7
commit 46a09d9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
@@ -176,7 +176,8 @@
         "reset": "Reset",
         "none": "None",
         "new": "New",
-        "generating": "Generating"
+        "generating": "Generating",
+        "warnings": "Warnings"
     },
     "hrf": {
         "hrf": "High Resolution Fix",

diff --git a/.../frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderWarnings.tsx b/.../frontend/web/src/features/controlLayers/components/common/CanvasEntityHeaderWarnings.tsx
@@ -1,4 +1,4 @@
-import { IconButton, ListItem, UnorderedList } from '@invoke-ai/ui-library';
+import { Flex, IconButton, ListItem, Text, UnorderedList } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
@@ -86,12 +86,16 @@ export const CanvasEntityHeaderWarnings = memo(() => {
 CanvasEntityHeaderWarnings.displayName = 'CanvasEntityHeaderWarnings';
 
 const TooltipContent = memo((props: { warnings: string[] }) => {
+  const { t } = useTranslation();
   return (
-    <UnorderedList>
-      {props.warnings.map((warning, index) => (
-        <ListItem key={index}>{warning}</ListItem>
-      ))}
-    </UnorderedList>
+    <Flex flexDir="column">
+      <Text>{t('common.warnings')}:</Text>
+      <UnorderedList>
+        {props.warnings.map((warning, index) => (
+          <ListItem key={index}>{warning}</ListItem>
+        ))}
+      </UnorderedList>
+    </Flex>
   );
 });
 TooltipContent.displayName = 'TooltipContent';