chore: remove unneeded parent button, closes #4550

leather-io · Nov 22, 2023 · c44a7bb · c44a7bb
1 parent 954e707
commit c44a7bb
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 80 deletions.
diff --git a/src/app/features/collectibles/components/collectibes.layout.tsx b/src/app/features/collectibles/components/collectibes.layout.tsx
@@ -13,8 +13,14 @@ interface CollectiblesLayoutProps {
   subHeader?: React.ReactNode;
   children: React.ReactNode;
 }
-export function CollectiblesLayout(props: CollectiblesLayoutProps) {
-  const { title, isLoading, onRefresh, subHeader, isLoadingMore, children } = props;
+export function CollectiblesLayout({
+  title,
+  isLoading,
+  onRefresh,
+  subHeader,
+  isLoadingMore,
+  children,
+}: CollectiblesLayoutProps) {
   return (
     <>
       <Flex flexDirection="row" justifyContent="space-between" flex={1}>

diff --git a/src/app/features/collectibles/components/collectible-item.layout.tsx b/src/app/features/collectibles/components/collectible-item.layout.tsx
@@ -30,87 +30,84 @@ export function CollectibleItemLayout({
   const [isHovered, bind] = useHover();
 
   return (
-    <Box>
-      <styled.button
-        _focus={{
-          outline: onClickLayout ? 'focus' : 'unset',
-          outlineOffset: onClickLayout ? '-4px' : 'unset',
-        }}
-        _hover={{ bg: 'accent.background-secondary' }}
-        borderRadius="20px"
-        cursor={onClickLayout ? 'pointer' : 'default'}
-        onClick={onClickLayout}
-        p="space.01"
-        textAlign="inherit"
-        type="button"
-        width="100%"
-        {...bind}
-      >
-        <Box height="0px" position="relative" pb="100%">
-          <CollectibleHover
-            onClickCallToAction={onClickCallToAction}
-            collectibleTypeIcon={collectibleTypeIcon}
-            isHovered={isHovered}
-          />
-          <Box
-            alignItems="center"
-            borderRadius="lg"
-            display="flex"
-            height="100%"
-            justifyContent="center"
-            left="0px"
-            overflow="hidden"
-            position="absolute"
-            style={{
-              backgroundColor: showBorder
-                ? token('colors.accent.background-primary')
-                : token('colors.accent.component-background-default'),
-              border: showBorder ? token('borders.dashed') : 'unset',
+    <Box
+      _focus={{
+        outline: onClickLayout ? 'focus' : 'unset',
+        outlineOffset: onClickLayout ? '-4px' : 'unset',
+      }}
+      _hover={{ bg: 'accent.background-secondary' }}
+      borderRadius="20px"
+      cursor={onClickLayout ? 'pointer' : 'default'}
+      onClick={onClickLayout}
+      p="space.01"
+      textAlign="inherit"
+      width="100%"
+      {...bind}
+    >
+      <Box height="0px" position="relative" pb="100%">
+        <CollectibleHover
+          onClickCallToAction={onClickCallToAction}
+          collectibleTypeIcon={collectibleTypeIcon}
+          isHovered={isHovered}
+        />
+        <Box
+          alignItems="center"
+          borderRadius="lg"
+          display="flex"
+          height="100%"
+          justifyContent="center"
+          left="0px"
+          overflow="hidden"
+          position="absolute"
+          style={{
+            backgroundColor: showBorder
+              ? token('colors.accent.background-primary')
+              : token('colors.accent.component-background-default'),
+            border: showBorder ? token('borders.dashed') : 'unset',
+          }}
+          top="0px"
+          width="100%"
+        >
+          {children}
+        </Box>
+      </Box>
+      <Stack gap="space.01" mt="space.04" pl="space.02" textAlign="left">
+        <styled.span
+          overflow="hidden"
+          textOverflow="ellipsis"
+          textStyle="label.01"
+          whiteSpace="nowrap"
+          width="95%"
+        >
+          {title}
+        </styled.span>
+        <styled.span color="accent.text-subdued" textStyle="caption.01">
+          {subtitle}
+        </styled.span>
+      </Stack>
+      {onClickSend ? (
+        <Box p="space.02">
+          <styled.button
+            _focus={{ clipPath: 'none', outline: 'focus' }}
+            _hover={{ bg: 'accent.background-primary', fontWeight: 500 }}
+            bg="accent.background-primary"
+            borderRadius="sm"
+            clipPath={isHovered ? 'none' : 'circle(0%)'}
+            onClick={e => {
+              e.stopPropagation();
+              onClickSend();
             }}
-            top="0px"
-            width="100%"
+            px="space.03"
+            py="space.02"
+            textStyle="caption.01"
+            type="button"
           >
-            {children}
-          </Box>
+            Send
+          </styled.button>
         </Box>
-        <Stack gap="space.01" mt="space.04" pl="space.02" textAlign="left">
-          <styled.span
-            overflow="hidden"
-            textOverflow="ellipsis"
-            textStyle="label.01"
-            whiteSpace="nowrap"
-            width="95%"
-          >
-            {title}
-          </styled.span>
-          <styled.span color="accent.text-subdued" textStyle="caption.01">
-            {subtitle}
-          </styled.span>
-        </Stack>
-        {onClickSend ? (
-          <Box p="space.02">
-            <styled.button
-              _focus={{ clipPath: 'none', outline: 'focus' }}
-              _hover={{ bg: 'accent.background-primary', fontWeight: 500 }}
-              bg="accent.background-primary"
-              borderRadius="sm"
-              clipPath={isHovered ? 'none' : 'circle(0%)'}
-              onClick={e => {
-                e.stopPropagation();
-                onClickSend();
-              }}
-              px="space.03"
-              py="space.02"
-              textStyle="caption.01"
-              type="button"
-            >
-              Send
-            </styled.button>
-          </Box>
-        ) : (
-          <Box p="space.01" />
-        )}
-      </styled.button>
+      ) : (
+        <Box p="space.01" />
+      )}
     </Box>
   );
 }