From 7efd876111127176ba22fdafc800bda156919866 Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Thu, 15 Aug 2024 15:50:52 +0100 Subject: [PATCH 1/3] Address NFT feedback --- .../components/BackButton/BaseBackButton.tsx | 44 ++++++++--------- .../CloseButton/BaseCloseButton.tsx | 44 ++++++++--------- .../components/SendFlow/SignPageHeader.tsx | 48 ++++++------------- apps/web/src/styles/theme.ts | 16 +++++-- .../NFTs/NFTDrawerCard/JSONAccordion.tsx | 12 ++--- .../views/NFTs/NFTDrawerCard/TagsSection.tsx | 12 +++-- .../src/views/NFTs/NFTFilter/NFTFilter.tsx | 20 ++++++-- 7 files changed, 95 insertions(+), 101 deletions(-) diff --git a/apps/web/src/components/BackButton/BaseBackButton.tsx b/apps/web/src/components/BackButton/BaseBackButton.tsx index d24eecba2e..7631a517ea 100644 --- a/apps/web/src/components/BackButton/BaseBackButton.tsx +++ b/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) => { - const color = useColor(); - - return ( - } - size="sm" - variant="ghost" - {...props} - /> - ); -}; +export const BaseBackButton = (props: Omit) => ( + } + size="sm" + variant="iconButton" + {...props} + /> +); diff --git a/apps/web/src/components/CloseButton/BaseCloseButton.tsx b/apps/web/src/components/CloseButton/BaseCloseButton.tsx index fd22d426a3..e6ec6cef98 100644 --- a/apps/web/src/components/CloseButton/BaseCloseButton.tsx +++ b/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) => { - const color = useColor(); - - return ( - } - size="sm" - variant="ghost" - {...props} - aria-label="Close" - /> - ); -}; +export const BaseCloseButton = (props: Omit) => ( + } + size="sm" + variant="iconButton" + {...props} + aria-label="Close" + /> +); diff --git a/apps/web/src/components/SendFlow/SignPageHeader.tsx b/apps/web/src/components/SendFlow/SignPageHeader.tsx index 8852f7582d..b9e55b9ef3 100644 --- a/apps/web/src/components/SendFlow/SignPageHeader.tsx +++ b/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 ( - - - {goBack && ( - } - onClick={goBack} - variant="empty" - /> - )} - - - {title || "Confirm Transaction"} - - - {children} - - ); -}; +}>) => ( + + + + + + {title || "Confirm Transaction"} + + + {children} + +); diff --git a/apps/web/src/styles/theme.ts b/apps/web/src/styles/theme.ts index 185681b6d4..3097cea4ba 100644 --- a/apps/web/src/styles/theme.ts +++ b/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", diff --git a/apps/web/src/views/NFTs/NFTDrawerCard/JSONAccordion.tsx b/apps/web/src/views/NFTs/NFTDrawerCard/JSONAccordion.tsx index bd679ada12..d1e9679b93 100644 --- a/apps/web/src/views/NFTs/NFTDrawerCard/JSONAccordion.tsx +++ b/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 - +
 {
     
       {tags.map(tag => (
         
-          
- - {tag} -
+ + + + {tag} + +
))}
diff --git a/apps/web/src/views/NFTs/NFTFilter/NFTFilter.tsx b/apps/web/src/views/NFTs/NFTFilter/NFTFilter.tsx index 61ca6db0ca..34b68fc2ca 100644 --- a/apps/web/src/views/NFTs/NFTFilter/NFTFilter.tsx +++ b/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 ( - + -