Updated Current Image Button Styling

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);
+    }
+  }
 }

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>
   );
 };

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);
 

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);