set default for informational popups to be disabled

invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx

@@ -32,15 +32,15 @@ function IAIInformationalPopover({
   children,
   placement,
 }: Props): JSX.Element {
-  const shouldDisableInformationalPopovers = useAppSelector(
+  const shouldEnableInformationalPopovers = useAppSelector(
-    (state) => state.system.shouldDisableInformationalPopovers
+    (state) => state.system.shouldEnableInformationalPopovers
   );
   const { t } = useTranslation();
 
   const heading = t(`popovers.${details}.heading`);
   const paragraph = t(`popovers.${details}.paragraph`);
 
-  if (shouldDisableInformationalPopovers) {
+  if (!shouldEnableInformationalPopovers) {
     return children;
   } else {
     return (

invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/BoundingBox/ParamBoundingBoxSize.tsx

@@ -1,4 +1,4 @@
-import { Flex, Spacer, Text } from '@chakra-ui/react';
+import { Box, Flex, Spacer, Text } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
@@ -94,6 +94,7 @@ export default function ParamBoundingBoxSize() {
       }}
     >
       <Flex alignItems="center" gap={2}>
+        <Box width="full">
           <IAIInformationalPopover details="paramRatio">
             <Text
               sx={{
@@ -108,6 +109,7 @@ export default function ParamBoundingBoxSize() {
               {t('parameters.aspectRatio')}
             </Text>
           </IAIInformationalPopover>
+        </Box>
         <Spacer />
         <ParamAspectRatio />
         <IAIIconButton

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamSize.tsx

@@ -1,4 +1,4 @@
-import { Flex, Spacer, Text } from '@chakra-ui/react';
+import { Box, Flex, Spacer, Text } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
@@ -84,11 +84,11 @@ export default function ParamSize() {
       }}
     >
       <Flex alignItems="center" gap={2}>
+        <Box width="full">
           <IAIInformationalPopover details="paramRatio">
             <Text
               sx={{
                 fontSize: 'sm',
-              width: 'full',
                 color: 'base.700',
                 _dark: {
                   color: 'base.300',
@@ -98,6 +98,7 @@ export default function ParamSize() {
               {t('parameters.aspectRatio')}
             </Text>
           </IAIInformationalPopover>
+        </Box>
         <Spacer />
         <ParamAspectRatio />
         <IAIIconButton

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -23,7 +23,7 @@ import {
   consoleLogLevelChanged,
   setEnableImageDebugging,
   setShouldConfirmOnDelete,
-  setShouldDisableInformationalPopovers,
+  setShouldEnableInformationalPopovers,
   shouldAntialiasProgressImageChanged,
   shouldLogToConsoleChanged,
   shouldUseNSFWCheckerChanged,
@@ -67,7 +67,7 @@ const selector = createSelector(
       shouldAntialiasProgressImage,
       shouldUseNSFWChecker,
       shouldUseWatermarker,
-      shouldDisableInformationalPopovers,
+      shouldEnableInformationalPopovers,
     } = system;
 
     const {
@@ -87,7 +87,7 @@ const selector = createSelector(
       shouldUseNSFWChecker,
       shouldUseWatermarker,
       shouldAutoChangeDimensions,
-      shouldDisableInformationalPopovers,
+      shouldEnableInformationalPopovers,
     };
   },
   {
@@ -161,7 +161,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
     shouldUseNSFWChecker,
     shouldUseWatermarker,
     shouldAutoChangeDimensions,
-    shouldDisableInformationalPopovers,
+    shouldEnableInformationalPopovers,
   } = useAppSelector(selector);
 
   const handleClickResetWebUI = useCallback(() => {
@@ -312,11 +312,11 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
                   />
                 )}
                 <SettingSwitch
-                  label="Disable informational popovers"
+                  label="Enable informational popovers"
-                  isChecked={shouldDisableInformationalPopovers}
+                  isChecked={shouldEnableInformationalPopovers}
                   onChange={(e: ChangeEvent<HTMLInputElement>) =>
                     dispatch(
-                      setShouldDisableInformationalPopovers(e.target.checked)
+                      setShouldEnableInformationalPopovers(e.target.checked)
                     )
                   }
                 />

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -35,7 +35,7 @@ export const initialSystemState: SystemState = {
   language: 'en',
   shouldUseNSFWChecker: false,
   shouldUseWatermarker: false,
-  shouldDisableInformationalPopovers: false,
+  shouldEnableInformationalPopovers: false,
   status: 'DISCONNECTED',
 };
 
@@ -76,11 +76,11 @@ export const systemSlice = createSlice({
     shouldUseWatermarkerChanged(state, action: PayloadAction<boolean>) {
       state.shouldUseWatermarker = action.payload;
     },
-    setShouldDisableInformationalPopovers(
+    setShouldEnableInformationalPopovers(
       state,
       action: PayloadAction<boolean>
     ) {
-      state.shouldDisableInformationalPopovers = action.payload;
+      state.shouldEnableInformationalPopovers = action.payload;
     },
   },
   extraReducers(builder) {
@@ -241,7 +241,7 @@ export const {
   languageChanged,
   shouldUseNSFWCheckerChanged,
   shouldUseWatermarkerChanged,
-  setShouldDisableInformationalPopovers,
+  setShouldEnableInformationalPopovers,
 } = systemSlice.actions;
 
 export default systemSlice.reducer;

invokeai/frontend/web/src/features/system/store/types.ts

@@ -33,7 +33,7 @@ export interface SystemState {
   shouldUseNSFWChecker: boolean;
   shouldUseWatermarker: boolean;
   status: SystemStatus;
-  shouldDisableInformationalPopovers: boolean;
+  shouldEnableInformationalPopovers: boolean;
 }
 
 export const LANGUAGES = {