Merge pull request #1740 from trilitech/web-address-nft-design-feedback

Address NFT UI feedback

apps/web/src/components/BackButton/BaseBackButton.tsx

@@ -1,29 +1,23 @@
 import { IconButton, type IconButtonProps } from "@chakra-ui/react";
 
 import { ArrowLeftCircleIcon } from "../../assets/icons";
-import { useColor } from "../../styles/useColor";
 
-export const BaseBackButton = (props: Omit<IconButtonProps, "aria-label">) => {
-  const color = useColor();
-
-  return (
-    <IconButton
-      position="absolute"
-      top={{
-        base: "12px",
-        lg: "18px",
-      }}
-      left={{
-        base: "12px",
-        lg: "18px",
-      }}
-      padding="0"
-      color={color("400")}
-      aria-label="Go back"
-      icon={<ArrowLeftCircleIcon width="24px" height="24px" />}
-      size="sm"
-      variant="ghost"
-      {...props}
-    />
-  );
-};
+export const BaseBackButton = (props: Omit<IconButtonProps, "aria-label">) => (
+  <IconButton
+    position="absolute"
+    top={{
+      base: "12px",
+      lg: "18px",
+    }}
+    left={{
+      base: "12px",
+      lg: "18px",
+    }}
+    padding="0"
+    aria-label="Go back"
+    icon={<ArrowLeftCircleIcon width="24px" height="24px" />}
+    size="sm"
+    variant="iconButton"
+    {...props}
+  />
+);

apps/web/src/components/CloseButton/BaseCloseButton.tsx

@@ -1,29 +1,23 @@
 import { IconButton, type IconButtonProps } from "@chakra-ui/react";
 
 import { CloseIcon } from "../../assets/icons";
-import { useColor } from "../../styles/useColor";
 
-export const BaseCloseButton = (props: Omit<IconButtonProps, "aria-label">) => {
-  const color = useColor();
-
-  return (
-    <IconButton
-      position="absolute"
-      top={{
-        base: "12px",
-        lg: "18px",
-      }}
-      right={{
-        base: "12px",
-        lg: "18px",
-      }}
-      padding="0"
-      color={color("400")}
-      icon={<CloseIcon width="24px" height="24px" />}
-      size="sm"
-      variant="ghost"
-      {...props}
-      aria-label="Close"
-    />
-  );
-};
+export const BaseCloseButton = (props: Omit<IconButtonProps, "aria-label">) => (
+  <IconButton
+    position="absolute"
+    top={{
+      base: "12px",
+      lg: "18px",
+    }}
+    right={{
+      base: "12px",
+      lg: "18px",
+    }}
+    padding="0"
+    icon={<CloseIcon width="24px" height="24px" />}
+    size="sm"
+    variant="iconButton"
+    {...props}
+    aria-label="Close"
+  />
+);

apps/web/src/components/SendFlow/SignPageHeader.tsx

@@ -1,10 +1,10 @@
-import { Flex, Heading, IconButton, ModalCloseButton, ModalHeader } from "@chakra-ui/react";
+import { Flex, Heading, ModalHeader } from "@chakra-ui/react";
 import { type AccountOperations, type ImplicitAccount } from "@umami/core";
 import { type PropsWithChildren } from "react";
 
 import { type SignPageMode } from "./utils";
