feat(ui): board styles

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/boardIdSelected.ts

@@ -44,7 +44,7 @@ export const addBoardIdSelectedListener = () => {
         () =>
           imagesApi.endpoints.listImages.select(queryArgs)(getState())
             .isSuccess,
-        1000
+        5000
       );
 
       if (isSuccess) {

invokeai/frontend/web/src/common/components/IAICollapse.tsx

@@ -92,7 +92,10 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
           sx={{
             p: 4,
             borderBottomRadius: 'base',
-            bg: mode('base.100', 'base.800')(colorMode),
+            bg: 'base.100',
+            _dark: {
+              bg: 'base.800',
+            },
           }}
         >
           {children}

invokeai/frontend/web/src/common/components/IAIDndImage.tsx

@@ -18,12 +18,20 @@ import {
 import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 import ImageContextMenu from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
-import { MouseEvent, ReactElement, SyntheticEvent, memo } from 'react';
+import {
+  MouseEvent,
+  ReactElement,
+  SyntheticEvent,
+  memo,
+  useCallback,
+  useState,
+} from 'react';
 import { FaImage, FaUndo, FaUpload } from 'react-icons/fa';
 import { ImageDTO, PostUploadAction } from 'services/api/types';
 import { mode } from 'theme/util/mode';
 import IAIDraggable from './IAIDraggable';
 import IAIDroppable from './IAIDroppable';
+import SelectionOverlay from './SelectionOverlay';
 
 type IAIDndImageProps = {
   imageDTO: ImageDTO | undefined;
@@ -49,6 +57,7 @@ type IAIDndImageProps = {
   thumbnail?: boolean;
   noContentFallback?: ReactElement;
   useThumbailFallback?: boolean;
+  withHoverOverlay?: boolean;
 };
 
 const IAIDndImage = (props: IAIDndImageProps) => {
@@ -75,9 +84,17 @@ const IAIDndImage = (props: IAIDndImageProps) => {
     resetIcon = <FaUndo />,
     noContentFallback = <IAINoContentFallback icon={FaImage} />,
     useThumbailFallback,
+    withHoverOverlay = false,
   } = props;
 
   const { colorMode } = useColorMode();
+  const [isHovered, setIsHovered] = useState(false);
+  const handleMouseOver = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+  const handleMouseOut = useCallback(() => {
+    setIsHovered(false);
+  }, []);
 
   const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
     postUploadAction,
@@ -105,6 +122,8 @@ const IAIDndImage = (props: IAIDndImageProps) => {
       {(ref) => (
         <Flex
           ref={ref}
+          onMouseOver={handleMouseOver}
+          onMouseOut={handleMouseOut}
           sx={{
             width: 'full',
             height: 'full',
@@ -147,14 +166,14 @@ const IAIDndImage = (props: IAIDndImageProps) => {
                   maxW: 'full',
                   maxH: 'full',
                   borderRadius: 'base',
-                  shadow: isSelected ? 'selected.light' : undefined,
-                  _dark: {
-                    shadow: isSelected ? 'selected.dark' : undefined,
-                  },
                   ...imageSx,
                 }}
               />
               {withMetadataOverlay && <ImageMetadataOverlay image={imageDTO} />}
+              <SelectionOverlay
+                isSelected={isSelected}
+                isHovered={withHoverOverlay ? isHovered : false}
+              />
             </Flex>
           )}
           {!imageDTO && !isUploadDisabled && (

invokeai/frontend/web/src/common/components/SelectionOverlay.tsx

@@ -0,0 +1,42 @@
+import { Box } from '@chakra-ui/react';
+
+type Props = {
+  isSelected: boolean;
+  isHovered: boolean;
+};
+const SelectionOverlay = ({ isSelected, isHovered }: Props) => {
+  return (
+    <Box
+      className="selection-box"
+      sx={{
+        position: 'absolute',
+        top: 0,
+        insetInlineEnd: 0,
+        bottom: 0,
+        insetInlineStart: 0,
+        borderRadius: 'base',
+        opacity: isSelected ? 1 : 0.7,
+        transitionProperty: 'common',
+        transitionDuration: '0.1s',
+        shadow: isSelected
+          ? isHovered
+            ? 'hoverSelected.light'
+            : 'selected.light'
+          : isHovered
+          ? 'hoverUnselected.light'
+          : undefined,
+        _dark: {
+          shadow: isSelected
+            ? isHovered
+              ? 'hoverSelected.dark'
+              : 'selected.dark'
+            : isHovered
+            ? 'hoverUnselected.dark'
+            : undefined,
+        },
+      }}
+    />
+  );
+};
+
+export default SelectionOverlay;

invokeai/frontend/web/src/features/gallery/components/Boards/AutoAddIcon.tsx

@@ -5,7 +5,7 @@ const AutoAddIcon = () => {
     <Flex
       sx={{
         position: 'absolute',
-        insetInlineStart: 0,
+        insetInlineEnd: 0,
         top: 0,
         p: 1,
       }}

invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx

@@ -1,13 +1,19 @@
-import { MenuItem, MenuList } from '@chakra-ui/react';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { MenuGroup, MenuItem, MenuList } from '@chakra-ui/react';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { ContextMenu, ContextMenuProps } from 'chakra-ui-contextmenu';
-import { boardIdSelected } from 'features/gallery/store/gallerySlice';
-import { memo, useCallback } from 'react';
-import { FaFolder } from 'react-icons/fa';
+import {
+  autoAddBoardIdChanged,
+  boardIdSelected,
+} from 'features/gallery/store/gallerySlice';
+import { MouseEvent, memo, useCallback, useMemo } from 'react';
+import { FaFolder, FaPlus } from 'react-icons/fa';
 import { BoardDTO } from 'services/api/types';
 import { menuListMotionProps } from 'theme/components/menu';
 import GalleryBoardContextMenuItems from './GalleryBoardContextMenuItems';
 import NoBoardContextMenuItems from './NoBoardContextMenuItems';
+import { useBoardName } from 'services/api/hooks/useBoardName';
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 
 type Props = {
   board?: BoardDTO;
@@ -20,9 +26,30 @@ const BoardContextMenu = memo(
   ({ board, board_id, setBoardToDelete, children }: Props) => {
     const dispatch = useAppDispatch();
 
+    const selector = useMemo(
+      () =>
+        createSelector(stateSelector, ({ gallery }) => {
+          const isSelected = gallery.selectedBoardId === board_id;
+          const isAutoAdd = gallery.autoAddBoardId === board_id;
+          return { isSelected, isAutoAdd };
+        }),
+      [board_id]
+    );
+
+    const { isSelected, isAutoAdd } = useAppSelector(selector);
+    const boardName = useBoardName(board_id);
+
     const handleSelectBoard = useCallback(() => {
-      dispatch(boardIdSelected(board?.board_id ?? board_id));
-    }, [board?.board_id, board_id, dispatch]);
+      dispatch(boardIdSelected(board_id));
+    }, [board_id, dispatch]);
+
+    const handleSetAutoAdd = useCallback(() => {
+      dispatch(autoAddBoardIdChanged(board_id));
+    }, [board_id, dispatch]);
+
+    const skipEvent = useCallback((e: MouseEvent<HTMLDivElement>) => {
+      e.preventDefault();
+    }, []);
 
     return (
       <ContextMenu<HTMLDivElement>
@@ -35,17 +62,24 @@ const BoardContextMenu = memo(
           <MenuList
             sx={{ visibility: 'visible !important' }}
             motionProps={menuListMotionProps}
+            onContextMenu={skipEvent}
           >
-            <MenuItem icon={<FaFolder />} onClickCapture={handleSelectBoard}>
-              Select Board
-            </MenuItem>
-            {!board && <NoBoardContextMenuItems />}
-            {board && (
-              <GalleryBoardContextMenuItems
-                board={board}
-                setBoardToDelete={setBoardToDelete}
-              />
-            )}
+            <MenuGroup title={boardName}>
+              <MenuItem
+                icon={<FaPlus />}
+                isDisabled={isAutoAdd}
+                onClick={handleSetAutoAdd}
+              >
+                Auto-add to this Board
+              </MenuItem>
+              {!board && <NoBoardContextMenuItems />}
+              {board && (
+                <GalleryBoardContextMenuItems
+                  board={board}
+                  setBoardToDelete={setBoardToDelete}
+                />
+              )}
+            </MenuGroup>
           </MenuList>
         )}
       >

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx

@@ -76,7 +76,7 @@ const BoardsList = (props: Props) => {
             <Grid
               className="list-container"
               sx={{
-                gridTemplateColumns: `repeat(auto-fill, minmax(96px, 1fr));`,
+                gridTemplateColumns: `repeat(auto-fill, minmax(108px, 1fr));`,
                 maxH: 346,
               }}
             >

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx

@@ -26,6 +26,7 @@ import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
 import { BoardDTO } from 'services/api/types';
 import AutoAddIcon from '../AutoAddIcon';
 import BoardContextMenu from '../BoardContextMenu';
+import SelectionOverlay from 'common/components/SelectionOverlay';
 
 const BASE_BADGE_STYLES: ChakraProps['sx'] = {
   bg: 'base.500',
@@ -56,7 +57,13 @@ const GalleryBoard = memo(
     );
 
     const { isSelectedForAutoAdd } = useAppSelector(selector);
-
+    const [isHovered, setIsHovered] = useState(false);
+    const handleMouseOver = useCallback(() => {
+      setIsHovered(true);
+    }, []);
+    const handleMouseOut = useCallback(() => {
+      setIsHovered(false);
+    }, []);
     const { currentData: coverImage } = useGetImageDTOQuery(
       board.cover_image_name ?? skipToken
     );
@@ -83,26 +90,30 @@ const GalleryBoard = memo(
     );
 
     const handleSubmit = useCallback(
-      (newBoardName: string) => {
-        if (!newBoardName) {
-          // empty strings are not allowed
+      async (newBoardName: string) => {
+        // empty strings are not allowed
+        if (!newBoardName.trim()) {
           setLocalBoardName(board_name);
           return;
         }
+
+        // don't updated the board name if it hasn't changed
         if (newBoardName === board_name) {
-          // don't updated the board name if it hasn't changed
           return;
         }
-        updateBoard({ board_id, changes: { board_name: newBoardName } })
-          .unwrap()
-          .then((response) => {
-            // update local state
-            setLocalBoardName(response.board_name);
-          })
-          .catch(() => {
-            // revert on error
-            setLocalBoardName(board_name);
-          });
+
+        try {
+          const { board_name } = await updateBoard({
+            board_id,
+            changes: { board_name: newBoardName },
+          }).unwrap();
+
+          // update local state
+          setLocalBoardName(board_name);
+        } catch {
+          // revert on error
+          setLocalBoardName(board_name);
+        }
       },
       [board_id, board_name, updateBoard]
     );
@@ -116,6 +127,8 @@ const GalleryBoard = memo(
         sx={{ w: 'full', h: 'full', touchAction: 'none', userSelect: 'none' }}
       >
         <Flex
+          onMouseOver={handleMouseOver}
+          onMouseOut={handleMouseOut}
           sx={{
             position: 'relative',
             justifyContent: 'center',
@@ -174,7 +187,7 @@ const GalleryBoard = memo(
                       boxSize={12}
                       as={FaUser}
                       sx={{
-                        mt: -3,
+                        mt: -6,
                         opacity: 0.7,
                         color: 'base.500',
                         _dark: {
@@ -184,7 +197,7 @@ const GalleryBoard = memo(
                     />
                   </Flex>
                 )}
-                <Flex
+                {/* <Flex
                   sx={{
                     position: 'absolute',
                     insetInlineEnd: 0,
@@ -195,24 +208,11 @@ const GalleryBoard = memo(
                   <Badge variant="solid" sx={BASE_BADGE_STYLES}>
                     {totalImages}/{totalAssets}
                   </Badge>
-                </Flex>
+                </Flex> */}
                 {isSelectedForAutoAdd && <AutoAddIcon />}
-                <Box
-                  className="selection-box"
-                  sx={{
-                    position: 'absolute',
-                    top: 0,
-                    insetInlineEnd: 0,
-                    bottom: 0,
-                    insetInlineStart: 0,
-                    borderRadius: 'base',
-                    transitionProperty: 'common',
-                    transitionDuration: 'common',
-                    shadow: isSelected ? 'selected.light' : undefined,
-                    _dark: {
-                      shadow: isSelected ? 'selected.dark' : undefined,
-                    },
-                  }}
+                <SelectionOverlay
+                  isSelected={isSelected}
+                  isHovered={isHovered}
                 />
                 <Flex
                   sx={{

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx

@@ -1,13 +1,15 @@
-import { Badge, Box, ChakraProps, Flex, Icon, Text } from '@chakra-ui/react';
+import { Box, ChakraProps, Flex, Image, Text } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { MoveBoardDropData } from 'app/components/ImageDnd/typesafeDnd';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import InvokeAILogoImage from 'assets/images/logo.png';
 import IAIDroppable from 'common/components/IAIDroppable';
+import SelectionOverlay from 'common/components/SelectionOverlay';
 import { boardIdSelected } from 'features/gallery/store/gallerySlice';
-import { memo, useCallback, useMemo } from 'react';
-import { FaFolder } from 'react-icons/fa';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { useBoardName } from 'services/api/hooks/useBoardName';
 import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
 import AutoAddIcon from '../AutoAddIcon';
 import BoardContextMenu from '../BoardContextMenu';
@@ -33,9 +35,17 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
   const dispatch = useAppDispatch();
   const { totalImages, totalAssets } = useBoardTotal(undefined);
   const { autoAddBoardId } = useAppSelector(selector);
+  const boardName = useBoardName(undefined);
   const handleSelectBoard = useCallback(() => {
     dispatch(boardIdSelected(undefined));
   }, [dispatch]);
+  const [isHovered, setIsHovered] = useState(false);
+  const handleMouseOver = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+  const handleMouseOut = useCallback(() => {
+    setIsHovered(false);
+  }, []);
 
   const droppableData: MoveBoardDropData = useMemo(
     () => ({
@@ -49,6 +59,8 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
   return (
     <Box sx={{ w: 'full', h: 'full', touchAction: 'none', userSelect: 'none' }}>
       <Flex
+        onMouseOver={handleMouseOver}
+        onMouseOut={handleMouseOut}
         sx={{
           position: 'relative',
           justifyContent: 'center',
@@ -86,9 +98,9 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
                   alignItems: 'center',
                 }}
               >
-                <Icon
+                {/* <Icon
                   boxSize={12}
-                  as={FaFolder}
+                  as={FaBucket}
                   sx={{
                     opacity: 0.7,
                     color: 'base.500',
@@ -96,9 +108,23 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
                       color: 'base.500',
                     },
                   }}
+                /> */}
+                <Image
+                  src={InvokeAILogoImage}
+                  alt="invoke-ai-logo"
+                  sx={{
+                    opacity: 0.4,
+                    filter: 'grayscale(1)',
+                    mt: -6,
+                    w: 16,
+                    h: 16,
+                    minW: 16,
+                    minH: 16,
+                    userSelect: 'none',
+                  }}
                 />
               </Flex>
-              <Flex
+              {/* <Flex
                 sx={{
                   position: 'absolute',
                   insetInlineEnd: 0,
@@ -109,25 +135,33 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
                 <Badge variant="solid" sx={BASE_BADGE_STYLES}>
                   {totalImages}/{totalAssets}
                 </Badge>
-              </Flex>
+              </Flex> */}
               {!autoAddBoardId && <AutoAddIcon />}
-              <Box
-                className="selection-box"
+              <Flex
                 sx={{
                   position: 'absolute',
-                  top: 0,
-                  insetInlineEnd: 0,
                   bottom: 0,
-                  insetInlineStart: 0,
-                  borderRadius: 'base',
-                  transitionProperty: 'common',
-                  transitionDuration: 'common',
-                  shadow: isSelected ? 'selected.light' : undefined,
+                  left: 0,
+                  p: 1,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  w: 'full',
+                  maxW: 'full',
+                  borderBottomRadius: 'base',
+                  bg: isSelected ? 'accent.400' : 'base.500',
+                  color: isSelected ? 'base.50' : 'base.100',
                   _dark: {
-                    shadow: isSelected ? 'selected.dark' : undefined,
+                    bg: isSelected ? 'accent.500' : 'base.600',
+                    color: isSelected ? 'base.50' : 'base.100',
                   },
+                  lineHeight: 'short',
+                  fontSize: 'xs',
+                  fontWeight: isSelected ? 700 : 500,
                 }}
-              />
+              >
+                {boardName}
+              </Flex>
+              <SelectionOverlay isSelected={isSelected} isHovered={isHovered} />
               <IAIDroppable
                 data={droppableData}
                 dropLabel={<Text fontSize="md">Move</Text>}

invokeai/frontend/web/src/features/gallery/components/Boards/GalleryBoardContextMenuItems.tsx

@@ -59,11 +59,11 @@ const GalleryBoardContextMenuItems = ({ board, setBoardToDelete }: Props) => {
                   </MenuItem> */}
         </>
       )}
-      {!isSelectedForAutoAdd && (
+      {/* {!isSelectedForAutoAdd && (
         <MenuItem icon={<FaPlus />} onClick={handleToggleAutoAdd}>
           Auto-add to this Board
         </MenuItem>
-      )}
+      )} */}
       <MenuItem
         sx={{ color: 'error.600', _dark: { color: 'error.300' } }}
         icon={<FaTrash />}

invokeai/frontend/web/src/features/gallery/components/Boards/NoBoardContextMenuItems.tsx

@@ -16,11 +16,11 @@ const NoBoardContextMenuItems = () => {
 
   return (
     <>
-      {autoAddBoardId && (
+      {/* {autoAddBoardId && (
         <MenuItem icon={<FaPlus />} onClick={handleDisableAutoAdd}>
           Auto-add to this Board
         </MenuItem>
-      )}
+      )} */}
     </>
   );
 };

invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx

@@ -6,7 +6,6 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import { memo, useMemo } from 'react';
 import { useBoardName } from 'services/api/hooks/useBoardName';
-import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
 
 const selector = createSelector(
   [stateSelector],
@@ -27,24 +26,28 @@ const GalleryBoardName = (props: Props) => {
   const { isOpen, onToggle } = props;
   const { selectedBoardId } = useAppSelector(selector);
   const boardName = useBoardName(selectedBoardId);
-  const { totalImages, totalAssets } = useBoardTotal(selectedBoardId);
+  // const { totalImages, totalAssets } = useBoardTotal(selectedBoardId);
 
   const formattedBoardName = useMemo(() => {
-    if (!boardName) {
-      return '';
-    }
-
-    if (boardName && (totalImages === undefined || totalAssets === undefined)) {
-      return boardName;
-    }
-
-    const count = `${totalImages}/${totalAssets}`;
-
     if (boardName.length > 20) {
-      return `${boardName.substring(0, 20)}... (${count})`;
+      return `${boardName.substring(0, 20)}...`;
     }
-    return `${boardName} (${count})`;
-  }, [boardName, totalAssets, totalImages]);
+    return boardName;
+    // if (!boardName) {
+    //   return '';
+    // }
+
+    // if (boardName && (totalImages === undefined || totalAssets === undefined)) {
+    //   return boardName;
+    // }
+
+    // const count = `${totalImages}/${totalAssets}`;
+
+    // if (boardName.length > 20) {
+    //   return `${boardName.substring(0, 20)}... (${count})`;
+    // }
+    // return `${boardName} (${count})`;
+  }, [boardName]);
 
   return (
     <Flex

invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  Button,
   ButtonGroup,
   Flex,
   Spacer,
@@ -92,23 +93,42 @@ const ImageGalleryContent = () => {
         >
           <Tabs
             index={galleryView === 'images' ? 0 : 1}
-            variant="line"
+            variant="unstyled"
             size="sm"
             sx={{ w: 'full' }}
           >
             <TabList>
-              <Tab
-                onClick={handleClickImages}
-                sx={{ borderTopRadius: 'base', w: 'full' }}
+              <ButtonGroup
+                isAttached
+                sx={{
+                  w: 'full',
+                }}
               >
-                Images
-              </Tab>
-              <Tab
-                onClick={handleClickAssets}
-                sx={{ borderTopRadius: 'base', w: 'full' }}
-              >
-                Assets
-              </Tab>
+                <Tab
+                  as={IAIButton}
+                  size="sm"
+                  isChecked={galleryView === 'images'}
+                  onClick={handleClickImages}
+                  sx={{
+                    w: 'full',
+                  }}
+                  leftIcon={<FaImages />}
+                >
+                  Images
+                </Tab>
+                <Tab
+                  as={IAIButton}
+                  size="sm"
+                  isChecked={galleryView === 'assets'}
+                  onClick={handleClickAssets}
+                  sx={{
+                    w: 'full',
+                  }}
+                  leftIcon={<FaServer />}
+                >
+                  Assets
+                </Tab>
+              </ButtonGroup>
             </TabList>
           </Tabs>
         </Flex>

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx

@@ -106,6 +106,7 @@ const GalleryImage = (props: HoverableImageProps) => {
           isDropDisabled={true}
           isUploadDisabled={true}
           thumbnail={true}
+          withHoverOverlay
           // resetIcon={<FaTrash />}
           // resetTooltip="Delete image"
           // withResetIcon // removed bc it's too easy to accidentally delete images

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageGrid.tsx

@@ -1,8 +1,9 @@
-import { Box, Spinner } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import { IMAGE_LIMIT } from 'features/gallery//store/gallerySlice';
+import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
 import {
   UseOverlayScrollbarsParams,
   useOverlayScrollbars,
@@ -15,11 +16,10 @@ import {
   useLazyListImagesQuery,
   useListImagesQuery,
 } from 'services/api/endpoints/images';
+import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
 import GalleryImage from './GalleryImage';
 import ImageGridItemContainer from './ImageGridItemContainer';
 import ImageGridListContainer from './ImageGridListContainer';
-import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
-import { useBoardTotal } from 'services/api/hooks/useBoardTotal';
 
 const overlayScrollbarsConfig: UseOverlayScrollbarsParams = {
   defer: true,
@@ -87,20 +87,34 @@ const GalleryImageGrid = () => {
 
   if (!currentData) {
     return (
-      <Box sx={{ w: 'full', h: 'full' }}>
-        <Spinner size="2xl" opacity={0.5} />
-      </Box>
+      <Flex
+        sx={{
+          w: 'full',
+          h: 'full',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <IAINoContentFallback label="Loading..." icon={FaImage} />
+      </Flex>
     );
   }
 
   if (isSuccess && currentData?.ids.length === 0) {
     return (
-      <Box sx={{ w: 'full', h: 'full' }}>
+      <Flex
+        sx={{
+          w: 'full',
+          h: 'full',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
         <IAINoContentFallback
           label={t('gallery.noImagesInGallery')}
           icon={FaImage}
         />
-      </Box>
+      </Flex>
     );
   }
 
@@ -129,9 +143,7 @@ const GalleryImageGrid = () => {
           loadingText="Loading"
           flexShrink={0}
         >
-          {areMoreAvailable
-            ? t('gallery.loadMore')
-            : t('gallery.allImagesLoaded')}
+          {`Load More (${currentData.ids.length} of ${currentViewTotal})`}
         </IAIButton>
       </>
     );

invokeai/frontend/web/src/features/ui/components/ParametersDrawer.tsx

@@ -78,7 +78,6 @@ const ParametersDrawer = () => {
         }}
       >
         <Flex
-          paddingTop={1.5}
           paddingBottom={4}
           justifyContent="space-between"
           alignItems="center"

invokeai/frontend/web/src/features/ui/components/common/ResizableDrawer/ResizableDrawer.tsx

@@ -164,7 +164,7 @@ const ResizableDrawer = ({
           sx={{
             borderColor: mode('base.200', 'base.800')(colorMode),
             p: 4,
-            bg: mode('base.100', 'base.900')(colorMode),
+            bg: mode('base.50', 'base.900')(colorMode),
             height: 'full',
             shadow: isOpen ? 'dark-lg' : undefined,
             ...containerStyles,

invokeai/frontend/web/src/theme/components/button.ts

@@ -64,9 +64,23 @@ const invokeAI = defineStyle((props) => {
   };
 });
 
+const invokeAIOutline = defineStyle((props) => {
+  const { colorScheme: c } = props;
+  const borderColor = mode(`gray.200`, `whiteAlpha.300`)(props);
+  return {
+    border: '1px solid',
+    borderColor: c === 'gray' ? borderColor : 'currentColor',
+    '.chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)':
+      { marginEnd: '-1px' },
+    '.chakra-button__group[data-attached][data-orientation=vertical] > &:not(:last-of-type)':
+      { marginBottom: '-1px' },
+  };
+});
+
 export const buttonTheme = defineStyleConfig({
   variants: {
     invokeAI,
+    invokeAIOutline,
   },
   defaultProps: {
     variant: 'invokeAI',

invokeai/frontend/web/src/theme/theme.ts

@@ -78,12 +78,12 @@ export const theme: ThemeOverride = {
     hoverSelected: {
       light:
         '0px 0px 0px 1px var(--invokeai-colors-base-150), 0px 0px 0px 4px var(--invokeai-colors-accent-500)',
-      dark: '0px 0px 0px 1px var(--invokeai-colors-base-900), 0px 0px 0px 4px var(--invokeai-colors-accent-300)',
+      dark: '0px 0px 0px 1px var(--invokeai-colors-base-900), 0px 0px 0px 4px var(--invokeai-colors-accent-400)',
     },
     hoverUnselected: {
       light:
-        '0px 0px 0px 1px var(--invokeai-colors-base-150), 0px 0px 0px 4px var(--invokeai-colors-accent-200)',
-      dark: '0px 0px 0px 1px var(--invokeai-colors-base-900), 0px 0px 0px 4px var(--invokeai-colors-accent-600)',
+        '0px 0px 0px 1px var(--invokeai-colors-base-150), 0px 0px 0px 3px var(--invokeai-colors-accent-500)',
+      dark: '0px 0px 0px 1px var(--invokeai-colors-base-900), 0px 0px 0px 3px var(--invokeai-colors-accent-400)',
     },
     nodeSelectedOutline: `0 0 0 2px var(--invokeai-colors-accent-450)`,
   },