From ba3db55dcf8f0dcb5a8eb830ab8cfb8ed8e22489 Mon Sep 17 00:00:00 2001 From: Waldemar Penner Date: Wed, 15 Dec 2021 08:54:44 +0100 Subject: [PATCH] Bugfix[#4490]: fix options toggle hover state --- .../RowEditor/JsonEditor/TwoOptionToggle.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/TwoOptionToggle.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/TwoOptionToggle.tsx index 708c43879ad..f487fe57301 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/TwoOptionToggle.tsx +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/TwoOptionToggle.tsx @@ -13,8 +13,12 @@ const TwoOptionToggle: FC = ({ onClickOption, borderOverride = 'border-gray-600 dark:border-gray-800', }) => { - const buttonStyle = `absolute top-0 z-1 text-xs inline-flex h-full items-center justify-center font-medium - hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 + const buttonStyle = ( + isActive: boolean + ) => `absolute top-0 z-1 text-xs inline-flex h-full items-center justify-center font-medium + ${ + isActive ? 'hover:text-white' : 'hover:text-gray-600' + } dark:hover:text-white focus:z-10 focus:outline-none focus:border-blue-300 focus:ring-blue active:bg-gray-100 transition ease-in-out duration-150` return ( @@ -36,7 +40,7 @@ const TwoOptionToggle: FC = ({ className={` ${activeOption === option ? 'text-gray-200' : 'text-gray-400'} ${index === 0 ? 'right-0' : 'left-0'} - ${buttonStyle} + ${buttonStyle(activeOption === option)} cursor-pointer `} onClick={() => onClickOption(option)}