feat(ui): tweak regional prompt box styles

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton.tsx

@@ -12,10 +12,13 @@ export const RegionalGuidanceDeletePromptButton = memo(({ onDelete }: Props) =>
   return (
     <Tooltip label={t('controlLayers.deletePrompt')}>
       <IconButton
-        variant="promptOverlay"
+        variant="link"
         aria-label={t('controlLayers.deletePrompt')}
         icon={<PiTrashSimpleBold />}
         onClick={onDelete}
+        flexGrow={0}
+        size="sm"
+        p={0}
       />
     </Tooltip>
   );

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceNegativePrompt.tsx

@@ -1,17 +1,21 @@
-import { Box, Textarea } from '@invoke-ai/ui-library';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, Flex, Textarea } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { RegionalGuidanceDeletePromptButton } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { rgNegativePromptChanged } from 'features/controlLayers/store/canvasSlice';
 import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
-import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
 import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
 import { PromptPopover } from 'features/prompt/PromptPopover';
 import { usePrompt } from 'features/prompt/usePrompt';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
+const _focusVisible: SystemStyleObject = {
+  outline: 'none',
+};
+
 export const RegionalGuidanceNegativePrompt = memo(() => {
   const entityIdentifier = useEntityIdentifierContext('regional_guidance');
   const selectPrompt = useMemo(
@@ -49,14 +53,25 @@ export const RegionalGuidanceNegativePrompt = memo(() => {
           placeholder={t('parameters.negativePromptPlaceholder')}
           onChange={onChange}
           onKeyDown={onKeyDown}
-          variant="darkFilled"
+          variant="outline"
-          paddingRight={30}
+          paddingInlineStart={2}
+          paddingInlineEnd={8}
           fontSize="sm"
+          zIndex="0 !important"
+          _focusVisible={_focusVisible}
         />
-        <PromptOverlayButtonWrapper>
+        <Flex
+          flexDir="column"
+          gap={2}
+          position="absolute"
+          insetBlockStart={2}
+          insetInlineEnd={0}
+          alignItems="center"
+          justifyContent="center"
+        >
           <RegionalGuidanceDeletePromptButton onDelete={onDeletePrompt} />
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
-        </PromptOverlayButtonWrapper>
+        </Flex>
       </Box>
     </PromptPopover>
   );

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidancePositivePrompt.tsx

@@ -1,17 +1,21 @@
-import { Box, Textarea } from '@invoke-ai/ui-library';
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { Box, Flex, Textarea } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { RegionalGuidanceDeletePromptButton } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceDeletePromptButton';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { rgPositivePromptChanged } from 'features/controlLayers/store/canvasSlice';
 import { selectCanvasSlice, selectEntityOrThrow } from 'features/controlLayers/store/selectors';
-import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
 import { AddPromptTriggerButton } from 'features/prompt/AddPromptTriggerButton';
 import { PromptPopover } from 'features/prompt/PromptPopover';
 import { usePrompt } from 'features/prompt/usePrompt';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
+const _focusVisible: SystemStyleObject = {
+  outline: 'none',
+};
+
 export const RegionalGuidancePositivePrompt = memo(() => {
   const entityIdentifier = useEntityIdentifierContext('regional_guidance');
   const selectPrompt = useMemo(
@@ -49,14 +53,25 @@ export const RegionalGuidancePositivePrompt = memo(() => {
           placeholder={t('parameters.positivePromptPlaceholder')}
           onChange={onChange}
           onKeyDown={onKeyDown}
-          variant="darkFilled"
+          variant="outline"
-          paddingRight={30}
+          paddingInlineStart={2}
+          paddingInlineEnd={8}
           minH={28}
+          zIndex="0 !important"
+          _focusVisible={_focusVisible}
         />
-        <PromptOverlayButtonWrapper>
+        <Flex
+          flexDir="column"
+          gap={2}
+          position="absolute"
+          insetBlockStart={2}
+          insetInlineEnd={0}
+          alignItems="center"
+          justifyContent="center"
+        >
           <RegionalGuidanceDeletePromptButton onDelete={onDeletePrompt} />
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
-        </PromptOverlayButtonWrapper>
+        </Flex>
       </Box>
     </PromptPopover>
   );

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceSettings.tsx

@@ -35,7 +35,7 @@ export const RegionalGuidanceSettings = memo(() => {
       {flags.hasPositivePrompt && (
         <>
           <RegionalGuidancePositivePrompt />
-          {(flags.hasNegativePrompt || flags.hasIPAdapters) && <Divider />}
+          {(!flags.hasNegativePrompt && flags.hasIPAdapters) && <Divider />}
         </>
       )}
       {flags.hasNegativePrompt && (