-import { ArrowLeftCircleIcon } from "../../assets/icons";
-import { useColor } from "../../styles/useColor";
+import { ModalBackButton } from "../BackButton";
+import { ModalCloseButton } from "../CloseButton";
 
 /**
  * @deprecated - not needed in web, was copied over from desktop
@@ -26,38 +26,20 @@ export const subTitle = (signer: ImplicitAccount): string | undefined => {
 };
 
 export const SignPageHeader = ({
-  goBack,
   title,
   children,
 }: PropsWithChildren<{
   goBack?: () => void;
   title?: string;
-}>) => {
-  const color = useColor();
-
-  return (
-    <ModalHeader>
-      <Flex paddingTop="6px">
-        {goBack && (
-          <IconButton
-            alignSelf="flex-start"
-            width="22px"
-            height="22px"
-            marginTop="-30px"
-            marginLeft="-20px"
-            color={color("400")}
-            aria-label="back"
-            icon={<ArrowLeftCircleIcon />}
-            onClick={goBack}
-            variant="empty"
-          />
-        )}
-      </Flex>
-      <Heading data-testid="sign-page-header" size="xl">
-        {title || "Confirm Transaction"}
-      </Heading>
-      <ModalCloseButton />
-      {children}
-    </ModalHeader>
-  );
-};
+}>) => (
+  <ModalHeader>
+    <Flex paddingTop="6px">
+      <ModalBackButton />
+    </Flex>
+    <Heading data-testid="sign-page-header" size="xl">
+      {title || "Confirm Transaction"}
+    </Heading>
+    <ModalCloseButton />
+    {children}
+  </ModalHeader>
+);

apps/web/src/styles/theme.ts

@@ -194,9 +194,9 @@ const theme = extendTheme({
       }),
     },
     Link: {
-      baseStyle: (props: StyleFunctionProps) => ({
-        color: mode(light.grey[600], dark.grey[600])(props),
-      }),
+      baseStyle: {
+        color: "gray.500",
+      },
       variants: {
         dropdownOption: {
           display: "flex",
@@ -237,6 +237,16 @@ const theme = extendTheme({
         },
       },
       variants: {
+        iconButton: {
+          height: "34px",
+          width: "34px",
+          bg: "transparent",
+          color: "gray.500",
+          _hover: {
+            background: "gray.100",
+            color: "gray.600",
+          },
+        },
         dropdownOption: {
           display: "flex",
           justifyContent: "flex-start",

apps/web/src/views/NFTs/NFTDrawerCard/JSONAccordion.tsx

@@ -7,6 +7,7 @@ import {
   type AccordionProps,
   Box,
   Heading,
+  Icon,
 } from "@chakra-ui/react";
 import { type NFTBalance } from "@umami/core";
 
@@ -33,17 +34,14 @@ export const JSONAccordion = ({ nft, ...props }: { nft: NFTBalance } & Accordion
           <Box position="relative">
             <CopyButton
               position="absolute"
-              top="12px"
-              right="0"
-              width="24px"
-              height="24px"
-              color={color("500")}
+              top="2px"
+              right="-6px"
               _hover={{ color: color("700") }}
               aria-label="Copy JSON"
               value={formattedJSON}
-              variant="auxiliary"
+              variant="iconButton"
             >
-              <FileCopyIcon />
+              <Icon as={FileCopyIcon} width="24px" height="24px" />
             </CopyButton>
           </Box>
           <pre

apps/web/src/views/NFTs/NFTDrawerCard/NFTDrawerCard.tsx

@@ -1,14 +1,4 @@
-import {
-  AspectRatio,
-  Button,
-  Card,
-  CardBody,
-  Flex,
-  Heading,
-  Image,
-  Square,
-  Text,
-} from "@chakra-ui/react";
+import { Button, Card, CardBody, Flex, Heading, Image, Square, Text } from "@chakra-ui/react";
 import { useDynamicModalContext } from "@umami/components";
 import { type NFTBalance, artifactUri, mimeType, tokenName } from "@umami/core";
 import { getIPFSurl } from "@umami/tezos";
@@ -33,26 +23,30 @@ export const NFTDrawerCard = ({ nft }: { nft: NFTBalance }) => {
   return (
     <Flex flexDirection="column">
       <Card boxShadow="none">
-        <CardBody justifyContent="center" display="flex" padding="0">
+        <CardBody
+          justifyContent="center"
+          display="flex"
+          maxHeight={{ base: "366px", lg: "446px" }}
+          padding="0"
+          aspectRatio={1}
+        >
           <Square
-            maxWidth={{ lg: "446px", base: "366px" }}
-            maxHeight={{ lg: "446px", base: "366px" }}
+            maxHeight={{ base: "366px", lg: "446px" }}
             background={color("50")}
             borderRadius="6px"
-            size="100%"
+            size="full"
           >
             {isVideo ? (
               <ReactPlayer data-testid="nft-video" loop playing url={url} />
             ) : (
-              <AspectRatio width="full" ratio={1}>
-                <Image
-                  borderRadius="6px"
-                  objectFit="contain"
-                  data-testid="nft-image"
-                  fallbackSrc={fallbackUrl}
-                  src={url}
-                />
-              </AspectRatio>
+              <Image
+                maxHeight={{ base: "366px", lg: "446px" }}
+                borderRadius="6px"
+                objectFit="contain"
+                data-testid="nft-image"
+                fallbackSrc={fallbackUrl}
+                src={url}
+              />
             )}
 
             <NFTBalancePill nft={nft} />

apps/web/src/views/NFTs/NFTDrawerCard/TagsSection.tsx

@@ -1,4 +1,4 @@
-import { Center, Icon, Text, Wrap, WrapItem } from "@chakra-ui/react";
+import { Flex, Icon, Text, Wrap, WrapItem } from "@chakra-ui/react";
 import { type NFTBalance } from "@umami/core";
 
 import { TagIcon } from "../../../assets/icons";
@@ -17,10 +17,12 @@ export const TagsSection = ({ nft }: { nft: NFTBalance }) => {
     <Wrap marginTop="20px" data-testid="tags-section">
       {tags.map(tag => (
         <WrapItem key={tag} padding="6px" background={color("100")} borderRadius="6px">
-          <Center gap="4px" data-testid="nft-tag">
-            <Icon as={TagIcon} color={color("400")} />
-            <Text color={color("700")}>{tag}</Text>
-          </Center>
+          <Flex gap="4px" data-testid="nft-tag">
+            <Icon as={TagIcon} width="18px" height="18px" color={color("400")} />
+            <Text color={color("700")} size="sm">
+              {tag}
+            </Text>
+          </Flex>
         </WrapItem>
       ))}
     </Wrap>

apps/web/src/views/NFTs/NFTFilter/NFTFilter.tsx

@@ -11,6 +11,7 @@ import {
   Text,
   type UseCheckboxGroupReturn,
   VStack,
+  useDisclosure,
 } from "@chakra-ui/react";
 
 import { FilterIcon } from "../../../assets/icons";
@@ -25,11 +26,24 @@ export const NFTFilter = ({
   getCheckboxProps: UseCheckboxGroupReturn["getCheckboxProps"];
 } & ButtonProps) => {
   const color = useColor();
+  const { onOpen, onClose, isOpen } = useDisclosure();
 
   return (
-    <Popover variant="dropdown">
+    <Popover
+      isOpen={isOpen}
+      onClose={onClose}
+      onOpen={onOpen}
+      placement="bottom-end"
+      variant="dropdown"
+    >
       <PopoverTrigger>
-        <Button data-testid="nft-filter-trigger" size="sm" variant="auxiliary" {...props}>
+        <Button
+          background={isOpen ? "gray.100" : "none"}
+          data-testid="nft-filter-trigger"
+          size="sm"
+          variant="auxiliary"
+          {...props}
+        >
           <Icon as={FilterIcon} color={color("400")} />
           <Text color={color("600")} fontWeight="600" size="sm">
             Filter By
@@ -52,7 +66,7 @@ export const NFTFilter = ({
                   {...getCheckboxProps({ value })}
                   color={color("900")}
                   fontWeight="600"
-                  size="lg"
+                  size="md"
                 >
                   {label}
                 </Checkbox>

apps/web/src/views/NFTs/NFTs.tsx

@@ -1,7 +1,8 @@
-import { Flex, Heading, SimpleGrid } from "@chakra-ui/react";
+import { Box, Flex, Heading, SimpleGrid } from "@chakra-ui/react";
 import { useDynamicDrawerContext } from "@umami/components";
 import { fullId } from "@umami/core";
 import BigNumber from "bignumber.js";
+import { range } from "lodash";
 
 import { NFTCard } from "./NFTCard";
 import { NFTDrawer } from "./NFTDrawer";
@@ -15,10 +16,10 @@ export const NFTs = () => {
   const { nfts, options: nftFilterOptions, getCheckboxProps } = useNFTFilter();
   const totalCount = nfts.reduce((acc, nft) => acc.plus(nft.balance), BigNumber(0)).toNumber();
 
-  let gridTemplateColumns = "repeat(auto-fit, minmax(min(100%/2, max(157px, 100%/5)), 1fr))";
-  if (nfts.length < 3) {
-    gridTemplateColumns = `repeat(auto-fit, min(100% / ${nfts.length} - 6px, 50%))`;
-  }
+  const gridTemplateColumns = {
+    base: "repeat(auto-fit, minmax(min(100%/2, max(157px, 100%/5)), 1fr))",
+    lg: "repeat(auto-fit, minmax(min(100%/2, max(236px, 100%/5)), 1fr))",
+  };
 
   return (
     <Flex flexDirection="column" gap={{ base: "12px", lg: "30px" }} height="full">
@@ -42,6 +43,10 @@ export const NFTs = () => {
                 onClick={() => openWith(<NFTDrawer nft={nft} />)}
               />
             ))}
+            {/* empty boxes to make up to a full row */}
+            {range(4 - (nfts.length % 4)).map(index => (
+              <Box key={index} />
+            ))}
           </SimpleGrid>
         </>
       ) : (