From 185728aec7c2f2fd6fea0a4135ac13bba712fc43 Mon Sep 17 00:00:00 2001
From: Max Korsunov <maxkors2014@gmail.com>
Date: Thu, 31 Oct 2024 19:31:05 +0400
Subject: [PATCH] fix(ui): fix styles for subaccount selector (#1886)

* fix(ui): fix styles for subaccount selector

* chore: changeset
---
 .changeset/quiet-cars-add.md                   |  5 +++++
 packages/ui/src/AddressViewComponent/index.tsx | 17 ++++++++++++-----
 packages/ui/src/Button/index.tsx               |  5 +++--
 packages/ui/src/DropdownMenu/Item.tsx          |  7 +++++--
 packages/ui/src/utils/menuItem.ts              |  2 +-
 5 files changed, 26 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/quiet-cars-add.md

diff --git a/.changeset/quiet-cars-add.md b/.changeset/quiet-cars-add.md
new file mode 100644
index 0000000000..6b4f5924fa
--- /dev/null
+++ b/.changeset/quiet-cars-add.md
@@ -0,0 +1,5 @@
+---
+'@penumbra-zone/ui': patch
+---
+
+Fix and improve UI components to prepare them for sub-account selector
diff --git a/packages/ui/src/AddressViewComponent/index.tsx b/packages/ui/src/AddressViewComponent/index.tsx
index 687efe1391..fdaac2654d 100644
--- a/packages/ui/src/AddressViewComponent/index.tsx
+++ b/packages/ui/src/AddressViewComponent/index.tsx
@@ -16,11 +16,16 @@ const Root = styled.div`
 export interface AddressViewProps {
   addressView: AddressView | undefined;
   copyable?: boolean;
+  hideIcon?: boolean;
 }
 
 // Renders an address or an address view.
 // If the view is given and is "visible", the account information will be displayed instead.
-export const AddressViewComponent = ({ addressView, copyable = true }: AddressViewProps) => {
+export const AddressViewComponent = ({
+  addressView,
+  copyable = true,
+  hideIcon,
+}: AddressViewProps) => {
   if (!addressView?.addressView.value?.address) {
     return null;
   }
@@ -34,14 +39,16 @@ export const AddressViewComponent = ({ addressView, copyable = true }: AddressVi
 
   return (
     <Root>
-      <Shrink0>
-        <AddressIcon address={addressView.addressView.value.address} size={24} />
-      </Shrink0>
+      {!hideIcon && (
+        <Shrink0>
+          <AddressIcon address={addressView.addressView.value.address} size={24} />
+        </Shrink0>
+      )}
 
       {addressIndex ? (
         <Text strong truncate>
           {isRandomized && 'IBC Deposit Address for '}
-          {`Account #${addressIndex.account}`}
+          {`Sub-Account #${addressIndex.account}`}
         </Text>
       ) : (
         <Text technical truncate>
diff --git a/packages/ui/src/Button/index.tsx b/packages/ui/src/Button/index.tsx
index 7839fa9b88..70a7626307 100644
--- a/packages/ui/src/Button/index.tsx
+++ b/packages/ui/src/Button/index.tsx
@@ -19,10 +19,11 @@ const iconOnlyAdornment = css<StyledButtonProps>`
 
 const sparse = css<StyledButtonProps>`
   border-radius: ${props => props.theme.borderRadius.sm};
-  padding-left: ${props => props.theme.spacing(4)};
-  padding-right: ${props => props.theme.spacing(4)};
+  padding-left: ${props => (props.$iconOnly ? 'none' : props.theme.spacing(4))};
+  padding-right: ${props => (props.$iconOnly ? 'none' : props.theme.spacing(4))};
   height: 48px;
   width: ${props => (props.$iconOnly ? '48px' : '100%')};
+  ${props => props.$iconOnly && 'min-width: 48px;'}
 `;
 
 const compact = css<StyledButtonProps>`
diff --git a/packages/ui/src/DropdownMenu/Item.tsx b/packages/ui/src/DropdownMenu/Item.tsx
index c11385b1fa..78aeec15a9 100644
--- a/packages/ui/src/DropdownMenu/Item.tsx
+++ b/packages/ui/src/DropdownMenu/Item.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Item as RadixDropdownMenuItem } from '@radix-ui/react-dropdown-menu';
 import { asTransientProps } from '../utils/asTransientProps.ts';
 import { Text } from '../Text';
@@ -7,17 +7,20 @@ import { DropdownMenuItemBase, MenuItem } from '../utils/menuItem.ts';
 export interface DropdownMenuItemProps extends DropdownMenuItemBase {
   children?: ReactNode;
   onSelect?: (event: Event) => void;
+  icon?: ReactNode;
 }
 
 export const Item = ({
   children,
+  icon,
   actionType = 'default',
   disabled,
   onSelect,
 }: DropdownMenuItemProps) => {
   return (
     <RadixDropdownMenuItem disabled={disabled} asChild onSelect={onSelect}>
-      <MenuItem {...asTransientProps({ actionType, disabled })}>
+      <MenuItem data-icon={!!icon} {...asTransientProps({ actionType, disabled })}>
+        {icon}
         <Text small>{children}</Text>
       </MenuItem>
     </RadixDropdownMenuItem>
diff --git a/packages/ui/src/utils/menuItem.ts b/packages/ui/src/utils/menuItem.ts
index 26458713bf..349802ae58 100644
--- a/packages/ui/src/utils/menuItem.ts
+++ b/packages/ui/src/utils/menuItem.ts
@@ -38,7 +38,7 @@ export const MenuItem = styled.div<StyledItemProps>`
   }
 
   &[aria-checked='false'],
-  &[role='menuitem'] {
+  &[role='menuitem'][data-icon='false'] {
     padding-left: ${props => props.theme.spacing(9)};
   }