fix(ui): fix styles for subaccount selector (#1886)

* fix(ui): fix styles for subaccount selector * chore: changeset
penumbra-zone · Oct 31, 2024 · 185728a · 185728a
1 parent 2bb4c33
commit 185728a
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 10 deletions.
diff --git a/.changeset/quiet-cars-add.md 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
@@ -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
@@ -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
@@ -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
@@ -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)};
   }