Merge pull request #515 from trilitech/address-ui-feedback-part1

Address UI feedback part1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "umami",
   "productName": "umami",
-  "version": "2.0.0-alpha",
+  "version": "2.0.0-beta1",
   "private": true,
   "author": "Trilitech <[email protected]>",
   "description": "Tezos Wallet",

src/assets/icons/ChevronDown.tsx

@@ -4,17 +4,16 @@ import colors from "../../style/colors";
 const ChevronDownIcon: React.FC<IconProps> = props => {
   return (
     <Icon
-      data-testid="baker-icon"
       width="18px"
       height="18px"
       viewBox="0 0 18 18"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      stroke={colors.gray[450]}
       {...props}
     >
       <path
         d="M4.5 6.75L9 11.25L13.5 6.75"
-        stroke={colors.gray[450]}
         strokeWidth="1.2"
         strokeLinecap="round"
         strokeLinejoin="round"

src/assets/icons/ChevronRight.tsx

@@ -1,4 +1,17 @@
-import { IconProps } from "@chakra-ui/react";
+import { Icon, IconProps } from "@chakra-ui/react";
+import colors from "../../style/colors";
 
-const ChevronDownIcon: React.FC<IconProps> = props => <ChevronDownIcon {...props} rotate="90deg" />;
-export default ChevronDownIcon;
+const ChevronRightIcon: React.FC<IconProps> = props => (
+  <Icon
+    width="18px"
+    height="18px"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke={colors.gray[450]}
+    {...props}
+  >
+    <path d="M7 14L11.5 9.5L7 5" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+  </Icon>
+);
+export default ChevronRightIcon;

src/assets/icons/ExitArrow.tsx

@@ -0,0 +1,25 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+import colors from "../../style/colors";
+
+const ExitArrowIcon: React.FC<IconProps> = props => {
+  return (
+    <Icon
+      width="18px"
+      height="18px"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke={colors.gray[450]}
+      {...props}
+    >
+      <path
+        d="M15 3V15M3 9H12M12 9L9 6M12 9L9 12"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Icon>
+  );
+};
+
+export default ExitArrowIcon;

src/assets/icons/ExternalLink.tsx

@@ -0,0 +1,25 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+import colors from "../../style/colors";
+
+const ExternalLinkIcon: React.FC<IconProps> = props => {
+  return (
+    <Icon
+      width="18px"
+      height="18px"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke={colors.gray[450]}
+      {...props}
+    >
+      <path
+        d="M15 3L9 9M15 3V6.375M15 3H11.625M14.25 9.375V12.6C14.25 13.4401 14.25 13.8601 14.0865 14.181C13.9427 14.4632 13.7132 14.6927 13.431 14.8365C13.1101 15 12.6901 15 11.85 15H5.4C4.55992 15 4.13988 15 3.81901 14.8365C3.53677 14.6927 3.3073 14.4632 3.16349 14.181C3 13.8601 3 13.4401 3 12.6V6.15C3 5.30992 3 4.88988 3.16349 4.56901C3.3073 4.28677 3.53677 4.0573 3.81901 3.91349C4.13988 3.75 4.55992 3.75 5.4 3.75H8.625"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Icon>
+  );
+};
+
+export default ExternalLinkIcon;

src/assets/icons/FileArrowDown.tsx

@@ -0,0 +1,25 @@
+import { Icon, IconProps } from "@chakra-ui/react";
+import colors from "../../style/colors";
+
+const FileArrowDownIcon: React.FC<IconProps> = props => {
+  return (
+    <Icon
+      width="18px"
+      height="18px"
+      viewBox="0 0 18 18"
+      fill="none"
+      stroke={colors.gray[450]}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9 8.25V12.75M9 12.75L7.5 11.25M9 12.75L10.5 11.25M9.75 2.25H6.15C5.30992 2.25 4.88988 2.25 4.56901 2.41349C4.28677 2.5573 4.0573 2.78677 3.91349 3.06901C3.75 3.38988 3.75 3.80992 3.75 4.65V13.35C3.75 14.1901 3.75 14.6101 3.91349 14.931C4.0573 15.2132 4.28677 15.4427 4.56901 15.5865C4.88988 15.75 5.30992 15.75 6.15 15.75H11.85C12.6901 15.75 13.1101 15.75 13.431 15.5865C13.7132 15.4427 13.9427 15.2132 14.0865 14.931C14.25 14.6101 14.25 14.1901 14.25 13.35V6.75M9.75 2.25L14.25 6.75M9.75 2.25V5.55C9.75 5.97004 9.75 6.18006 9.83175 6.34049C9.90365 6.48161 10.0184 6.59635 10.1595 6.66825C10.3199 6.75 10.53 6.75 10.95 6.75H14.25"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Icon>
+  );
+};
+
+export default FileArrowDownIcon;

src/components/AccountDrawer/AccountDrawerDisplay.tsx

@@ -97,7 +97,7 @@ export const AccountDrawerDisplay: React.FC<Props> = ({
       </Heading>
       <AddressPill address={account.address} mode={{ type: "no_icons" }} mt="8px" mb="30px" />
       {balance && <TezRecapDisplay center balance={balance} dollarBalance={dollarBalance} />}
-      <Center mt="24px">
+      <Center mt="34px">
         <RoundButton
           onClick={onSend}
           label="Send"

src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx

@@ -1,11 +1,9 @@
-import { Flex, TabList, TabPanel, TabPanels, Tabs, Text } from "@chakra-ui/react";
+import { Button, Flex, TabList, TabPanel, TabPanels, Tabs, Text } from "@chakra-ui/react";
 import React from "react";
-import { FiExternalLink } from "react-icons/fi";
 import { Account, AccountType } from "../../../types/Account";
 import { FA12TokenBalance, FA2TokenBalance, NFTBalance } from "../../../types/TokenBalance";
 import { Delegation } from "../../../types/Delegation";
 import { buildTzktAddressUrl } from "../../../utils/tzkt/helpers";
-import { IconAndTextBtnLink } from "../../IconAndTextBtn";
 import SmallTab from "../../SmallTab";
 import { DelegationDisplay } from "./DelegationDisplay";
 import MultisigPendingAccordion from "./MultisigPendingAccordion";
@@ -17,6 +15,8 @@ import { useSelectedNetwork } from "../../../utils/hooks/networkHooks";
 import { OperationTileContext } from "../../OperationTile";
 import { useGetOperations } from "../../../views/operations/useGetOperations";
 import colors from "../../../style/colors";
+import { ExternalLink } from "../../ExternalLink";
+import ExternalLinkIcon from "../../../assets/icons/ExternalLink";
 
 export const AssetsPanel: React.FC<{
   tokens: Array<FA12TokenBalance | FA2TokenBalance>;
@@ -46,13 +46,14 @@ export const AssetsPanel: React.FC<{
           <SmallTab>Tokens</SmallTab>
         </Flex>
 
-        <IconAndTextBtnLink
-          data-testid="tzkt-link"
-          icon={FiExternalLink}
-          label="View on Tzkt"
-          href={buildTzktAddressUrl(network, account.address.pkh)}
-          textFirst
-        />
+        <ExternalLink href={buildTzktAddressUrl(network, account.address.pkh)}>
+          <Button variant="CTAWithIcon" paddingRight={0}>
+            <Text mr="7px" size="sm">
+              View on Tzkt
+            </Text>
+            <ExternalLinkIcon stroke="currentcolor" />
+          </Button>
+        </ExternalLink>
       </TabList>
       <TabPanels height="100%">
         {isMultisig && (

src/components/CSVFileUploader/index.tsx

@@ -1,22 +1,18 @@
-import { HiOutlineDocumentDownload } from "react-icons/hi";
-import colors from "../../style/colors";
-import { IconAndTextBtn } from "../IconAndTextBtn";
 import { useContext } from "react";
 import { DynamicModalContext } from "../DynamicModal";
 import CSVFileUploadForm from "./CSVFileUploadForm";
+import { Button, Text } from "@chakra-ui/react";
+import FileArrowDownIcon from "../../assets/icons/FileArrowDown";
 
 const CSVFileUploader = () => {
   const { openWith } = useContext(DynamicModalContext);
   return (
-    <IconAndTextBtn
-      icon={HiOutlineDocumentDownload}
-      label="Load CSV file"
-      color={colors.gray[400]}
-      _hover={{
-        color: colors.gray[300],
-      }}
-      onClick={() => openWith(<CSVFileUploadForm />)}
-    />
+    <Button variant="CTAWithIcon" onClick={() => openWith(<CSVFileUploadForm />)}>
+      <Text mr="4px" size="sm">
+        Load CSV file
+      </Text>
+      <FileArrowDownIcon stroke="currentcolor" />
+    </Button>
   );
 };
 

src/components/ClickableCard.tsx

@@ -1,34 +1,30 @@
-import { Card, CardBody, Flex, Heading, LayoutProps } from "@chakra-ui/react";
-import { useState } from "react";
+import { Card, CardBody, CardProps, Flex, Heading } from "@chakra-ui/react";
 import colors from "../style/colors";
-import { ChevronRightIcon } from "@chakra-ui/icons";
+import ChevronRightIcon from "../assets/icons/ChevronRight";
 
-const ClickableCard: React.FC<{
-  onClick?: () => void;
-  h?: LayoutProps["h"];
-  children: React.ReactNode;
-}> = ({ onClick, h, children }) => {
-  //TODO: Remove hooks for hover. CSS _hover doesn't work.
-  const [mouseHover, setMouseHover] = useState(false);
+const ClickableCard: React.FC<
+  {
+    onClick?: () => void;
+    children: React.ReactNode;
+    isSelected: boolean;
+  } & CardProps
+> = ({ onClick, children, isSelected, ...props }) => {
   return (
     <Card
-      paddingX={1}
-      marginY={2}
+      height="66px"
+      padding="24px"
+      marginBottom="10px"
       bgColor={colors.gray[900]}
       borderRadius="lg"
-      justifyContent="center"
       border="1px solid"
-      borderColor={mouseHover && onClick ? colors.gray[600] : colors.gray[700]}
-      onMouseEnter={() => {
-        setMouseHover(true);
-      }}
-      onMouseLeave={() => {
-        setMouseHover(false);
-      }}
+      borderColor={isSelected ? ` ${colors.orangeL}` : "transparent"}
+      _hover={{ border: `1px solid ${colors.gray[500]}`, bg: colors.gray[800] }}
+      justifyContent="center"
       cursor={onClick ? "pointer" : undefined}
-      h={h}
+      onClick={onClick}
+      {...props}
     >
-      <CardBody onClick={onClick}>{children}</CardBody>
+      <CardBody padding={0}>{children}</CardBody>
     </Card>
   );
 };
@@ -37,9 +33,10 @@ export const SettingsCard: React.FC<{
   left: string;
   onClick?: () => void;
   children: React.ReactNode;
-}> = ({ left, onClick, children }) => {
+  isSelected: boolean;
+}> = ({ left, onClick, isSelected, children }) => {
   return (
-    <ClickableCard onClick={onClick} h="66px">
+    <ClickableCard onClick={onClick} isSelected={isSelected}>
       <Flex alignItems="center" h="100%">
         <Flex justifyContent="space-between" alignItems="center" w="100%">
           <Heading size="sm">{left}</Heading>
@@ -52,20 +49,12 @@ export const SettingsCard: React.FC<{
 
 export const SettingsCardWithDrawerIcon: React.FC<{
   left: string;
+  isSelected: boolean;
   onClick?: () => void;
-}> = ({ left, onClick }) => {
+}> = ({ left, isSelected, onClick }) => {
   return (
-    <SettingsCard left={left} onClick={onClick}>
-      <ChevronRightIcon
-        viewBox="0 0 18 18"
-        height="18px"
-        width="18px"
-        marginTop="-3px"
-        color={colors.gray[450]}
-        _hover={{
-          color: colors.gray[300],
-        }}
-      />
+    <SettingsCard left={left} onClick={onClick} isSelected={isSelected}>
+      <ChevronRightIcon />
     </SettingsCard>
   );
 };

src/components/ExternalLink.tsx

@@ -0,0 +1,21 @@
+import { Link, LinkProps } from "@chakra-ui/react";
+import { PropsWithChildren } from "react";
+
+export const ExternalLink: React.FC<PropsWithChildren<{ href: string } & LinkProps>> = ({
+  href,
+  children,
+  ...props
+}) => (
+  <Link
+    href={href}
+    role="link"
+    display="flex"
+    target="_blank"
+    rel="noreferrer"
+    alignItems="center"
+    _hover={{ textDecoration: "none" }}
+    {...props}
+  >
+    {children}
+  </Link>
+);

src/components/IconAndTextBtn.tsx

@@ -1,4 +1,4 @@
-import { Flex, FlexProps, Icon, Text, Link, IconProps } from "@chakra-ui/react";
+import { Flex, FlexProps, Icon, Text, IconProps } from "@chakra-ui/react";
 import React from "react";
 import { IconType } from "react-icons/lib";
 import colors from "../style/colors";
@@ -14,7 +14,9 @@ type Props = {
   textMargin?: string;
 } & FlexProps;
 
-// TODO: Replace with a proper button
+/**
+ * @deprecated To be replaced with a proper button
+ */
 export const IconAndTextBtn: React.FC<Props> = ({
   icon,
   onClick = () => {},
@@ -52,22 +54,3 @@ export const IconAndTextBtn: React.FC<Props> = ({
     </Flex>
   );
 };
-
-export const IconAndTextBtnLink: React.FC<Props & { href: string }> = ({ href, ...props }) => {
-  return (
-    <Link
-      role="link"
-      href={href}
-      display="flex"
-      target="_blank"
-      rel="noreferrer"
-      sx={{
-        "&:hover": {
-          textDecoration: "none",
-        },
-      }}
-    >
-      <IconAndTextBtn {...props} />
-    </Link>
-  );
-};