Bugfix[#4490]: fix options toggle hover state

studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/TwoOptionToggle.tsx

@@ -13,8 +13,12 @@ const TwoOptionToggle: FC<Props> = ({
   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<Props> = ({
           className={`
               ${activeOption === option ? 'text-gray-200' : 'text-gray-400'} 
               ${index === 0 ? 'right-0' : 'left-0'} 
-              ${buttonStyle}
+              ${buttonStyle(activeOption === option)}
               cursor-pointer
             `}
           onClick={() => onClickOption(option)}