[WebUI] Even off JSX string props

Increased consistency and readability by replacing any unnecessary JSX expressions in places where string literals are sufficient

invokeai/frontend/src/Loading.tsx

@@ -3,8 +3,8 @@ import { Flex, Spinner } from '@chakra-ui/react';
 const Loading = () => {
   return (
     <Flex
-      width={'100vw'}
+      width="100vw"
-      height={'100vh'}
+      height="100vh"
       alignItems="center"
       justifyContent="center"
     >

invokeai/frontend/src/common/components/GuideIcon.tsx

@@ -13,7 +13,7 @@ const GuideIcon = forwardRef(
   ({ feature, icon = MdHelp }: GuideIconProps, ref) => (
     <GuidePopover feature={feature}>
       <Box ref={ref}>
-        <Icon marginBottom={'-.15rem'} as={icon} />
+        <Icon marginBottom="-.15rem" as={icon} />
       </Box>
     </GuidePopover>
   )

invokeai/frontend/src/common/components/GuidePopover.tsx

@@ -29,15 +29,15 @@ const GuidePopover = ({ children, feature }: GuideProps) => {
   if (!shouldDisplayGuides) return null;
 
   return (
-    <Popover trigger={'hover'}>
+    <Popover trigger="hover">
       <PopoverTrigger>
         <Box>{children}</Box>
       </PopoverTrigger>
       <PopoverContent
-        className={`guide-popover-content`}
+        className="guide-popover-content"
         maxWidth="400px"
         onClick={(e) => e.preventDefault()}
-        cursor={'initial'}
+        cursor="initial"
       >
         <PopoverArrow className="guide-popover-arrow" />
         <div className="guide-popover-guide-content">{text}</div>

invokeai/frontend/src/common/components/IAISlider.tsx

@@ -169,7 +169,7 @@ export default function IAISlider(props: IAIFullSliderProps) {
         {label}
       </FormLabel>
 
-      <HStack w={'100%'} gap={2} alignItems="center">
+      <HStack w="100%" gap={2} alignItems="center">
         <Slider
           aria-label={label}
           value={value}
@@ -259,9 +259,9 @@ export default function IAISlider(props: IAIFullSliderProps) {
 
         {withReset && (
           <IAIIconButton
-            size={'sm'}
+            size="sm"
-            aria-label={'Reset'}
+            aria-label="Reset"
-            tooltip={'Reset'}
+            tooltip="Reset"
             icon={<BiReset />}
             onClick={handleResetDisable}
             isDisabled={isResetDisabled}

invokeai/frontend/src/common/components/ImageUploadOverlay.tsx

@@ -24,13 +24,13 @@ const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
     <div className="dropzone-container">
       {isDragAccept && (
         <div className="dropzone-overlay is-drag-accept">
-          <Heading size={'lg'}>Upload Image{overlaySecondaryText}</Heading>
+          <Heading size="lg">Upload Image{overlaySecondaryText}</Heading>
         </div>
       )}
       {isDragReject && (
         <div className="dropzone-overlay is-drag-reject">
-          <Heading size={'lg'}>Invalid Upload</Heading>
+          <Heading size="lg">Invalid Upload</Heading>
-          <Heading size={'md'}>Must be single JPEG or PNG image</Heading>
+          <Heading size="md">Must be single JPEG or PNG image</Heading>
         </div>
       )}
     </div>

invokeai/frontend/src/common/components/ImageUploaderButton.tsx

@@ -22,7 +22,7 @@ const ImageUploaderButton = (props: ImageUploaderButtonProps) => {
     >
       <div className="image-upload-button">
         <FaUpload />
-        <Heading size={'lg'}>Click or Drag and Drop</Heading>
+        <Heading size="lg">Click or Drag and Drop</Heading>
       </div>
     </div>
   );

invokeai/frontend/src/features/canvas/components/ClearCanvasHistoryButtonModal.tsx

@@ -17,7 +17,7 @@ const ClearCanvasHistoryButtonModal = () => {
       acceptCallback={() => dispatch(clearCanvasHistory())}
       acceptButtonText={t('unifiedcanvas:clearHistory')}
       triggerComponent={
-        <IAIButton size={'sm'} leftIcon={<FaTrash />} isDisabled={isStaging}>
+        <IAIButton size="sm" leftIcon={<FaTrash />} isDisabled={isStaging}>
           {t('unifiedcanvas:clearCanvasHistory')}
         </IAIButton>
       }

invokeai/frontend/src/features/canvas/components/IAICanvas.tsx

@@ -140,7 +140,7 @@ const IAICanvas = () => {
         <Stage
           tabIndex={-1}
           ref={canvasStageRefCallback}
-          className={'inpainting-canvas-stage'}
+          className="inpainting-canvas-stage"
           style={{
             ...(stageCursor ? { cursor: stageCursor } : {}),
           }}
@@ -165,19 +165,19 @@ const IAICanvas = () => {
           onWheel={handleWheel}
           draggable={(tool === 'move' || isStaging) && !isModifyingBoundingBox}
         >
-          <Layer id={'grid'} visible={shouldShowGrid}>
+          <Layer id="grid" visible={shouldShowGrid}>
             <IAICanvasGrid />
           </Layer>
 
           <Layer
-            id={'base'}
+            id="base"
             ref={canvasBaseLayerRefCallback}
             listening={false}
             imageSmoothingEnabled={false}
           >
             <IAICanvasObjectRenderer />
           </Layer>
-          <Layer id={'mask'} visible={isMaskEnabled} listening={false}>
+          <Layer id="mask" visible={isMaskEnabled} listening={false}>
             <IAICanvasMaskLines visible={true} listening={false} />
             <IAICanvasMaskCompositer listening={false} />
           </Layer>

invokeai/frontend/src/features/canvas/components/IAICanvasBoundingBoxOverlay.tsx

@@ -49,7 +49,7 @@ const IAICanvasBoundingBoxOverlay = () => {
         offsetY={stageCoordinates.y / stageScale}
         height={stageDimensions.height / stageScale}
         width={stageDimensions.width / stageScale}
-        fill={'rgba(0,0,0,0.4)'}
+        fill="rgba(0,0,0,0.4)"
         listening={false}
         visible={shouldDarkenOutsideBoundingBox}
       />
@@ -58,10 +58,10 @@ const IAICanvasBoundingBoxOverlay = () => {
         y={boundingBoxCoordinates.y}
         width={boundingBoxDimensions.width}
         height={boundingBoxDimensions.height}
-        fill={'rgb(255,255,255)'}
+        fill="rgb(255,255,255)"
         listening={false}
         visible={shouldDarkenOutsideBoundingBox}
-        globalCompositeOperation={'destination-out'}
+        globalCompositeOperation="destination-out"
       />
     </Group>
   );

invokeai/frontend/src/features/canvas/components/IAICanvasMaskCompositer.tsx

@@ -163,10 +163,10 @@ const IAICanvasMaskCompositer = (props: IAICanvasMaskCompositerProps) => {
       width={stageDimensions.width / stageScale}
       fillPatternImage={fillPatternImage}
       fillPatternOffsetY={!isNumber(offset) ? 0 : offset}
-      fillPatternRepeat={'repeat'}
+      fillPatternRepeat="repeat"
       fillPatternScale={{ x: 1 / stageScale, y: 1 / stageScale }}
       listening={true}
-      globalCompositeOperation={'source-in'}
+      globalCompositeOperation="source-in"
       {...rest}
     />
   );

invokeai/frontend/src/features/canvas/components/IAICanvasMaskLines.tsx

@@ -36,7 +36,7 @@ const IAICanvasLines = (props: InpaintingCanvasLinesProps) => {
         <Line
           key={i}
           points={line.points}
-          stroke={'rgb(0,0,0)'} // The lines can be any color, just need alpha > 0
+          stroke="rgb(0,0,0)" // The lines can be any color, just need alpha > 0
           strokeWidth={line.strokeWidth * 2}
           tension={0}
           lineCap="round"

invokeai/frontend/src/features/canvas/components/IAICanvasObjectRenderer.tsx

@@ -93,8 +93,8 @@ const IAICanvasObjectRenderer = () => {
               y={obj.y}
               width={obj.width}
               height={obj.height}
-              fill={'rgb(255, 255, 255)'}
+              fill="rgb(255, 255, 255)"
-              globalCompositeOperation={'destination-out'}
+              globalCompositeOperation="destination-out"
             />
           );
         }

invokeai/frontend/src/features/canvas/components/IAICanvasStagingArea.tsx

@@ -67,7 +67,7 @@ const IAICanvasStagingArea = (props: Props) => {
             width={width}
             height={height}
             strokeWidth={1}
-            stroke={'white'}
+            stroke="white"
             strokeScaleEnabled={false}
           />
           <Rect
@@ -77,7 +77,7 @@ const IAICanvasStagingArea = (props: Props) => {
             height={height}
             dash={[4, 4]}
             strokeWidth={1}
-            stroke={'black'}
+            stroke="black"
             strokeScaleEnabled={false}
           />
         </Group>

invokeai/frontend/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx

@@ -114,11 +114,11 @@ const IAICanvasStagingAreaToolbar = () => {
 
   return (
     <Flex
-      pos={'absolute'}
+      pos="absolute"
-      bottom={'1rem'}
+      bottom="1rem"
-      w={'100%'}
+      w="100%"
-      align={'center'}
+      align="center"
-      justify={'center'}
+      justify="center"
       filter="drop-shadow(0 0.5rem 1rem rgba(0,0,0))"
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}

invokeai/frontend/src/features/canvas/components/IAICanvasToolPreview.tsx

@@ -172,7 +172,7 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
             x={brushX}
             y={brushY}
             radius={radius}
-            stroke={'rgba(255,255,255,0.4)'}
+            stroke="rgba(255,255,255,0.4)"
             strokeWidth={strokeWidth * 2}
             strokeEnabled={true}
             listening={false}
@@ -181,7 +181,7 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
             x={brushX}
             y={brushY}
             radius={radius}
-            stroke={'rgba(0,0,0,1)'}
+            stroke="rgba(0,0,0,1)"
             strokeWidth={strokeWidth}
             strokeEnabled={true}
             listening={false}
@@ -192,14 +192,14 @@ const IAICanvasToolPreview = (props: GroupConfig) => {
         x={brushX}
         y={brushY}
         radius={dotRadius * 2}
-        fill={'rgba(255,255,255,0.4)'}
+        fill="rgba(255,255,255,0.4)"
         listening={false}
       />
       <Circle
         x={brushX}
         y={brushY}
         radius={dotRadius}
-        fill={'rgba(0,0,0,1)'}
+        fill="rgba(0,0,0,1)"
         listening={false}
       />
     </Group>

invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

@@ -269,12 +269,12 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
       <Transformer
         anchorCornerRadius={3}
         anchorDragBoundFunc={anchorDragBoundFunc}
-        anchorFill={'rgba(212,216,234,1)'}
+        anchorFill="rgba(212,216,234,1)"
         anchorSize={15}
-        anchorStroke={'rgb(42,42,42)'}
+        anchorStroke="rgb(42,42,42)"
         borderDash={[4, 4]}
         borderEnabled={true}
-        borderStroke={'black'}
+        borderStroke="black"
         draggable={false}
         enabledAnchors={tool === 'move' ? undefined : []}
         flipEnabled={false}

invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx

@@ -121,7 +121,7 @@ const IAICanvasMaskOptions = () => {
         </ButtonGroup>
       }
     >
-      <Flex direction={'column'} gap={'0.5rem'}>
+      <Flex direction="column" gap="0.5rem">
         <IAICheckbox
           label={`${t('unifiedcanvas:enableMask')} (H)`}
           isChecked={isMaskEnabled}
@@ -139,7 +139,7 @@ const IAICanvasMaskOptions = () => {
           color={maskColor}
           onChange={(newColor) => dispatch(setMaskColor(newColor))}
         />
-        <IAIButton size={'sm'} leftIcon={<FaTrash />} onClick={handleClearMask}>
+        <IAIButton size="sm" leftIcon={<FaTrash />} onClick={handleClearMask}>
           {t('unifiedcanvas:clearMask')} (Shift+C)
         </IAIButton>
       </Flex>

invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -97,7 +97,7 @@ const IAICanvasSettingsButtonPopover = () => {
         />
       }
     >
-      <Flex direction={'column'} gap={'0.5rem'}>
+      <Flex direction="column" gap="0.5rem">
         <IAICheckbox
           label={t('unifiedcanvas:showIntermediates')}
           isChecked={shouldShowIntermediates}

invokeai/frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx

@@ -228,13 +228,8 @@ const IAICanvasToolChooserOptions = () => {
           />
         }
       >
-        <Flex
+        <Flex minWidth="15rem" direction="column" gap="1rem" width="100%">
-          minWidth={'15rem'}
+          <Flex gap="1rem" justifyContent="space-between">
-          direction={'column'}
-          gap={'1rem'}
-          width={'100%'}
-        >
-          <Flex gap={'1rem'} justifyContent="space-between">
             <IAISlider
               label={t('unifiedcanvas:brushSize')}
               value={brushSize}

invokeai/frontend/src/features/gallery/components/CurrentImageButtons.tsx

@@ -415,14 +415,14 @@ const CurrentImageButtons = () => {
         >
           <div className="current-image-send-to-popover">
             <IAIButton
-              size={'sm'}
+              size="sm"
               onClick={handleClickUseAsInitialImage}
               leftIcon={<FaShare />}
             >
               {t('parameters:sendToImg2Img')}
             </IAIButton>
             <IAIButton
-              size={'sm'}
+              size="sm"
               onClick={handleSendToCanvas}
               leftIcon={<FaShare />}
             >
@@ -430,14 +430,14 @@ const CurrentImageButtons = () => {
             </IAIButton>
 
             <IAIButton
-              size={'sm'}
+              size="sm"
               onClick={handleCopyImage}
               leftIcon={<FaCopy />}
             >
               {t('parameters:copyImage')}
             </IAIButton>
             <IAIButton
-              size={'sm'}
+              size="sm"
               onClick={handleCopyImageLink}
               leftIcon={<FaCopy />}
             >
@@ -445,7 +445,7 @@ const CurrentImageButtons = () => {
             </IAIButton>
 
             <Link download={true} href={currentImage?.url}>
-              <IAIButton leftIcon={<FaDownload />} size={'sm'} w="100%">
+              <IAIButton leftIcon={<FaDownload />} size="sm" w="100%">
                 {t('parameters:downloadImage')}
               </IAIButton>
             </Link>

invokeai/frontend/src/features/gallery/components/CurrentImagePreview.tsx

@@ -82,7 +82,7 @@ export default function CurrentImagePreview() {
   };
 
   return (
-    <div className={'current-image-preview'}>
+    <div className="current-image-preview">
       {imageToDisplay && (
         <Image
           src={imageToDisplay.url}

invokeai/frontend/src/features/gallery/components/DeleteImageModal.tsx

@@ -116,13 +116,13 @@ const DeleteImageModal = forwardRef(
               </AlertDialogHeader>
 
               <AlertDialogBody>
-                <Flex direction={'column'} gap={5}>
+                <Flex direction="column" gap={5}>
                   <Text>
                     Are you sure? Deleted images will be sent to the Bin. You
                     can restore from there if you wish to.
                   </Text>
                   <FormControl>
-                    <Flex alignItems={'center'}>
+                    <Flex alignItems="center">
                       <FormLabel mb={0}>Don&apos;t ask me again</FormLabel>
                       <Switch
                         checked={!shouldConfirmOnDelete}

invokeai/frontend/src/features/gallery/components/HoverableImage.tsx

@@ -175,12 +175,12 @@ const HoverableImage = memo((props: HoverableImageProps) => {
     >
       <ContextMenu.Trigger>
         <Box
-          position={'relative'}
+          position="relative"
           key={uuid}
           className="hoverable-image"
           onMouseOver={handleMouseOver}
           onMouseOut={handleMouseOut}
-          userSelect={'none'}
+          userSelect="none"
           draggable={true}
           onDragStart={handleDragStart}
         >
@@ -189,15 +189,15 @@ const HoverableImage = memo((props: HoverableImageProps) => {
             objectFit={
               shouldUseSingleGalleryColumn ? 'contain' : galleryImageObjectFit
             }
-            rounded={'md'}
+            rounded="md"
             src={thumbnail || url}
-            loading={'lazy'}
+            loading="lazy"
           />
           <div className="hoverable-image-content" onClick={handleSelectImage}>
             {isSelected && (
               <Icon
-                width={'50%'}
+                width="50%"
-                height={'50%'}
+                height="50%"
                 as={FaCheck}
                 className="hoverable-image-check"
               />
@@ -210,7 +210,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
                   aria-label={t('parameters:deleteImage')}
                   icon={<FaTrashAlt />}
                   size="xs"
-                  variant={'imageHoverIconButton'}
+                  variant="imageHoverIconButton"
                   fontSize={14}
                   isDisabled={!mayDeleteImage}
                 />
@@ -221,7 +221,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
       </ContextMenu.Trigger>
       <ContextMenu.Content
         className="hoverable-image-context-menu"
-        sticky={'always'}
+        sticky="always"
         onInteractOutside={(e) => {
           e.detail.originalEvent.preventDefault();
         }}

invokeai/frontend/src/features/gallery/components/ImageGallery.tsx

@@ -281,7 +281,7 @@ export default function ImageGallery() {
         <Resizable
           minWidth={galleryMinWidth}
           maxWidth={shouldPinGallery ? galleryMaxWidth : window.innerWidth}
-          className={'image-gallery-popup'}
+          className="image-gallery-popup"
           handleStyles={{
             left: {
               width: '15px',
@@ -395,14 +395,14 @@ export default function ImageGallery() {
               {shouldShowButtons ? (
                 <>
                   <IAIButton
-                    size={'sm'}
+                    size="sm"
                     data-selected={currentCategory === 'result'}
                     onClick={() => dispatch(setCurrentCategory('result'))}
                   >
                     {t('gallery:generations')}
                   </IAIButton>
                   <IAIButton
-                    size={'sm'}
+                    size="sm"
                     data-selected={currentCategory === 'user'}
                     onClick={() => dispatch(setCurrentCategory('user'))}
                   >
@@ -433,14 +433,14 @@ export default function ImageGallery() {
               <IAIPopover
                 isLazy
                 trigger="hover"
-                placement={'left'}
+                placement="left"
                 triggerComponent={
                   <IAIIconButton
-                    size={'sm'}
+                    size="sm"
                     aria-label={t('gallery:gallerySettings')}
                     icon={<FaWrench />}
                     className="image-gallery-icon-btn"
-                    cursor={'pointer'}
+                    cursor="pointer"
                   />
                 }
               >
@@ -455,7 +455,7 @@ export default function ImageGallery() {
                       label={t('gallery:galleryImageSize')}
                     />
                     <IAIIconButton
-                      size={'sm'}
+                      size="sm"
                       aria-label={t('gallery:galleryImageResetSize')}
                       tooltip={t('gallery:galleryImageResetSize')}
                       onClick={() => dispatch(setGalleryImageMinimumWidth(64))}
@@ -505,8 +505,8 @@ export default function ImageGallery() {
               </IAIPopover>
 
               <IAIIconButton
-                size={'sm'}
+                size="sm"
-                className={'image-gallery-icon-btn'}
+                className="image-gallery-icon-btn"
                 aria-label={t('gallery:pinGallery')}
                 tooltip={`${t('gallery:pinGallery')} (Shift+G)`}
                 onClick={handleSetShouldPinGallery}

invokeai/frontend/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx

@@ -71,8 +71,8 @@ const MetadataItem = ({
           <IconButton
             aria-label="Use this parameter"
             icon={<IoArrowUndoCircleOutline />}
-            size={'xs'}
+            size="xs"
-            variant={'ghost'}
+            variant="ghost"
             fontSize={20}
             onClick={onClick}
           />
@@ -83,23 +83,23 @@ const MetadataItem = ({
           <IconButton
             aria-label={`Copy ${label}`}
             icon={<FaCopy />}
-            size={'xs'}
+            size="xs"
-            variant={'ghost'}
+            variant="ghost"
             fontSize={14}
             onClick={() => navigator.clipboard.writeText(value.toString())}
           />
         </Tooltip>
       )}
       <Flex direction={labelPosition ? 'column' : 'row'}>
-        <Text fontWeight={'semibold'} whiteSpace={'pre-wrap'} pr={2}>
+        <Text fontWeight="semibold" whiteSpace="pre-wrap" pr={2}>
           {label}:
         </Text>
         {isLink ? (
-          <Link href={value.toString()} isExternal wordBreak={'break-all'}>
+          <Link href={value.toString()} isExternal wordBreak="break-all">
             {value.toString()} <ExternalLinkIcon mx="2px" />
           </Link>
         ) : (
-          <Text overflowY={'scroll'} wordBreak={'break-all'}>
+          <Text overflowY="scroll" wordBreak="break-all">
             {value.toString()}
           </Text>
         )}
@@ -163,10 +163,10 @@ const ImageMetadataViewer = memo(
 
     return (
       <div className={`image-metadata-viewer ${styleClass}`}>
-        <Flex gap={1} direction={'column'} width={'100%'}>
+        <Flex gap={1} direction="column" width="100%">
           <Flex gap={2}>
-            <Text fontWeight={'semibold'}>File:</Text>
+            <Text fontWeight="semibold">File:</Text>
-            <Link href={image.url} isExternal maxW={'calc(100% - 3rem)'}>
+            <Link href={image.url} isExternal maxW="calc(100% - 3rem)">
               {image.url.length > 64
                 ? image.url.substring(0, 64).concat('...')
                 : image.url}
@@ -304,7 +304,7 @@ const ImageMetadataViewer = memo(
               )}
               {postprocessing && postprocessing.length > 0 && (
                 <>
-                  <Heading size={'sm'}>Postprocessing</Heading>
+                  <Heading size="sm">Postprocessing</Heading>
                   {postprocessing.map(
                     (
                       postprocess: InvokeAI.PostProcessedImageMetadata,
@@ -313,13 +313,8 @@ const ImageMetadataViewer = memo(
                       if (postprocess.type === 'esrgan') {
                         const { scale, strength, denoise_str } = postprocess;
                         return (
-                          <Flex
+                          <Flex key={i} pl="2rem" gap={1} direction="column">
-                            key={i}
+                            <Text size="md">{`${
-                            pl={'2rem'}
-                            gap={1}
-                            direction={'column'}
-                          >
-                            <Text size={'md'}>{`${
                               i + 1
                             }: Upscale (ESRGAN)`}</Text>
                             <MetadataItem
@@ -348,13 +343,8 @@ const ImageMetadataViewer = memo(
                       } else if (postprocess.type === 'gfpgan') {
                         const { strength } = postprocess;
                         return (
-                          <Flex
+                          <Flex key={i} pl="2rem" gap={1} direction="column">
-                            key={i}
+                            <Text size="md">{`${
-                            pl={'2rem'}
-                            gap={1}
-                            direction={'column'}
-                          >
-                            <Text size={'md'}>{`${
                               i + 1
                             }: Face restoration (GFPGAN)`}</Text>
 
@@ -371,13 +361,8 @@ const ImageMetadataViewer = memo(
                       } else if (postprocess.type === 'codeformer') {
                         const { strength, fidelity } = postprocess;
                         return (
-                          <Flex
+                          <Flex key={i} pl="2rem" gap={1} direction="column">
-                            key={i}
+                            <Text size="md">{`${
-                            pl={'2rem'}
-                            gap={1}
-                            direction={'column'}
-                          >
-                            <Text size={'md'}>{`${
                               i + 1
                             }: Face restoration (Codeformer)`}</Text>
 
@@ -413,30 +398,30 @@ const ImageMetadataViewer = memo(
                   value={dreamPrompt}
                 />
               )}
-              <Flex gap={2} direction={'column'}>
+              <Flex gap={2} direction="column">
                 <Flex gap={2}>
-                  <Tooltip label={`Copy metadata JSON`}>
+                  <Tooltip label="Copy metadata JSON">
                     <IconButton
                       aria-label="Copy metadata JSON"
                       icon={<FaCopy />}
-                      size={'xs'}
+                      size="xs"
-                      variant={'ghost'}
+                      variant="ghost"
                       fontSize={14}
                       onClick={() =>
                         navigator.clipboard.writeText(metadataJSON)
                       }
                     />
                   </Tooltip>
-                  <Text fontWeight={'semibold'}>Metadata JSON:</Text>
+                  <Text fontWeight="semibold">Metadata JSON:</Text>
                 </Flex>
-                <div className={'image-json-viewer'}>
+                <div className="image-json-viewer">
                   <pre>{metadataJSON}</pre>
                 </div>
               </Flex>
             </>
           ) : (
-            <Center width={'100%'} pt={10}>
+            <Center width="100%" pt={10}>
-              <Text fontSize={'lg'} fontWeight="semibold">
+              <Text fontSize="lg" fontWeight="semibold">
                 No metadata available
               </Text>
             </Center>

invokeai/frontend/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx

@@ -23,8 +23,8 @@ export default function InvokeAccordionItem(props: InvokeAccordionItemProps) {
   return (
     <AccordionItem className="advanced-parameters-item">
       <AccordionButton className="advanced-parameters-header">
-        <Flex width={'100%'} gap={'0.5rem'} align={'center'}>
+        <Flex width="100%" gap="0.5rem" align="center">
-          <Box flexGrow={1} textAlign={'left'}>
+          <Box flexGrow={1} textAlign="left">
             {header}
           </Box>
           {additionalHeaderComponents}

invokeai/frontend/src/features/parameters/components/AdvancedParameters/FaceRestore/FaceRestoreSettings.tsx

@@ -63,7 +63,7 @@ const FaceRestoreSettings = () => {
   const { t } = useTranslation();
 
   return (
-    <Flex direction={'column'} gap={2}>
+    <Flex direction="column" gap={2}>
       <IAISelect
         label={t('parameters:type')}
         validValues={FACETOOL_TYPES.concat()}

invokeai/frontend/src/features/parameters/components/AdvancedParameters/ImageToImage/ImageToImageStrength.tsx

@@ -36,7 +36,7 @@ export default function ImageToImageStrength(props: ImageToImageStrengthProps) {
       styleClass={styleClass}
       withInput
       withSliderMarks
-      inputWidth={'5.5rem'}
+      inputWidth="5.5rem"
       withReset
       handleReset={handleImg2ImgStrengthReset}
     />

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/HiresSettings.tsx

@@ -49,7 +49,7 @@ const HiresStrength = () => {
       isInteger={false}
       withInput
       withSliderMarks
-      inputWidth={'5.5rem'}
+      inputWidth="5.5rem"
       withReset
       handleReset={handleHiResStrengthReset}
       isSliderDisabled={!hiresFix}
@@ -75,10 +75,10 @@ const HiresSettings = () => {
     dispatch(setHiresFix(e.target.checked));
 
   return (
-    <Flex gap={2} direction={'column'}>
+    <Flex gap={2} direction="column">
       <IAISwitch
         label={t('parameters:hiresOptim')}
-        fontSize={'md'}
+        fontSize="md"
         isChecked={hiresFix}
         onChange={handleChangeHiresFix}
       />

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/ImageToImageOutputSettings.tsx

@@ -3,7 +3,7 @@ import SeamlessSettings from './SeamlessSettings';
 
 const ImageToImageOutputSettings = () => {
   return (
-    <Flex gap={2} direction={'column'}>
+    <Flex gap={2} direction="column">
       <SeamlessSettings />
     </Flex>
   );

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/OutputSettings.tsx

@@ -4,7 +4,7 @@ import SeamlessSettings from './SeamlessSettings';
 
 const OutputSettings = () => {
   return (
-    <Flex gap={2} direction={'column'}>
+    <Flex gap={2} direction="column">
       <SeamlessSettings />
       <HiresSettings />
     </Flex>

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Output/SeamlessSettings.tsx

@@ -22,10 +22,10 @@ const SeamlessSettings = () => {
   const { t } = useTranslation();
 
   return (
-    <Flex gap={2} direction={'column'}>
+    <Flex gap={2} direction="column">
       <IAISwitch
         label={t('parameters:seamlessTiling')}
-        fontSize={'md'}
+        fontSize="md"
         isChecked={seamless}
         onChange={handleChangeSeamless}
       />

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/SeedSettings.tsx

@@ -10,7 +10,7 @@ import Threshold from './Threshold';
  */
 const SeedSettings = () => {
   return (
-    <Flex gap={2} direction={'column'}>
+    <Flex gap={2} direction="column">
       <RandomizeSeed />
       <Flex gap={2}>
         <Seed />

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Seed/ShuffleSeed.tsx

@@ -18,7 +18,7 @@ export default function ShuffleSeed() {
 
   return (
     <Button
-      size={'sm'}
+      size="sm"
       isDisabled={shouldRandomizeSeed}
       onClick={handleClickRandomizeSeed}
       padding="0 1.5rem"

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Variations/GenerateVariations.tsx

@@ -18,7 +18,7 @@ export default function GenerateVariationsToggle() {
   return (
     <IAISwitch
       isChecked={shouldGenerateVariations}
-      width={'auto'}
+      width="auto"
       onChange={handleChangeShouldGenerateVariations}
     />
   );

invokeai/frontend/src/features/parameters/components/AdvancedParameters/Variations/VariationsSettings.tsx

@@ -7,7 +7,7 @@ import VariationAmount from './VariationAmount';
  */
 const VariationsSettings = () => {
   return (
-    <Flex gap={2} direction={'column'}>
+    <Flex gap={2} direction="column">
       <VariationAmount />
       <SeedWeights />
     </Flex>

invokeai/frontend/src/features/parameters/components/PromptInput/PromptInput.tsx

@@ -71,7 +71,7 @@ const PromptInput = () => {
           id="prompt"
           name="prompt"
           placeholder={t('parameters:promptPlaceholder')}
-          size={'lg'}
+          size="lg"
           value={prompt}
           onChange={handleChangePrompt}
           onKeyDown={handleKeyDown}

invokeai/frontend/src/features/system/components/ClearTempFolderButtonModal.tsx

@@ -27,7 +27,7 @@ const EmptyTempFolderButtonModal = () => {
       acceptCallback={acceptCallback}
       acceptButtonText={t('unifiedcanvas:emptyFolder')}
       triggerComponent={
-        <IAIButton leftIcon={<FaTrash />} size={'sm'} isDisabled={isStaging}>
+        <IAIButton leftIcon={<FaTrash />} size="sm" isDisabled={isStaging}>
           {t('unifiedcanvas:emptyTempImageFolder')}
         </IAIButton>
       }

invokeai/frontend/src/features/system/components/Console.tsx

@@ -109,7 +109,7 @@ const Console = () => {
             bottom: 0,
             zIndex: 9999,
           }}
-          maxHeight={'90vh'}
+          maxHeight="90vh"
         >
           <div className="console" ref={viewerRef} onScroll={handleOnScroll}>
             {log.map((entry, i) => {
@@ -130,11 +130,11 @@ const Console = () => {
           label={shouldAutoscroll ? 'Autoscroll On' : 'Autoscroll Off'}
         >
           <IconButton
-            className={'console-autoscroll-icon-button'}
+            className="console-autoscroll-icon-button"
             data-autoscroll-enabled={shouldAutoscroll}
             size="sm"
             aria-label="Toggle autoscroll"
-            variant={'solid'}
+            variant="solid"
             icon={<FaAngleDoubleDown />}
             onClick={() => setShouldAutoscroll(!shouldAutoscroll)}
           />
@@ -145,11 +145,11 @@ const Console = () => {
         label={shouldShowLogViewer ? 'Hide Console' : 'Show Console'}
       >
         <IconButton
-          className={'console-toggle-icon-button'}
+          className="console-toggle-icon-button"
           data-error-seen={hasError || !wasErrorSeen}
           size="sm"
-          position={'fixed'}
+          position="fixed"
-          variant={'solid'}
+          variant="solid"
           aria-label="Toggle Log Viewer"
           icon={shouldShowLogViewer ? <FaMinus /> : <FaCode />}
           onClick={handleClickLogViewerToggle}

invokeai/frontend/src/features/system/components/LanguagePicker.tsx

@@ -55,7 +55,7 @@ export default function LanguagePicker() {
           aria-label={t('common:languagePickerLabel')}
           tooltip={t('common:languagePickerLabel')}
           icon={<FaLanguage />}
-          size={'sm'}
+          size="sm"
           variant="link"
           data-variant="link"
           fontSize={26}

invokeai/frontend/src/features/system/components/ModelManager/AddCheckpointModel.tsx

@@ -99,8 +99,8 @@ export default function AddCheckpointModel() {
         >
           {({ handleSubmit, errors, touched }) => (
             <form onSubmit={handleSubmit}>
-              <VStack rowGap={'0.5rem'}>
+              <VStack rowGap="0.5rem">
-                <Text fontSize={20} fontWeight="bold" alignSelf={'start'}>
+                <Text fontSize={20} fontWeight="bold" alignSelf="start">
                   {t('modelmanager:manual')}
                 </Text>
                 {/* Name */}
@@ -111,7 +111,7 @@ export default function AddCheckpointModel() {
                   <FormLabel htmlFor="name" fontSize="sm">
                     {t('modelmanager:name')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="name"
@@ -138,7 +138,7 @@ export default function AddCheckpointModel() {
                   <FormLabel htmlFor="description" fontSize="sm">
                     {t('modelmanager:description')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="description"
@@ -164,7 +164,7 @@ export default function AddCheckpointModel() {
                   <FormLabel htmlFor="config" fontSize="sm">
                     {t('modelmanager:config')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="config"
@@ -190,7 +190,7 @@ export default function AddCheckpointModel() {
                   <FormLabel htmlFor="config" fontSize="sm">
                     {t('modelmanager:modelLocation')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="weights"
@@ -213,7 +213,7 @@ export default function AddCheckpointModel() {
                   <FormLabel htmlFor="vae" fontSize="sm">
                     {t('modelmanager:vaeLocation')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="vae"
@@ -231,13 +231,13 @@ export default function AddCheckpointModel() {
                   </VStack>
                 </FormControl>
 
-                <HStack width={'100%'}>
+                <HStack width="100%">
                   {/* Width */}
                   <FormControl isInvalid={!!errors.width && touched.width}>
                     <FormLabel htmlFor="width" fontSize="sm">
                       {t('modelmanager:width')}
                     </FormLabel>
-                    <VStack alignItems={'start'}>
+                    <VStack alignItems="start">
                       <Field id="width" name="width">
                         {({
                           field,
@@ -276,7 +276,7 @@ export default function AddCheckpointModel() {
                     <FormLabel htmlFor="height" fontSize="sm">
                       {t('modelmanager:height')}
                     </FormLabel>
-                    <VStack alignItems={'start'}>
+                    <VStack alignItems="start">
                       <Field id="height" name="height">
                         {({
                           field,

invokeai/frontend/src/features/system/components/ModelManager/AddDiffusersModel.tsx

@@ -105,7 +105,7 @@ export default function AddDiffusersModel() {
       >
         {({ handleSubmit, errors, touched }) => (
           <form onSubmit={handleSubmit}>
-            <VStack rowGap={'0.5rem'}>
+            <VStack rowGap="0.5rem">
               <FormItemWrapper>
                 {/* Name */}
                 <FormControl
@@ -115,7 +115,7 @@ export default function AddDiffusersModel() {
                   <FormLabel htmlFor="name" fontSize="sm">
                     {t('modelmanager:name')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="name"
@@ -145,7 +145,7 @@ export default function AddDiffusersModel() {
                   <FormLabel htmlFor="description" fontSize="sm">
                     {t('modelmanager:description')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="description"
@@ -182,7 +182,7 @@ export default function AddDiffusersModel() {
                   <FormLabel htmlFor="path" fontSize="sm">
                     {t('modelmanager:modelLocation')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="path"
@@ -205,7 +205,7 @@ export default function AddDiffusersModel() {
                   <FormLabel htmlFor="repo_id" fontSize="sm">
                     {t('modelmanager:repo_id')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="repo_id"
@@ -242,7 +242,7 @@ export default function AddDiffusersModel() {
                   <FormLabel htmlFor="vae.path" fontSize="sm">
                     {t('modelmanager:vaeLocation')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="vae.path"
@@ -267,7 +267,7 @@ export default function AddDiffusersModel() {
                   <FormLabel htmlFor="vae.repo_id" fontSize="sm">
                     {t('modelmanager:vaeRepoID')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="vae.repo_id"

invokeai/frontend/src/features/system/components/ModelManager/AddModel.tsx

@@ -72,9 +72,9 @@ export default function AddModel() {
         tooltip={t('modelmanager:addNewModel')}
         onClick={onOpen}
         className="modal-close-btn"
-        size={'sm'}
+        size="sm"
       >
-        <Flex columnGap={'0.5rem'} alignItems="center">
+        <Flex columnGap="0.5rem" alignItems="center">
           <FaPlus />
           {t('modelmanager:addNew')}
         </Flex>

invokeai/frontend/src/features/system/components/ModelManager/CheckpointModelEdit.tsx

@@ -119,7 +119,7 @@ export default function CheckpointModelEdit() {
         >
           {({ handleSubmit, errors, touched }) => (
             <form onSubmit={handleSubmit}>
-              <VStack rowGap={'0.5rem'} alignItems="start">
+              <VStack rowGap="0.5rem" alignItems="start">
                 {/* Description */}
                 <FormControl
                   isInvalid={!!errors.description && touched.description}
@@ -128,7 +128,7 @@ export default function CheckpointModelEdit() {
                   <FormLabel htmlFor="description" fontSize="sm">
                     {t('modelmanager:description')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="description"
@@ -154,7 +154,7 @@ export default function CheckpointModelEdit() {
                   <FormLabel htmlFor="config" fontSize="sm">
                     {t('modelmanager:config')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="config"
@@ -180,7 +180,7 @@ export default function CheckpointModelEdit() {
                   <FormLabel htmlFor="config" fontSize="sm">
                     {t('modelmanager:modelLocation')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="weights"
@@ -203,7 +203,7 @@ export default function CheckpointModelEdit() {
                   <FormLabel htmlFor="vae" fontSize="sm">
                     {t('modelmanager:vaeLocation')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="vae"
@@ -221,13 +221,13 @@ export default function CheckpointModelEdit() {
                   </VStack>
                 </FormControl>
 
-                <HStack width={'100%'}>
+                <HStack width="100%">
                   {/* Width */}
                   <FormControl isInvalid={!!errors.width && touched.width}>
                     <FormLabel htmlFor="width" fontSize="sm">
                       {t('modelmanager:width')}
                     </FormLabel>
-                    <VStack alignItems={'start'}>
+                    <VStack alignItems="start">
                       <Field id="width" name="width">
                         {({
                           field,
@@ -265,7 +265,7 @@ export default function CheckpointModelEdit() {
                     <FormLabel htmlFor="height" fontSize="sm">
                       {t('modelmanager:height')}
                     </FormLabel>
-                    <VStack alignItems={'start'}>
+                    <VStack alignItems="start">
                       <Field id="height" name="height">
                         {({
                           field,

invokeai/frontend/src/features/system/components/ModelManager/DiffusersModelEdit.tsx

@@ -128,7 +128,7 @@ export default function DiffusersModelEdit() {
         >
           {({ handleSubmit, errors, touched }) => (
             <form onSubmit={handleSubmit}>
-              <VStack rowGap={'0.5rem'} alignItems="start">
+              <VStack rowGap="0.5rem" alignItems="start">
                 {/* Description */}
                 <FormControl
                   isInvalid={!!errors.description && touched.description}
@@ -137,7 +137,7 @@ export default function DiffusersModelEdit() {
                   <FormLabel htmlFor="description" fontSize="sm">
                     {t('modelmanager:description')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="description"
@@ -163,7 +163,7 @@ export default function DiffusersModelEdit() {
                   <FormLabel htmlFor="path" fontSize="sm">
                     {t('modelmanager:modelLocation')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="path"
@@ -186,7 +186,7 @@ export default function DiffusersModelEdit() {
                   <FormLabel htmlFor="repo_id" fontSize="sm">
                     {t('modelmanager:repo_id')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="repo_id"
@@ -211,7 +211,7 @@ export default function DiffusersModelEdit() {
                   <FormLabel htmlFor="vae.path" fontSize="sm">
                     {t('modelmanager:vaeLocation')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="vae.path"
@@ -236,7 +236,7 @@ export default function DiffusersModelEdit() {
                   <FormLabel htmlFor="vae.repo_id" fontSize="sm">
                     {t('modelmanager:vaeRepoID')}
                   </FormLabel>
-                  <VStack alignItems={'start'}>
+                  <VStack alignItems="start">
                     <Field
                       as={IAIInput}
                       id="vae.repo_id"

invokeai/frontend/src/features/system/components/ModelManager/ModelList.tsx

@@ -176,9 +176,9 @@ const ModelList = () => {
   }, [models, searchText, t, isSelectedFilter]);
 
   return (
-    <Flex flexDirection={'column'} rowGap="2rem" width="50%" minWidth="50%">
+    <Flex flexDirection="column" rowGap="2rem" width="50%" minWidth="50%">
-      <Flex justifyContent={'space-between'}>
+      <Flex justifyContent="space-between">
-        <Text fontSize={'1.4rem'} fontWeight="bold">
+        <Text fontSize="1.4rem" fontWeight="bold">
           {t('modelmanager:availableModels')}
         </Text>
         <AddModel />
@@ -190,10 +190,10 @@ const ModelList = () => {
       />
 
       <Flex
-        flexDirection={'column'}
+        flexDirection="column"
         gap={1}
         maxHeight={window.innerHeight - 360}
-        overflow={'scroll'}
+        overflow="scroll"
         paddingRight="1rem"
       >
         <Flex columnGap="0.5rem">

invokeai/frontend/src/features/system/components/ModelManager/ModelListItem.tsx

@@ -56,7 +56,7 @@ export default function ModelListItem(props: ModelListItemProps) {
 
   return (
     <Flex
-      alignItems={'center'}
+      alignItems="center"
       padding="0.5rem 0.5rem"
       borderRadius="0.2rem"
       backgroundColor={name === openModel ? 'var(--accent-color)' : ''}
@@ -69,14 +69,14 @@ export default function ModelListItem(props: ModelListItemProps) {
     >
       <Box onClick={openModelHandler} cursor="pointer">
         <Tooltip label={description} hasArrow placement="bottom">
-          <Text fontWeight={'bold'}>{name}</Text>
+          <Text fontWeight="bold">{name}</Text>
         </Tooltip>
       </Box>
       <Spacer onClick={openModelHandler} cursor="pointer" />
       <Flex gap={2} alignItems="center">
         <Text color={statusTextColor()}>{status}</Text>
         <Button
-          size={'sm'}
+          size="sm"
           onClick={handleChangeModel}
           isDisabled={status === 'active' || isProcessing || !isConnected}
           className="modal-close-btn"
@@ -85,7 +85,7 @@ export default function ModelListItem(props: ModelListItemProps) {
         </Button>
         <IAIIconButton
           icon={<EditIcon />}
-          size={'sm'}
+          size="sm"
           onClick={openModelHandler}
           aria-label="Modify Config"
           isDisabled={status === 'active' || isProcessing || !isConnected}
@@ -98,7 +98,7 @@ export default function ModelListItem(props: ModelListItemProps) {
           triggerComponent={
             <IAIIconButton
               icon={<DeleteIcon />}
-              size={'sm'}
+              size="sm"
               aria-label={t('modelmanager:deleteConfig')}
               isDisabled={status === 'active' || isProcessing || !isConnected}
               className=" modal-close-btn"
@@ -106,7 +106,7 @@ export default function ModelListItem(props: ModelListItemProps) {
             />
           }
         >
-          <Flex rowGap={'1rem'} flexDirection="column">
+          <Flex rowGap="1rem" flexDirection="column">
             <p style={{ fontWeight: 'bold' }}>{t('modelmanager:deleteMsg1')}</p>
             <p style={{ color: 'var(--text-color-secondary' }}>
               {t('modelmanager:deleteMsg2')}

invokeai/frontend/src/features/system/components/ModelManager/ModelManagerModal.tsx

@@ -58,11 +58,7 @@ export default function ModelManagerModal({
           <ModalHeader fontWeight="bold">
             {t('modelmanager:modelManager')}
           </ModalHeader>
-          <Flex
+          <Flex padding="0 1.5rem 1.5rem 1.5rem" width="100%" columnGap="2rem">
-            padding={'0 1.5rem 1.5rem 1.5rem'}
-            width="100%"
-            columnGap={'2rem'}
-          >
             <ModelList />
             {openModel && model_list[openModel]['format'] === 'diffusers' ? (
               <DiffusersModelEdit />

invokeai/frontend/src/features/system/components/ModelManager/SearchModels.tsx

@@ -43,16 +43,16 @@ function ModelExistsTag() {
   const { t } = useTranslation();
   return (
     <Box
-      position={'absolute'}
+      position="absolute"
       zIndex={2}
       right={4}
       top={4}
       fontSize="0.7rem"
-      fontWeight={'bold'}
+      fontWeight="bold"
-      backgroundColor={'var(--accent-color)'}
+      backgroundColor="var(--accent-color)"
-      padding={'0.2rem 0.5rem'}
+      padding="0.2rem 0.5rem"
       borderRadius="0.2rem"
-      alignItems={'center'}
+      alignItems="center"
     >
       {t('modelmanager:modelExists')}
     </Box>
@@ -87,7 +87,7 @@ function SearchModelEntry({
         value={model.name}
         label={
           <>
-            <VStack alignItems={'start'}>
+            <VStack alignItems="start">
               <p style={{ fontWeight: 'bold' }}>{model.name}</p>
               <p style={{ fontStyle: 'italic' }}>{model.location}</p>
             </VStack>
@@ -96,9 +96,9 @@ function SearchModelEntry({
         isChecked={modelsToAdd.includes(model.name)}
         isDisabled={existingModels.includes(model.location)}
         onChange={foundModelsChangeHandler}
-        padding={'1rem'}
+        padding="1rem"
-        backgroundColor={'var(--background-color)'}
+        backgroundColor="var(--background-color)"
-        borderRadius={'0.5rem'}
+        borderRadius="0.5rem"
         _checked={{
           backgroundColor: 'var(--accent-color)',
           color: 'var(--text-color)',
@@ -224,12 +224,12 @@ export default function SearchModels() {
     <>
       {searchFolder ? (
         <Flex
-          flexDirection={'column'}
+          flexDirection="column"
-          padding={'1rem'}
+          padding="1rem"
-          backgroundColor={'var(--background-color)'}
+          backgroundColor="var(--background-color)"
           borderRadius="0.5rem"
-          rowGap={'0.5rem'}
+          rowGap="0.5rem"
-          position={'relative'}
+          position="relative"
         >
           <p
             style={{
@@ -252,7 +252,7 @@ export default function SearchModels() {
             aria-label={t('modelmanager:scanAgain')}
             tooltip={t('modelmanager:scanAgain')}
             icon={<BiReset />}
-            position={'absolute'}
+            position="absolute"
             right={16}
             fontSize={18}
             disabled={isProcessing}
@@ -261,7 +261,7 @@ export default function SearchModels() {
           <IAIIconButton
             aria-label={t('modelmanager:clearCheckpointFolder')}
             icon={<FaPlus style={{ transform: 'rotate(45deg)' }} />}
-            position={'absolute'}
+            position="absolute"
             right={5}
             onClick={resetSearchModelHandler}
           />
@@ -300,8 +300,8 @@ export default function SearchModels() {
         </Formik>
       )}
       {foundModels && (
-        <Flex flexDirection={'column'} rowGap={'1rem'}>
+        <Flex flexDirection="column" rowGap="1rem">
-          <Flex justifyContent={'space-between'} alignItems="center">
+          <Flex justifyContent="space-between" alignItems="center">
             <p>
               {t('modelmanager:modelsFound')}: {foundModels.length}
             </p>
@@ -309,8 +309,8 @@ export default function SearchModels() {
               {t('modelmanager:selected')}: {modelsToAdd.length}
             </p>
           </Flex>
-          <Flex columnGap={'0.5rem'} justifyContent={'space-between'}>
+          <Flex columnGap="0.5rem" justifyContent="space-between">
-            <Flex columnGap={'0.5rem'}>
+            <Flex columnGap="0.5rem">
               <IAIButton
                 isDisabled={modelsToAdd.length === foundModels.length}
                 onClick={addAllToSelected}

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

@@ -206,7 +206,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
             </div>
 
             <div className="settings-modal-reset">
-              <Heading size={'md'}>{t('settings:resetWebUI')}</Heading>
+              <Heading size="md">{t('settings:resetWebUI')}</Heading>
               <Button colorScheme="red" onClick={handleClickResetWebUI}>
                 {t('settings:resetWebUI')}
               </Button>
@@ -232,8 +232,8 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
         <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(40px)" />
         <ModalContent>
           <ModalBody pb={6} pt={6}>
-            <Flex justifyContent={'center'}>
+            <Flex justifyContent="center">
-              <Text fontSize={'lg'}>
+              <Text fontSize="lg">
                 <Text>{t('settings:resetComplete')}</Text>
               </Text>
             </Flex>

invokeai/frontend/src/features/system/components/SiteHeader.tsx

@@ -56,7 +56,7 @@ const SiteHeader = () => {
           <IAIIconButton
             aria-label={t('modelmanager:modelManager')}
             tooltip={t('modelmanager:modelManager')}
-            size={'sm'}
+            size="sm"
             variant="link"
             data-variant="link"
             fontSize={20}
@@ -68,7 +68,7 @@ const SiteHeader = () => {
           <IAIIconButton
             aria-label={t('common:hotkeysLabel')}
             tooltip={t('common:hotkeysLabel')}
-            size={'sm'}
+            size="sm"
             variant="link"
             data-variant="link"
             fontSize={20}
@@ -86,7 +86,7 @@ const SiteHeader = () => {
           variant="link"
           data-variant="link"
           fontSize={20}
-          size={'sm'}
+          size="sm"
           icon={
             <Link isExternal href="http://github.com/invoke-ai/InvokeAI/issues">
               <FaBug />
@@ -100,7 +100,7 @@ const SiteHeader = () => {
           variant="link"
           data-variant="link"
           fontSize={20}
-          size={'sm'}
+          size="sm"
           icon={
             <Link isExternal href="http://github.com/invoke-ai/InvokeAI">
               <FaGithub />
@@ -114,7 +114,7 @@ const SiteHeader = () => {
           variant="link"
           data-variant="link"
           fontSize={20}
-          size={'sm'}
+          size="sm"
           icon={
             <Link isExternal href="https://discord.gg/ZmtBAhwWhy">
               <FaDiscord />
@@ -129,7 +129,7 @@ const SiteHeader = () => {
             variant="link"
             data-variant="link"
             fontSize={22}
-            size={'sm'}
+            size="sm"
             icon={<MdSettings />}
           />
         </SettingsModal>

invokeai/frontend/src/features/system/components/ThemeChanger.tsx

@@ -46,7 +46,7 @@ export default function ThemeChanger() {
             width: '6rem',
           }}
           leftIcon={currentTheme === theme ? <FaCheck /> : undefined}
-          size={'sm'}
+          size="sm"
           onClick={() => handleChangeTheme(theme)}
           key={theme}
         >
@@ -64,7 +64,7 @@ export default function ThemeChanger() {
       triggerComponent={
         <IAIIconButton
           aria-label={t('common:themeLabel')}
-          size={'sm'}
+          size="sm"
           variant="link"
           data-variant="link"
           fontSize={20}
@@ -72,7 +72,7 @@ export default function ThemeChanger() {
         />
       }
     >
-      <VStack align={'stretch'}>{renderThemeOptions()}</VStack>
+      <VStack align="stretch">{renderThemeOptions()}</VStack>
     </IAIPopover>
   );
 }

invokeai/frontend/src/features/ui/components/ImageToImage/InitImagePreview.tsx

@@ -35,9 +35,9 @@ export default function InitImagePreview() {
       {initialImage && (
         <div className="init-image-preview">
           <Image
-            fit={'contain'}
+            fit="contain"
-            maxWidth={'100%'}
+            maxWidth="100%"
-            maxHeight={'100%'}
+            maxHeight="100%"
             src={
               typeof initialImage === 'string' ? initialImage : initialImage.url
             }

invokeai/frontend/src/features/ui/components/ImageToImage/InitialImageOverlay.tsx

@@ -9,10 +9,10 @@ export default function InitialImageOverlay() {
 
   return initialImage ? (
     <Image
-      fit={'contain'}
+      fit="contain"
       src={typeof initialImage === 'string' ? initialImage : initialImage.url}
-      rounded={'md'}
+      rounded="md"
-      className={'checkerboard'}
+      className="checkerboard"
     />
   ) : null;
 }

invokeai/frontend/src/features/ui/components/InvokeTabs.tsx

@@ -31,32 +31,32 @@ export interface InvokeTabInfo {
 
 export const tabDict: Record<InvokeTabName, InvokeTabInfo> = {
   txt2img: {
-    title: <TextToImageIcon fill={'black'} boxSize={'2.5rem'} />,
+    title: <TextToImageIcon fill="black" boxSize="2.5rem" />,
     workarea: <TextToImageWorkarea />,
     tooltip: 'Text To Image',
   },
   img2img: {
-    title: <ImageToImageIcon fill={'black'} boxSize={'2.5rem'} />,
+    title: <ImageToImageIcon fill="black" boxSize="2.5rem" />,
     workarea: <ImageToImageWorkarea />,
     tooltip: 'Image To Image',
   },
   unifiedCanvas: {
-    title: <UnifiedCanvasIcon fill={'black'} boxSize={'2.5rem'} />,
+    title: <UnifiedCanvasIcon fill="black" boxSize="2.5rem" />,
     workarea: <UnifiedCanvasWorkarea />,
     tooltip: 'Unified Canvas',
   },
   nodes: {
-    title: <NodesIcon fill={'black'} boxSize={'2.5rem'} />,
+    title: <NodesIcon fill="black" boxSize="2.5rem" />,
     workarea: <NodesWIP />,
     tooltip: 'Nodes',
   },
   postprocess: {
-    title: <PostprocessingIcon fill={'black'} boxSize={'2.5rem'} />,
+    title: <PostprocessingIcon fill="black" boxSize="2.5rem" />,
     workarea: <PostProcessingWIP />,
     tooltip: 'Post Processing',
   },
   training: {
-    title: <TrainingIcon fill={'black'} boxSize={'2.5rem'} />,
+    title: <TrainingIcon fill="black" boxSize="2.5rem" />,
     workarea: <TrainingWIP />,
     tooltip: 'Training',
   },
@@ -122,7 +122,7 @@ export default function InvokeTabs() {
           key={key}
           hasArrow
           label={tabDict[key as keyof typeof tabDict].tooltip}
-          placement={'right'}
+          placement="right"
         >
           <Tab>{tabDict[key as keyof typeof tabDict].title}</Tab>
         </Tooltip>
@@ -147,7 +147,7 @@ export default function InvokeTabs() {
     <Tabs
       isLazy
       className="app-tabs"
-      variant={'unstyled'}
+      variant="unstyled"
       defaultIndex={activeTab}
       index={activeTab}
       onChange={(index: number) => {

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasDisplayBeta.tsx

@@ -45,21 +45,16 @@ const UnifiedCanvasDisplayBeta = () => {
   }, [dispatch]);
 
   return (
-    <div className={'workarea-single-view'}>
+    <div className="workarea-single-view">
       <Flex
-        flexDirection={'row'}
+        flexDirection="row"
         width="100%"
         height="100%"
-        columnGap={'1rem'}
+        columnGap="1rem"
         padding="1rem"
       >
         <UnifiedCanvasToolbarBeta />
-        <Flex
+        <Flex width="100%" height="100%" flexDirection="column" rowGap="1rem">
-          width="100%"
-          height="100%"
-          flexDirection={'column'}
-          rowGap={'1rem'}
-        >
           <UnifiedCanvasToolSettingsBeta />
           {doesCanvasNeedScaling ? <IAICanvasResizer /> : <IAICanvas />}
         </Flex>

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBaseBrushSettings.tsx

@@ -4,7 +4,7 @@ import UnifiedCanvasLimitStrokesToBox from './UnifiedCanvasLimitStrokesToBox';
 
 export default function UnifiedCanvasBaseBrushSettings() {
   return (
-    <Flex gap={'1rem'} alignItems="center">
+    <Flex gap="1rem" alignItems="center">
       <UnifiedCanvasBrushSettings />
       <UnifiedCanvasLimitStrokesToBox />
     </Flex>

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSettings.tsx

@@ -4,7 +4,7 @@ import UnifiedCanvasColorPicker from './UnifiedCanvasColorPicker';
 
 export default function UnifiedCanvasBrushSettings() {
   return (
-    <Flex columnGap={'1rem'} alignItems="center">
+    <Flex columnGap="1rem" alignItems="center">
       <UnifiedCanvasBrushSize />
       <UnifiedCanvasColorPicker />
     </Flex>

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasBrushSize.tsx

@@ -49,7 +49,7 @@ export default function UnifiedCanvasBrushSize() {
       onChange={(newSize) => dispatch(setBrushSize(newSize))}
       sliderNumberInputProps={{ max: 500 }}
       inputReadOnly={false}
-      width={'100px'}
+      width="100px"
       isCompact
     />
   );

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasClearMask.tsx

@@ -14,7 +14,7 @@ export default function UnifiedCanvasClearMask() {
 
   return (
     <IAIButton
-      size={'sm'}
+      size="sm"
       leftIcon={<FaTrash />}
       onClick={handleClearMask}
       tooltip={`${t('unifiedcanvas:clearMask')} (Shift+C)`}

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx

@@ -92,7 +92,7 @@ export default function UnifiedCanvasColorPicker() {
         />
       }
     >
-      <Flex minWidth={'15rem'} direction={'column'} gap={'1rem'} width={'100%'}>
+      <Flex minWidth="15rem" direction="column" gap="1rem" width="100%">
         {layer === 'base' && (
           <IAIColorPicker
             style={{

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasMaskBrushSettings.tsx

@@ -6,7 +6,7 @@ import UnifiedCanvasPreserveMask from './UnifiedCanvasPreserveMask';
 
 export default function UnifiedCanvasMaskBrushSettings() {
   return (
-    <Flex gap={'1rem'} alignItems="center">
+    <Flex gap="1rem" alignItems="center">
       <UnifiedCanvasBrushSettings />
       <UnifiedCanvasEnableMask />
       <UnifiedCanvasPreserveMask />

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasMoveSettings.tsx

@@ -5,7 +5,7 @@ import UnifiedCanvasSnapToGrid from './UnifiedCanvasSnapToGrid';
 
 export default function UnifiedCanvasMoveSettings() {
   return (
-    <Flex alignItems={'center'} gap="1rem">
+    <Flex alignItems="center" gap="1rem">
       <UnifiedCanvasShowGrid />
       <UnifiedCanvasSnapToGrid />
       <UnifiedCanvasDarkenOutsideSelection />

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasSettings.tsx

@@ -68,7 +68,7 @@ const UnifiedCanvasSettings = () => {
         />
       }
     >
-      <Flex direction={'column'} gap={'0.5rem'}>
+      <Flex direction="column" gap="0.5rem">
         <IAICheckbox
           label={t('unifiedcanvas:showIntermediates')}
           isChecked={shouldShowIntermediates}

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettingsBeta.tsx

@@ -28,7 +28,7 @@ export default function UnifiedCanvasToolSettingsBeta() {
   const { tool, layer } = useAppSelector(selector);
 
   return (
-    <Flex height="2rem" minHeight="2rem" maxHeight="2rem" alignItems={'center'}>
+    <Flex height="2rem" minHeight="2rem" maxHeight="2rem" alignItems="center">
       {layer == 'base' && ['brush', 'eraser', 'colorPicker'].includes(tool) && (
         <UnifiedCanvasBaseBrushSettings />
       )}

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasProcessingButtons.tsx

@@ -25,7 +25,7 @@ export default function UnifiedCanvasProcessingButtons() {
   };
 
   return (
-    <Flex flexDirection={'column'} gap="0.5rem">
+    <Flex flexDirection="column" gap="0.5rem">
       <IAIIconButton
         tooltip={`${t('parameters:showOptionsPanel')} (O)`}
         tooltipProps={{ placement: 'top' }}
@@ -38,7 +38,7 @@ export default function UnifiedCanvasProcessingButtons() {
         <InvokeButton iconButton />
       </Flex>
       <Flex>
-        <CancelButton width={'100%'} height={'40px'} />
+        <CancelButton width="100%" height="40px" />
       </Flex>
     </Flex>
   );

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbar/UnifiedCanvasToolSelect.tsx

@@ -113,7 +113,7 @@ const UnifiedCanvasToolSelect = () => {
   const handleEraseBoundingBox = () => dispatch(addEraseRect());
 
   return (
-    <Flex flexDirection={'column'} gap={'0.5rem'}>
+    <Flex flexDirection="column" gap="0.5rem">
       <ButtonGroup>
         <IAIIconButton
           aria-label={`${t('unifiedcanvas:brush')} (B)`}
@@ -155,7 +155,7 @@ const UnifiedCanvasToolSelect = () => {
         data-selected={tool === 'colorPicker' && !isStaging}
         isDisabled={isStaging}
         onClick={handleSelectColorPickerTool}
-        width={'max-content'}
+        width="max-content"
       />
     </Flex>
   );

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolbarBeta.tsx

@@ -23,30 +23,30 @@ const UnifiedCanvasToolbarBeta = () => {
   );
 
   return (
-    <Flex flexDirection={'column'} rowGap="0.5rem" width="6rem">
+    <Flex flexDirection="column" rowGap="0.5rem" width="6rem">
       <UnifiedCanvasLayerSelect />
       <UnifiedCanvasToolSelect />
 
-      <Flex gap={'0.5rem'}>
+      <Flex gap="0.5rem">
         <UnifiedCanvasMoveTool />
         <UnifiedCanvasResetView />
       </Flex>
 
-      <Flex columnGap={'0.5rem'}>
+      <Flex columnGap="0.5rem">
         <UnifiedCanvasMergeVisible />
         <UnifiedCanvasSaveToGallery />
       </Flex>
-      <Flex columnGap={'0.5rem'}>
+      <Flex columnGap="0.5rem">
         <UnifiedCanvasCopyToClipboard />
         <UnifiedCanvasDownloadImage />
       </Flex>
 
-      <Flex gap={'0.5rem'}>
+      <Flex gap="0.5rem">
         <IAICanvasUndoButton />
         <IAICanvasRedoButton />
       </Flex>
 
-      <Flex gap={'0.5rem'}>
+      <Flex gap="0.5rem">
         <UnifiedCanvasFileUploader />
         <UnifiedCanvasResetCanvas />
       </Flex>

invokeai/frontend/src/features/ui/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx

@@ -43,7 +43,7 @@ const UnifiedCanvasDisplay = () => {
   }, [dispatch]);
 
   return (
-    <div className={'workarea-single-view'}>
+    <div className="workarea-single-view">
       <div className="workarea-split-view-left">
         <div className="inpainting-main-area">
           <IAICanvasOutpaintingControls />