From 20042d99ecccf133e83771f2aa4a15bb1b93d58f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 27 Jun 2024 14:18:34 +1000
Subject: [PATCH] tidy(ui): archived icon component

---
 .../Boards/BoardsList/GalleryBoard.tsx        | 28 ++++++-------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
index 125e2a93c1..235105d21d 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
@@ -25,6 +25,14 @@ const editableInputStyles: SystemStyleObject = {
   },
 };
 
+const ArchivedIcon = () => {
+  return (
+    <Box position="absolute" top={1} insetInlineEnd={2} p={0} minW={0}>
+      <Icon as={PiArchiveBold} fill="base.300" filter="drop-shadow(0px 0px 0.1rem var(--invoke-colors-base-800))" />
+    </Box>
+  );
+};
+
 interface GalleryBoardProps {
   board: BoardDTO;
   isSelected: boolean;
@@ -135,25 +143,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
                 cursor="pointer"
                 bg="base.800"
               >
-                {board.archived && (
-                  <Box
-                    sx={{
-                      position: 'absolute',
-                      top: 1,
-                      insetInlineEnd: 2,
-                      p: 0,
-                      minW: 0,
-                      svg: {
-                        transitionProperty: 'common',
-                        transitionDuration: 'normal',
-                        fill: 'base.300',
-                        filter: 'drop-shadow(0px 0px 0.1rem var(--invoke-colors-base-800))',
-                      },
-                    }}
-                  >
-                    <Icon as={PiArchiveBold} />
-                  </Box>
-                )}
+                {board.archived && <ArchivedIcon />}
                 {coverImage?.thumbnail_url ? (
                   <Image
                     src={coverImage?.thumbnail_url}