Update accounts filter to match design

trilitech · Oct 8, 2023 · 5652281 · 5652281
1 parent ebab46a
commit 5652281
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git a/src/components/AccountSelector/AccountListDisplay.tsx b/src/components/AccountSelector/AccountListDisplay.tsx
@@ -2,14 +2,14 @@ import { MenuItem, MenuList } from "@chakra-ui/react";
 import React from "react";
 import colors from "../../style/colors";
 import { Account } from "../../types/Account";
-import { AccountSmallTile } from "./AccountSmallTile";
+import AddressTile from "../AddressTile/AddressTile";
 
 export const AccountListDisplay: React.FC<{
   accounts: Account[];
   onSelect: (account: Account) => void;
 }> = ({ accounts, onSelect }) => {
   return (
-    <MenuList bg={colors.gray[900]} maxHeight={300} overflow="scroll" zIndex="docked">
+    <MenuList bg={colors.gray[900]} maxHeight={300} p={0} overflow="scroll" zIndex="docked">
       {accounts.map(account => {
         return (
           <MenuItem
@@ -21,15 +21,21 @@ export const AccountListDisplay: React.FC<{
             key={account.address.pkh}
             minH="48px"
             w="100%"
-            // TODO implement hover color that disapeared
+            // TODO implement hover color that disappeared
             // https://app.asana.com/0/1204165186238194/1204412123679802/f
-            bg={colors.gray[900]}
+            bg={colors.gray[700]}
           >
-            <AccountSmallTile
+            <AddressTile
+              cursor="pointer"
+              address={account.address}
               _hover={{
-                background: colors.gray[600],
+                background: colors.gray[500],
               }}
-              pkh={account.address.pkh}
+              background={colors.gray[700]}
+              width="370px"
+              borderRadius="4px"
+              padding="5px"
+              height="40px"
             />
           </MenuItem>
         );

diff --git a/src/components/AddressTile/AddressTile.tsx b/src/components/AddressTile/AddressTile.tsx
@@ -13,6 +13,7 @@ const AddressTile: React.FC<{ address: Address } & FlexProps> = ({ address, ...f
   const balance = getBalance(addressKind.pkh);
   return (
     <Flex
+      data-testid="address-tile"
       alignItems="center"
       w="400px"
       p="9px 10px"

diff --git a/src/components/useAccountsFilter.test.tsx b/src/components/useAccountsFilter.test.tsx
@@ -29,7 +29,7 @@ describe("useAccountsFilter", () => {
   test("Clicking account filter should display a list of all the accounts in store", () => {
     render(fixture());
     fireEvent.click(screen.getByTestId("account-filter"));
-    const listItems = screen.getAllByTestId("account-small-tile");
+    const listItems = screen.getAllByTestId("address-tile");
     expect(listItems).toHaveLength(3);
     expect(listItems[0]).toHaveTextContent(accounts[0].label);
     expect(listItems[1]).toHaveTextContent(accounts[1].label);
@@ -40,11 +40,11 @@ describe("useAccountsFilter", () => {
     render(fixture());
 
     fireEvent.click(screen.getByTestId("account-filter"));
-    const listItems = screen.getAllByTestId("account-small-tile");
+    const listItems = screen.getAllByTestId("address-tile");
     fireEvent.click(listItems[0]);
     fireEvent.click(listItems[2]);
     {
-      const listItems = screen.getAllByTestId("account-small-tile");
+      const listItems = screen.getAllByTestId("address-tile");
       expect(listItems).toHaveLength(1);
       expect(listItems[0]).toHaveTextContent(accounts[1].label);
     }
@@ -59,7 +59,7 @@ describe("useAccountsFilter", () => {
     render(fixture());
 
     fireEvent.click(screen.getByTestId("account-filter"));
-    const listItems = screen.getAllByTestId("account-small-tile");
+    const listItems = screen.getAllByTestId("address-tile");
     fireEvent.click(listItems[0]);
     fireEvent.click(listItems[2]);
 

diff --git a/src/components/useAccountsFilter.tsx b/src/components/useAccountsFilter.tsx
@@ -30,7 +30,7 @@ export const useAccountsFilter = () => {
             pl={0}
             fontWeight="normal"
             data-testid="account-filter"
-            my={4}
+            my="16px"
           >
             Filter by Account
           </MenuButton>
@@ -41,7 +41,7 @@ export const useAccountsFilter = () => {
             }}
           />
         </Menu>
-        <Wrap p={2} width="90%">
+        <Wrap p="8px" width="90%">
           {selectedAccounts.map(account => (
             <AddressPill
               data-testid="account-pill"
@@ -55,7 +55,7 @@ export const useAccountsFilter = () => {
                   );
                 },
               }}
-              mr={2}
+              mr="8px"
             />
           ))}
         </Wrap>