feat(ui): minor restyle of style preset list

Author: psychedelicious

invokeai/frontend/web/src/features/stylePresets/components/StylePresetCreateButton.tsx

@@ -17,14 +17,13 @@ export const StylePresetCreateButton = () => {
 
   return (
     <IconButton
+      size="sm"
+      variant="link"
+      alignSelf="stretch"
       icon={<PiPlusBold />}
       tooltip={t('stylePresets.createPromptTemplate')}
       aria-label={t('stylePresets.createPromptTemplate')}
       onClick={handleClickAddNew}
-      size="md"
-      variant="ghost"
-      w={8}
-      h={8}
     />
   );
 };

invokeai/frontend/web/src/features/stylePresets/components/StylePresetExportButton.tsx

@@ -53,14 +53,13 @@ export const StylePresetExportButton = () => {
 
   return (
     <IconButton
+      size="sm"
+      variant="link"
+      alignSelf="stretch"
       onClick={handleClickDownloadCsv}
       icon={!isLoading ? <PiDownloadSimpleBold /> : <PiSpinner />}
       tooltip={t('stylePresets.exportPromptTemplates')}
       aria-label={t('stylePresets.exportPromptTemplates')}
-      size="md"
-      variant="link"
-      w={8}
-      h={8}
       sx={isLoading ? loadingStyles : undefined}
       isDisabled={isLoading || presetCount === 0}
     />

invokeai/frontend/web/src/features/stylePresets/components/StylePresetImportButton.tsx

@@ -50,13 +50,12 @@ export const StylePresetImportButton = () => {
   return (
     <>
       <IconButton
+        size="sm"
+        variant="link"
+        alignSelf="stretch"
         icon={!isLoading ? <PiUploadSimpleBold /> : <PiSpinner />}
         tooltip={<TooltipContent />}
         aria-label={t('stylePresets.importTemplates')}
-        size="md"
-        variant="link"
-        w={8}
-        h={8}
         sx={isLoading ? loadingStyles : undefined}
         isDisabled={isLoading}
         {...getRootProps()}

invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx

@@ -1,4 +1,4 @@
-import { Badge, Flex, IconButton, Text } from '@invoke-ai/ui-library';
+import { Badge, Button, Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useDeleteStylePreset } from 'features/stylePresets/components/DeleteStylePresetDialog';
 import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
@@ -79,84 +79,80 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
   );
 
   return (
-    <Flex
-      gap={4}
+    <Button
+      as={Flex}
+      role="button"
+      gap={3}
       onClick={handleClickApply}
-      cursor="pointer"
-      _hover={{ backgroundColor: 'base.750' }}
-      py={3}
-      px={2}
-      borderRadius="base"
-      alignItems="flex-start"
+      p={3}
+      h="unset"
+      variant="ghost"
       w="full"
+      alignItems="flex-start"
     >
       <StylePresetImage presetImageUrl={preset.image} />
-      <Flex flexDir="column" w="full">
-        <Flex w="full" justifyContent="space-between" alignItems="flex-start">
-          <Flex alignItems="center" gap={2}>
-            <Text fontSize="md" noOfLines={2}>
-              {preset.name}
-            </Text>
-            {activeStylePresetId === preset.id && (
-              <Badge
-                color="invokeBlue.400"
-                borderColor="invokeBlue.700"
-                borderWidth={1}
-                bg="transparent"
-                flexShrink={0}
-              >
-                {t('stylePresets.active')}
-              </Badge>
-            )}
-          </Flex>
-
-          <Flex alignItems="center" gap={1}>
-            <IconButton
-              size="sm"
-              variant="ghost"
-              aria-label={t('stylePresets.copyTemplate')}
-              onClick={handleClickCopy}
-              icon={<PiCopyBold />}
-            />
-            {preset.type !== 'default' && (
-              <>
-                <IconButton
-                  size="sm"
-                  variant="ghost"
-                  aria-label={t('stylePresets.editTemplate')}
-                  onClick={handleClickEdit}
-                  icon={<PiPencilBold />}
-                />
-                <IconButton
-                  size="sm"
-                  variant="ghost"
-                  aria-label={t('stylePresets.deleteTemplate')}
-                  onClick={handleClickDelete}
-                  colorScheme="error"
-                  icon={<PiTrashBold />}
-                />
-              </>
-            )}
-          </Flex>
+      <Flex flexDir="column" w="full" alignItems="flex-start" flexGrow={1} minW={0} gap={2}>
+        <Flex gap={2} w="full" justifyContent="space-between" alignItems="center" minW={0} minH={8}>
+          <Text fontSize="md" noOfLines={2} fontWeight="semibold" color="base.100">
+            {preset.name}
+          </Text>
+          {activeStylePresetId === preset.id && (
+            <Badge color="invokeBlue.400" borderColor="invokeBlue.700" borderWidth={1} bg="transparent" flexShrink={0}>
+              {t('stylePresets.active')}
+            </Badge>
+          )}
+          <Spacer />
+          <IconButton
+            size="sm"
+            variant="link"
+            alignSelf="stretch"
+            aria-label={t('stylePresets.copyTemplate')}
+            onClick={handleClickCopy}
+            icon={<PiCopyBold />}
+          />
+          {preset.type !== 'default' && (
+            <>
+              <IconButton
+                size="sm"
+                variant="link"
+                alignSelf="stretch"
+                aria-label={t('stylePresets.editTemplate')}
+                onClick={handleClickEdit}
+                icon={<PiPencilBold />}
+              />
+              <IconButton
+                size="sm"
+                variant="link"
+                alignSelf="stretch"
+                aria-label={t('stylePresets.deleteTemplate')}
+                onClick={handleClickDelete}
+                colorScheme="error"
+                icon={<PiTrashBold />}
+              />
+            </>
+          )}
         </Flex>
-
         {showPromptPreviews && (
-          <Flex flexDir="column" gap={1}>
-            <Text fontSize="xs">
-              <Text as="span" fontWeight="semibold">
-                {t('stylePresets.positivePrompt')}:
-              </Text>{' '}
-              {preset.preset_data.positive_prompt}
-            </Text>
-            <Text fontSize="xs">
-              <Text as="span" fontWeight="semibold">
-                {t('stylePresets.negativePrompt')}:
-              </Text>{' '}
-              {preset.preset_data.negative_prompt}
-            </Text>
-          </Flex>
+          <>
+            <Flex gap={1} minW={0} fontSize="sm" whiteSpace="normal">
+              <Text>
+                {t('stylePresets.positivePrompt')}:{' '}
+                <Text as="span" fontWeight="normal">
+                  {preset.preset_data.positive_prompt}
+                </Text>
+              </Text>
+            </Flex>
+            <Flex gap={1} minW={0} fontSize="sm" whiteSpace="normal">
+              <Text>
+                {t('stylePresets.negativePrompt')}:{' '}
+                <Text as="span" fontWeight="normal">
+                  {preset.preset_data.negative_prompt}
+                </Text>
+              </Text>
+            </Flex>
+          </>
         )}
       </Flex>
-    </Flex>
+    </Button>
   );
 };

invokeai/frontend/web/src/features/stylePresets/components/StylePresetPromptPreviewToggle.tsx

@@ -17,7 +17,8 @@ export const StylePresetPromptPreviewToggle = () => {
   return (
     <IconButton
       size="sm"
-      variant="ghost"
+      variant="link"
+      alignSelf="stretch"
       aria-label={t('stylePresets.togglePromptPreviews')}
       tooltip={t('stylePresets.togglePromptPreviews')}
       onClick={handleToggle}