Tweak icon size/spacing

penumbra-zone · Jul 23, 2024 · 6e323cf · 6e323cf
1 parent fbf4b88
commit 6e323cf
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 36 deletions.
diff --git a/packages/ui/src/ValueViewComponent/AssetIcon/DelegationTokenIcon.tsx b/packages/ui/src/ValueViewComponent/AssetIcon/DelegationTokenIcon.tsx
@@ -6,10 +6,10 @@ const Svg = styled.svg.attrs({
   xmlns: 'http://www.w3.org/2000/svg',
   xmlnsXlink: 'http://www.w3.org/1999/xlink',
   viewBox: '0 0 32 32',
-})<{ $size: 'dense' | 'sparse' }>`
+})`
   border-radius: ${props => props.theme.borderRadius.full};
-  width: ${props => (props.$size === 'sparse' ? 24 : 16)}px;
-  height: ${props => (props.$size === 'sparse' ? 24 : 16)}px;
+  width: 24px;
+  height: 24px;
 `;
 
 const getFirstEightCharactersOfValidatorId = (displayDenom = ''): [string, string] => {
@@ -23,14 +23,13 @@ const getFirstEightCharactersOfValidatorId = (displayDenom = ''): [string, strin
 
 export interface DelegationTokenIconProps {
   displayDenom?: string;
-  size: 'dense' | 'sparse';
 }
 
-export const DelegationTokenIcon = ({ displayDenom, size }: DelegationTokenIconProps) => {
+export const DelegationTokenIcon = ({ displayDenom }: DelegationTokenIconProps) => {
   const [firstFour, lastFour] = getFirstEightCharactersOfValidatorId(displayDenom);
 
   return (
-    <Svg $size={size}>
+    <Svg>
       <defs>
         <radialGradient
           id='logoGradient'

diff --git a/packages/ui/src/ValueViewComponent/AssetIcon/UnbondingTokenIcon.tsx b/packages/ui/src/ValueViewComponent/AssetIcon/UnbondingTokenIcon.tsx
@@ -6,10 +6,10 @@ const Svg = styled.svg.attrs({
   xmlns: 'http://www.w3.org/2000/svg',
   xmlnsXlink: 'http://www.w3.org/1999/xlink',
   viewBox: '0 0 32 32',
-})<{ $size: 'dense' | 'sparse' }>`
+})`
   border-radius: ${props => props.theme.borderRadius.full};
-  width: ${props => (props.$size === 'sparse' ? 24 : 16)}px;
-  height: ${props => (props.$size === 'sparse' ? 24 : 16)}px;
+  width: 24px;
+  height: 24px;
 `;
 
 const getFirstEightCharactersOfValidatorId = (displayDenom = ''): [string, string] => {
@@ -23,14 +23,13 @@ const getFirstEightCharactersOfValidatorId = (displayDenom = ''): [string, strin
 
 export interface UnbondingTokenIconProps {
   displayDenom?: string;
-  size: 'dense' | 'sparse';
 }
 
-export const UnbondingTokenIcon = ({ displayDenom, size }: UnbondingTokenIconProps) => {
+export const UnbondingTokenIcon = ({ displayDenom }: UnbondingTokenIconProps) => {
   const [firstFour, lastFour] = getFirstEightCharactersOfValidatorId(displayDenom);
 
   return (
-    <Svg $size={size}>
+    <Svg>
       <defs>
         <radialGradient
           id='logoGradient'

diff --git a/packages/ui/src/ValueViewComponent/AssetIcon/index.tsx b/packages/ui/src/ValueViewComponent/AssetIcon/index.tsx
@@ -6,18 +6,18 @@ import { assetPatterns } from '@penumbra-zone/types/assets';
 import { UnbondingTokenIcon } from './UnbondingTokenIcon';
 import styled from 'styled-components';
 
-const IconImg = styled.img<{ $size: 'sparse' | 'dense' }>`
+const IconImg = styled.img`
   border-radius: ${props => props.theme.borderRadius.full};
-  width: ${props => (props.$size === 'sparse' ? 24 : 16)}px;
-  height: ${props => (props.$size === 'sparse' ? 24 : 16)}px;
+  width: 24px;
+  height: 24px;
 `;
 
 export interface AssetIcon {
   metadata?: Metadata;
   size?: 'sparse' | 'dense';
 }
 
-export const AssetIcon = ({ metadata, size = 'sparse' }: AssetIcon) => {
+export const AssetIcon = ({ metadata }: AssetIcon) => {
   // Image default is "" and thus cannot do nullish-coalescing
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
   const icon = metadata?.images[0]?.png || metadata?.images[0]?.svg;
@@ -28,22 +28,18 @@ export const AssetIcon = ({ metadata, size = 'sparse' }: AssetIcon) => {
   return (
     <>
       {icon ? (
-        <IconImg $size={size} src={icon} alt='Asset icon' />
+        <IconImg src={icon} alt='Asset icon' />
       ) : isDelegationToken ? (
-        <DelegationTokenIcon size={size} displayDenom={display} />
+        <DelegationTokenIcon displayDenom={display} />
       ) : isUnbondingToken ? (
         /**
          * @todo: Render a custom unbonding token for validators that have a
          * logo -- e.g., with the validator ID superimposed over the validator
          * logo.
          */
-        <UnbondingTokenIcon size={size} displayDenom={display} />
+        <UnbondingTokenIcon displayDenom={display} />
       ) : (
-        <Identicon
-          uniqueIdentifier={metadata?.symbol ?? '?'}
-          size={size === 'sparse' ? 24 : 16}
-          type='solid'
-        />
+        <Identicon uniqueIdentifier={metadata?.symbol ?? '?'} size={24} type='solid' />
       )}
     </>
   );

diff --git a/packages/ui/src/ValueViewComponent/index.tsx b/packages/ui/src/ValueViewComponent/index.tsx
@@ -7,21 +7,26 @@ import { AssetIcon } from './AssetIcon';
 import { getMetadata } from '@penumbra-zone/getters/value-view';
 import { getFormattedAmtFromValueView } from '@penumbra-zone/types/value-view';
 
-const Row = styled.span<{ $context: 'default' | 'table'; $priority: 'primary' | 'secondary' }>`
+type Context = 'default' | 'table';
+
+const Row = styled.span<{ $context: Context; $priority: 'primary' | 'secondary' }>`
   display: flex;
   gap: ${props => props.theme.spacing(2)};
   align-items: center;
   width: min-content;
 
   ${props =>
     props.$context === 'table' && props.$priority === 'secondary'
-      ? `border-bottom: 2px dashed ${props.theme.color.other.tonalStroke}`
+      ? `
+        border-bottom: 2px dashed ${props.theme.color.other.tonalStroke};
+        padding-bottom: ${props.theme.spacing(2)};
+      `
       : ''};
 `;
 
 const PillMarginOffsets = styled.div<{ $size: 'dense' | 'sparse' }>`
-  margin-left: ${props => (props.$size === 'sparse' ? props.theme.spacing(-2) : '0')};
-  margin-right: ${props => props.theme.spacing(props.$size === 'sparse' ? -1 : 1)};
+  margin-left: ${props => props.theme.spacing(props.$size === 'sparse' ? -2 : -1)};
+  margin-right: ${props => props.theme.spacing(props.$size === 'sparse' ? -1 : 0)};
 `;
 
 const Content = styled.div`
@@ -33,15 +38,19 @@ const Content = styled.div`
   align-items: center;
 `;
 
-export interface ValueViewComponentProps {
+export interface ValueViewComponentProps<SelectedContext extends Context> {
   valueView: ValueView;
   /**
    * A `ValueViewComponent` will be rendered differently depending on which
    * context it's rendered in. By default, it'll be rendered in a pill. But in a
    * table context, it'll be rendered as just an icon and text.
    */
-  context?: 'default' | 'table';
-  size?: 'dense' | 'sparse';
+  context?: SelectedContext;
+  /**
+   * Can only be set when the `context` is `default`. For the `table` context,
+   * there is only one size (`sparse`).
+   */
+  size?: SelectedContext extends 'table' ? 'sparse' : 'dense' | 'sparse';
   /**
    * Use `primary` in most cases, or `secondary` when this value view
    * represents a secondary value, such as when it's an equivalent value of a
@@ -54,12 +63,12 @@ export interface ValueViewComponentProps {
  * `ValueViewComponent` renders a `ValueView` — its amount, icon, and symbol.
  * Use this anywhere you would like to render a `ValueView`.
  */
-export const ValueViewComponent = ({
+export const ValueViewComponent = <SelectedContext extends Context = 'default'>({
   valueView,
-  context = 'default',
+  context,
   size = 'sparse',
   priority = 'primary',
-}: ValueViewComponentProps) => {
+}: ValueViewComponentProps<SelectedContext>) => {
   const formattedAmount = getFormattedAmtFromValueView(valueView, true);
   const metadata = getMetadata.optional()(valueView);
   // Symbol default is "" and thus cannot do nullish coalescing
@@ -68,14 +77,14 @@ export const ValueViewComponent = ({
 
   return (
     <ConditionalWrap
-      if={context === 'default'}
+      if={!context || context === 'default'}
       then={children => (
         <Pill size={size} priority={priority}>
           <PillMarginOffsets $size={size}>{children}</PillMarginOffsets>
         </Pill>
       )}
     >
-      <Row $context={context} $priority={priority}>
+      <Row $context={context ?? 'default'} $priority={priority}>
         <AssetIcon metadata={metadata} size={size} />
 
         <Content>