From c6118e889895ba35a191124ce1beb5d2b719366d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 3 Nov 2022 01:29:51 +1100
Subject: [PATCH] Address feedback

- moves mask clear button
- fixes intermediates
- shrinks inpainting icons by 10%
---
 frontend/src/features/gallery/CurrentImagePreview.tsx  | 10 +++++++++-
 frontend/src/features/tabs/Inpainting/Inpainting.scss  |  4 ++++
 .../features/tabs/Inpainting/InpaintingControls.tsx    |  2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/features/gallery/CurrentImagePreview.tsx b/frontend/src/features/gallery/CurrentImagePreview.tsx
index 279292ebb4..708361ca7f 100644
--- a/frontend/src/features/gallery/CurrentImagePreview.tsx
+++ b/frontend/src/features/gallery/CurrentImagePreview.tsx
@@ -30,6 +30,7 @@ export const imagesSelector = createSelector(
 
     return {
       imageToDisplay: intermediateImage ? intermediateImage : currentImage,
+      isIntermediate: intermediateImage,
       currentCategory,
       isOnFirstImage: currentImageIndex === 0,
       isOnLastImage:
@@ -55,6 +56,7 @@ export default function CurrentImagePreview() {
     isOnLastImage,
     shouldShowImageDetails,
     imageToDisplay,
+    isIntermediate,
   } = useAppSelector(imagesSelector);
 
   const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] =
@@ -78,7 +80,13 @@ export default function CurrentImagePreview() {
 
   return (
     <div className={'current-image-preview'}>
-      {imageToDisplay && <Image src={imageToDisplay.url} />}
+      {imageToDisplay && (
+        <Image
+          src={imageToDisplay.url}
+          width={isIntermediate ? imageToDisplay.width : undefined}
+          height={isIntermediate ? imageToDisplay.height : undefined}
+        />
+      )}
       {!shouldShowImageDetails && (
         <div className="current-image-next-prev-buttons">
           <div
diff --git a/frontend/src/features/tabs/Inpainting/Inpainting.scss b/frontend/src/features/tabs/Inpainting/Inpainting.scss
index 1762139889..de5871a080 100644
--- a/frontend/src/features/tabs/Inpainting/Inpainting.scss
+++ b/frontend/src/features/tabs/Inpainting/Inpainting.scss
@@ -13,6 +13,10 @@
     align-items: center;
     column-gap: 0.5rem;
 
+    svg {
+      transform: scale(0.9);
+    }
+
     .inpainting-buttons-group {
       display: flex;
       align-items: center;
diff --git a/frontend/src/features/tabs/Inpainting/InpaintingControls.tsx b/frontend/src/features/tabs/Inpainting/InpaintingControls.tsx
index b44d568248..67e09e445c 100644
--- a/frontend/src/features/tabs/Inpainting/InpaintingControls.tsx
+++ b/frontend/src/features/tabs/Inpainting/InpaintingControls.tsx
@@ -23,12 +23,12 @@ const InpaintingControls = () => {
         <InpaintingMaskInvertControl />
         <InpaintingLockBoundingBoxControl />
         <InpaintingShowHideBoundingBoxControl />
+        <InpaintingMaskClear />
       </ButtonGroup>
 
       <ButtonGroup isAttached={true}>
         <InpaintingUndoControl />
         <InpaintingRedoControl />
-        <InpaintingMaskClear />
       </ButtonGroup>
       <ButtonGroup isAttached={true}>
         <ImageUploaderIconButton />