Update recipient styles

apps/web/src/components/AccountTile/AccountTileIcon.tsx

@@ -13,7 +13,13 @@ import {
 } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";
 
-export const AccountTileIcon = ({ account }: { account: ImplicitAccount }) => {
+export const AccountTileIcon = ({
+  size = 30,
+  account,
+}: {
+  size?: number;
+  account: ImplicitAccount;
+}) => {
   const color = useColor();
 
   switch (account.type) {
@@ -22,7 +28,7 @@ export const AccountTileIcon = ({ account }: { account: ImplicitAccount }) => {
     case "mnemonic":
       return (
         <Center borderRadius="full">
-          <ReactIdenticon background="white" size={30} string={account.address.pkh} />
+          <ReactIdenticon background="white" size={size} string={account.address.pkh} />
         </Center>
       );
     case "social": {

apps/web/src/components/AccountTile/AccountTileWrapper.tsx

@@ -3,15 +3,25 @@ import { type PropsWithChildren } from "react";
 
 import { useColor } from "../../styles/useColor";
 
-export const AccountTileWrapper = ({ children, ...props }: PropsWithChildren<SquareProps>) => {
+export const AccountTileWrapper = ({
+  size = "sm",
+  children,
+  ...props
+}: PropsWithChildren<Omit<SquareProps, "size">> & {
+  size?: "xs" | "sm";
+}) => {
   const color = useColor();
+  const sizes = {
+    xs: "30px",
+    sm: "48px",
+  };
 
   return (
     <Circle
       color={color("white")}
       background={color("white", "black")}
       filter="drop-shadow(0px 0px 12px rgba(45, 55, 72, 0.08))"
-      size="48px"
+      size={sizes[size]}
       {...props}
     >
       {children}

apps/web/src/components/AddressAutocomplete/AddressAutocomplete.tsx

@@ -130,14 +130,16 @@ export const AddressAutocomplete = <T extends FieldValues, U extends Path<T>>({
           >
             <AddressTile
               width={size === "short" ? "338px" : "365px"}
-              paddingTop="8px"
               background="transparent"
               address={parsePkh(currentRealValue)}
+              paddingX="16px"
+              paddingY={{ base: "2px", md: "8px" }}
+              size="xs"
             />
             {keepValid ? (
               <Icon as={ChevronDownIcon} marginRight="12px" data-testid="chevron-icon" />
             ) : (
-              <CrossButton marginRight="14px" />
+              <CrossButton marginRight="14px" onClick={clearInput} />
             )}
           </Center>
         </Box>

apps/web/src/components/AddressAutocomplete/Suggestions.tsx

@@ -26,18 +26,18 @@ export const Suggestions = ({
       maxHeight="300px"
       marginTop="8px"
       marginLeft={0}
-      background={color("300")}
+      background={color("white")}
       border="1px solid"
       borderColor={color("400")}
       borderRadius="8px"
+      transform={{ base: "translateY(calc(-100% - 66px))", lg: "unset" }}
       data-testid="suggestions-list"
       listStyleType="none"
     >
       {contacts.map((contact, i) => (
         <Box key={contact.pkh}>
           <ListItem
             marginBottom={i === contacts.length - 1 ? "5px" : 0}
-            padding="5px 15px 0 5px"
             data-testid={`suggestion-${contact.pkh}`}
             onMouseDown={() => {
               // onMouseDown is the only way for this to fire before the onBlur callback of the Input
@@ -46,15 +46,14 @@ export const Suggestions = ({
             }}
           >
             <AddressTile
-              height="40px"
-              padding="10px 8px 10px 5px"
-              background={color("300")}
-              borderRadius="4px"
+              background="none"
+              borderRadius="0"
               _hover={{
-                background: color("400"),
+                background: color("100"),
               }}
               cursor="pointer"
               address={parsePkh(contact.pkh)}
+              size="xs"
             />
           </ListItem>
         </Box>

apps/web/src/components/AddressTile/AddressTile.tsx

@@ -18,11 +18,16 @@ import { CopyAddressButton } from "../CopyAddressButton";
  * @param flexProps - Defines component style.
  * @param hideBalance - If true, balance will not be displayed.
  */
-export const AddressTile = ({ address, ...flexProps }: { address: Address } & FlexProps) => {
+export const AddressTile = ({
+  size = "sm",
+  address,
+  ...flexProps
+}: { address: Address; size?: "xs" | "sm" } & FlexProps) => {
   const addressKind = useAddressKind(address);
   const color = useColor();
 
   const balance = useGetAccountBalance()(address.pkh);
+  const isSmall = size === "xs";
 
   return (
     <Flex
@@ -35,19 +40,36 @@ export const AddressTile = ({ address, ...flexProps }: { address: Address } & Fl
       data-testid="address-tile"
       {...flexProps}
     >
-      <Flex gap="16px" width="full">
-        <AccountTileWrapper>
-          <AddressTileIcon addressKind={addressKind} size="sm" />
+      <Flex alignItems="center" gap="16px" width="full">
+        <AccountTileWrapper size={size}>
+          <AddressTileIcon addressKind={addressKind} size={size} />
         </AccountTileWrapper>
 
-        <Flex justifyContent="center" flexDirection="column" width="full">
-          <Heading size="md">{addressKind.label}</Heading>
+        <Flex
+          justifyContent={isSmall ? "space-between" : "center"}
+          flexDirection={{ base: "column", md: isSmall ? "row" : "column" }}
+          width="full"
+        >
+          <Flex
+            alignItems="center"
+            overflow="hidden"
+            width="150px"
+            marginRight="10px"
+            whiteSpace="nowrap"
+          >
+            <Heading overflow="hidden" textOverflow="ellipsis" size={isSmall ? "sm" : "md"}>
+              {addressKind.label}
+            </Heading>
+          </Flex>
 
-          <Flex justifyContent="space-between">
+          <Flex alignItems="center" justifyContent="space-between" width="full">
             <CopyAddressButton
               color={color("700")}
+              fontSize={isSmall ? "12px" : "14px"}
               address={address.pkh}
+              isCopyDisabled={isSmall}
               isLong={addressKind.type === "unknown"}
+              variant={isSmall ? "unstyled" : "ghost"}
             />
             <Text size="sm">{balance !== undefined && prettyTezAmount(balance)}</Text>
           </Flex>

apps/web/src/components/AddressTile/AddressTileIcon.tsx

@@ -23,18 +23,32 @@ export const AddressTileIcon = memo(
     const account = getAccount(addressKind.pkh);
     const color = useColor();
 
+    const sizes = {
+      xs: 20,
+      sm: 30,
+    };
+
     const baseIconProps = {
       borderRadius: "4px",
       color: color("500"),
     };
 
     if (account) {
-      return <AccountTileIcon account={account as ImplicitAccount} />;
+      return (
+        <AccountTileIcon
+          account={account as ImplicitAccount}
+          size={sizes[size as Exclude<AddressTileIconSize, "lg">]}
+        />
+      );
     }
 
     let sizeInPx;
     let padding;
     switch (size) {
+      case "xs":
+        sizeInPx = "20px";
+        padding = "4px";
+        break;
       case "sm":
         sizeInPx = "30px";
         padding = "5px";

apps/web/src/components/AddressTile/AddressTileIconSize.ts

@@ -1 +1 @@
-export type AddressTileIconSize = "sm" | "lg";
+export type AddressTileIconSize = "xs" | "sm" | "lg";

apps/web/src/components/CopyAddressButton/CopyAddressButton.tsx

@@ -7,23 +7,31 @@ import { useColor } from "../../styles/useColor";
 import { CopyButton } from "../CopyButton/CopyButton";
 
 export const CopyAddressButton = memo(
-  ({ address, isLong = false, ...props }: { address: RawPkh; isLong?: boolean } & ButtonProps) => {
+  ({
+    address,
+    fontSize = "14px",
+    isLong = false,
+    isCopyDisabled = false,
+    ...props
+  }: { address: RawPkh; isLong?: boolean; isCopyDisabled?: boolean } & ButtonProps) => {
     const color = useColor();
 
     return (
       <CopyButton
         left="-8px"
         height="auto"
         padding="4px 8px"
+        fontSize={fontSize}
         aria-label="Copy Address"
+        isCopyDisabled={isCopyDisabled}
         variant="ghost"
         {...props}
         value={address}
       >
-        <Text color={color("700")} size="sm">
+        <Text color={color("700")} fontSize="inherit">
           {isLong ? address : formatPkh(address)}
         </Text>
-        <FileCopyIcon color={color("400")} />
+        {isCopyDisabled || <FileCopyIcon color={color("400")} />}
       </CopyButton>
     );
   }

apps/web/src/components/CopyButton/CopyButton.test.tsx

@@ -12,4 +12,19 @@ describe("<CopyButton />", () => {
 
     expect(navigator.clipboard.writeText).toHaveBeenCalledWith("hello");
   });
+
+  it("disables copy logic when isCopyDisabled is true", async () => {
+    const user = userEvent.setup();
+    jest.spyOn(navigator.clipboard, "writeText");
+
+    render(
+      <CopyButton isCopyDisabled value="hello">
+        Copy
+      </CopyButton>
+    );
+
+    await act(() => user.click(screen.getByTestId("copy-button")));
+
+    expect(navigator.clipboard.writeText).not.toHaveBeenCalled();
+  });
 });

apps/web/src/components/CopyButton/CopyButton.tsx

@@ -16,20 +16,25 @@ import { useColor } from "../../styles/useColor";
 export const CopyButton = ({
   value,
   children,
+  isCopyDisabled = false,
   ...props
-}: PropsWithChildren<{ value: string } & ButtonProps>) => {
+}: PropsWithChildren<{ value: string; isCopyDisabled?: boolean } & ButtonProps>) => {
   const color = useColor();
 
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const onClick = (event: MouseEvent) => {
+    if (isCopyDisabled) {
+      return;
+    }
+
     event.stopPropagation();
     setTimeout(onClose, 1000);
     return navigator.clipboard.writeText(value);
   };
 
   return (
-    <Popover isOpen={isOpen} onClose={onClose} onOpen={onOpen}>
+    <Popover isOpen={isCopyDisabled ? false : isOpen} onClose={onClose} onOpen={onOpen}>
       <PopoverTrigger>
         <Button
           gap="4px"