From bd07c86db94951c72bfd9f12069a4f173de875d7 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 15 Aug 2024 14:52:24 +1000
Subject: [PATCH] feat(ui): make style preset menu trigger look like button

---
 .../stylePresets/components/StylePresetMenuTrigger.tsx    | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx
index ac623a4963..bb1c494d88 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx
@@ -1,3 +1,4 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex, IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $isMenuOpen } from 'features/stylePresets/store/isMenuOpen';
@@ -7,6 +8,10 @@ import { PiCaretDownBold } from 'react-icons/pi';
 
 import { ActiveStylePreset } from './ActiveStylePreset';
 
+const _hover: SystemStyleObject = {
+  bg: 'base.750',
+};
+
 export const StylePresetMenuTrigger = () => {
   const isMenuOpen = useStore($isMenuOpen);
   const { t } = useTranslation();
@@ -26,6 +31,9 @@ export const StylePresetMenuTrigger = () => {
       borderRadius="base"
       gap={1}
       role="button"
+      _hover={_hover}
+      transitionProperty="background-color"
+      transitionDuration="normal"
     >
       <ActiveStylePreset />