feat(ui): replace aspect ratio icon

closes #5448

Author: psychedelicious

invokeai/frontend/web/src/features/parameters/components/ImageSize/AspectRatioPreview.tsx

@@ -3,7 +3,7 @@ import { useSize } from '@chakra-ui/react-use-size';
 import { useImageSizeContext } from 'features/parameters/components/ImageSize/ImageSizeContext';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useMemo, useRef } from 'react';
-import { FaImage } from 'react-icons/fa';
+import { PiFrameCorners } from 'react-icons/pi';
 
 import {
   BOX_SIZE_CSS_CALC,
@@ -76,7 +76,7 @@ export const AspectRatioPreview = () => {
               exit={MOTION_ICON_EXIT}
               style={ICON_CONTAINER_STYLES}
             >
-              <Icon as={FaImage} color="base.700" boxSize={BOX_SIZE_CSS_CALC} />
+              <Icon as={PiFrameCorners} color="base.700" boxSize={BOX_SIZE_CSS_CALC} />
             </Flex>
           )}
         </AnimatePresence>

invokeai/frontend/web/src/features/parameters/components/ImageSize/constants.ts

@@ -5,7 +5,7 @@ import type { AspectRatioID, AspectRatioState } from './types';
 // When the aspect ratio is between these two values, we show the icon (experimentally determined)
 export const ICON_LOW_CUTOFF = 0.23;
 export const ICON_HIGH_CUTOFF = 1 / ICON_LOW_CUTOFF;
-export const ICON_SIZE_PX = 48;
+export const ICON_SIZE_PX = 64;
 export const ICON_PADDING_PX = 16;
 export const BOX_SIZE_CSS_CALC = `min(${ICON_SIZE_PX}px, calc(100% - ${ICON_PADDING_PX}px))`;
 export const MOTION_ICON_INITIAL = {