From 95ed56bf82825a47cfe406fa34eaf4e32c129143 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Thu, 3 Nov 2022 04:16:31 +1300
Subject: [PATCH] Updated Current Image Button Styling

---
 .../features/gallery/CurrentImageButtons.scss |  8 +++-
 .../features/gallery/CurrentImageButtons.tsx  | 39 +++++++++++--------
 frontend/src/styles/_Colors_Dark.scss         |  2 +
 frontend/src/styles/_Colors_Light.scss        |  2 +
 4 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/frontend/src/features/gallery/CurrentImageButtons.scss b/frontend/src/features/gallery/CurrentImageButtons.scss
index bde97b1b30..982fcc4867 100644
--- a/frontend/src/features/gallery/CurrentImageButtons.scss
+++ b/frontend/src/features/gallery/CurrentImageButtons.scss
@@ -3,7 +3,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  column-gap: 0.5rem;
+  column-gap: 0.5em;
 
   .current-image-send-to-popover,
   .current-image-postprocessing-popover {
@@ -16,4 +16,10 @@
   .chakra-popover__popper {
     z-index: 11;
   }
+
+  .delete-image-btn {
+    svg {
+      fill: var(--btn-delete-image);
+    }
+  }
 }
diff --git a/frontend/src/features/gallery/CurrentImageButtons.tsx b/frontend/src/features/gallery/CurrentImageButtons.tsx
index f313647233..b95e16dda9 100644
--- a/frontend/src/features/gallery/CurrentImageButtons.tsx
+++ b/frontend/src/features/gallery/CurrentImageButtons.tsx
@@ -378,7 +378,9 @@ const CurrentImageButtons = () => {
             </IAIButton>
           </div>
         </IAIPopover>
+      </ButtonGroup>
 
+      <ButtonGroup isAttached={true}>
         <IAIIconButton
           icon={<FaQuoteRight />}
           tooltip="Use Prompt"
@@ -406,7 +408,9 @@ const CurrentImageButtons = () => {
           }
           onClick={handleClickUseAllParameters}
         />
+      </ButtonGroup>
 
+      <ButtonGroup isAttached={true}>
         <IAIPopover
           trigger="hover"
           triggerComponent={
@@ -450,24 +454,25 @@ const CurrentImageButtons = () => {
             </IAIButton>
           </div>
         </IAIPopover>
-
-        <IAIIconButton
-          icon={<FaCode />}
-          tooltip="Details"
-          aria-label="Details"
-          data-selected={shouldShowImageDetails}
-          onClick={handleClickShowImageDetails}
-        />
-
-        <DeleteImageModal image={currentImage}>
-          <IAIIconButton
-            icon={<FaTrash />}
-            tooltip="Delete Image"
-            aria-label="Delete Image"
-            isDisabled={!currentImage || !isConnected || isProcessing}
-          />
-        </DeleteImageModal>
       </ButtonGroup>
+
+      <IAIIconButton
+        icon={<FaCode />}
+        tooltip="Details"
+        aria-label="Details"
+        data-selected={shouldShowImageDetails}
+        onClick={handleClickShowImageDetails}
+      />
+
+      <DeleteImageModal image={currentImage}>
+        <IAIIconButton
+          icon={<FaTrash />}
+          tooltip="Delete Image"
+          aria-label="Delete Image"
+          isDisabled={!currentImage || !isConnected || isProcessing}
+          className="delete-image-btn"
+        />
+      </DeleteImageModal>
     </div>
   );
 };
diff --git a/frontend/src/styles/_Colors_Dark.scss b/frontend/src/styles/_Colors_Dark.scss
index 10f4efe3c1..fdecb027bb 100644
--- a/frontend/src/styles/_Colors_Dark.scss
+++ b/frontend/src/styles/_Colors_Dark.scss
@@ -50,6 +50,8 @@
   --btn-load-more: rgb(30, 32, 42);
   --btn-load-more-hover: rgb(54, 56, 66);
 
+  --btn-delete-image: rgb(238, 107, 107);
+
   // IAI Button Colors
   --btn-checkbox-border-hover: rgb(46, 48, 68);
 
diff --git a/frontend/src/styles/_Colors_Light.scss b/frontend/src/styles/_Colors_Light.scss
index 5349f17dee..f46513a297 100644
--- a/frontend/src/styles/_Colors_Light.scss
+++ b/frontend/src/styles/_Colors_Light.scss
@@ -50,6 +50,8 @@
   --btn-load-more: rgb(202, 204, 206);
   --btn-load-more-hover: rgb(178, 180, 182);
 
+  --btn-delete-image: rgb(213, 49, 49);
+
   // IAI Button Colors
   --btn-checkbox-border-hover: rgb(176, 178, 182);