From 05a43c41f9d75f0176a887985b50ae92d2d37eac Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Wed, 27 Sep 2023 13:07:12 +0530
Subject: [PATCH] feat: Improve Staging Toolbar Styling

---
 .../canvas/components/IAICanvasStagingAreaToolbar.tsx    | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
index 17e76f84b4..8bb45840d0 100644
--- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
+++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingAreaToolbar.tsx
@@ -134,6 +134,7 @@ const IAICanvasStagingAreaToolbar = () => {
     <Flex
       pos="absolute"
       bottom={4}
+      gap={2}
       w="100%"
       align="center"
       justify="center"
@@ -153,6 +154,12 @@ const IAICanvasStagingAreaToolbar = () => {
           colorScheme="accent"
           pointerEvents="none"
           isDisabled={!shouldShowStagingImage}
+          sx={{
+            background: 'base.600',
+            _dark: {
+              background: 'base.800',
+            },
+          }}
         >{`${currentIndex + 1}/${total}`}</IAIButton>
         <IAIIconButton
           tooltip={`${t('unifiedCanvas.next')} (Right)`}
@@ -162,6 +169,8 @@ const IAICanvasStagingAreaToolbar = () => {
           colorScheme="accent"
           isDisabled={!shouldShowStagingImage}
         />
+      </ButtonGroup>
+      <ButtonGroup isAttached borderRadius="base" shadow="dark-lg">
         <IAIIconButton
           tooltip={`${t('unifiedCanvas.accept')} (Enter)`}
           aria-label={`${t('unifiedCanvas.accept')} (Enter)`}