views: improve approval dialogue rendering

apps/extension/src/routes/popup/approval/approve-deny.tsx

@@ -15,12 +15,25 @@ export const ApproveDeny = ({
   const count = useWindowCountdown(wait);
 
   return (
-    <div className='flex flex-row flex-wrap justify-center gap-4 bg-black p-4 shadow-lg'>
-      <Button variant='gradient' className='w-full' size='lg' onClick={approve} disabled={!!count}>
+    <div
+      className='flex flex-row justify-between gap-4 rounded-md p-4 shadow-md'
+      style={{
+        backgroundColor: '#1A1A1A',
+        paddingBottom: '28px',
+        paddingTop: '28px',
+      }}
+    >
+      <Button
+        variant='gradient'
+        className='w-1/2 py-3.5 text-base'
+        size='lg'
+        onClick={approve}
+        disabled={!!count}
+      >
         Approve {count !== 0 && `(${count})`}
       </Button>
       <Button
-        className='min-w-[50%] grow items-center gap-2 hover:bg-destructive/90'
+        className='w-1/2 py-3.5 text-base hover:bg-destructive/90'
         size='lg'
         variant='destructiveSecondary'
         onClick={deny}
@@ -29,8 +42,8 @@ export const ApproveDeny = ({
       </Button>
       {ignore && (
         <Button
-          className='w-1/3 hover:bg-destructive/90'
-          size='lg'
+          className='w-[32%] py-2.5 text-sm hover:bg-destructive/90'
+          size='md'
           variant='secondary'
           onClick={ignore}
         >

apps/extension/src/routes/popup/approval/transaction/index.tsx

@@ -47,11 +47,15 @@ export const TransactionApproval = () => {
 
   return (
     <div className='flex h-screen flex-col'>
-      <div className='grow overflow-auto p-[30px] pt-10'>
-        <p className='bg-text-linear bg-clip-text pb-2 font-headline text-2xl font-bold text-transparent'>
-          Confirm transaction
-        </p>
-
+      <div className='border-b border-gray-700 p-4'>
+        <h1
+          className=' bg-text-linear bg-clip-text pb-2 font-headline text-2xl font-bold text-transparent'
+          style={{ paddingBottom: '0px' }}
+        >
+          Confirm Transaction
+        </h1>
+      </div>
+      <div className='grow overflow-auto p-4'>
         <ViewTabs
           defaultValue={selectedTransactionViewName}
           onValueChange={setSelectedTransactionViewName}
@@ -60,13 +64,18 @@ export const TransactionApproval = () => {
         <TransactionViewComponent txv={selectedTransactionView} metadataFetcher={getMetadata} />
 
         {selectedTransactionViewName === TransactionViewTab.SENDER && (
-          <div className='mt-8'>
+          <div className='mt-4'>
             <JsonViewer jsonObj={authorizeRequest.toJson() as Jsonified<AuthorizeRequest>} />
           </div>
         )}
       </div>
 
-      <ApproveDeny approve={approve} deny={deny} wait={3} />
+      <div
+        className='border-t border-gray-700 p-4'
+        style={{ paddingBottom: '0px', paddingTop: '0px', paddingRight: '0px', paddingLeft: '0px' }}
+      >
+        <ApproveDeny approve={approve} deny={deny} wait={3} />
+      </div>
     </div>
   );
 };

apps/extension/src/routes/popup/approval/transaction/view-tabs.tsx

@@ -20,7 +20,7 @@ export const ViewTabs = ({
       onValueChange={value => onValueChange(value as TransactionViewTab)}
     >
       <TabsList
-        className={cn('mx-auto mb-8 grid w-[100%] gap-4', {
+        className={cn('mx-auto mb-12 grid w-[100%] gap-4', {
           'grid-cols-2': !showReceiverTransactionView,
           'grid-cols-3': showReceiverTransactionView,
         })}

apps/extension/src/routes/popup/home/index.tsx

@@ -50,16 +50,16 @@ export const PopupIndex = () => {
     <>
       <BlockSync />
 
-      <div className='flex h-full grow flex-col items-stretch gap-[30px] bg-logo bg-left-bottom px-[30px] pb-[30px]'>
+      <div className='flex h-full grow flex-col items-stretch gap-[15px] bg-logo bg-left-bottom px-[15px] pb-[15px]'>
         <IndexHeader />
 
-        <div className='flex flex-col gap-8'>
+        <div className='flex flex-col gap-4'>
           {activeWallet && <SelectAccount getAddrByIndex={getAddrByIndex(activeWallet)} />}
         </div>
 
         <ValidateAddress />
 
-        <div className='grow' />
+        <div className='shrink-0 grow' />
 
         <FrontendLink />
       </div>

packages/ui/components/ui/tabs/index.tsx

@@ -16,6 +16,7 @@ const TabsList = React.forwardRef<
       'inline-flex h-[52px] items-center justify-center rounded-lg bg-background px-2',
       className,
     )}
+    style={{ marginBottom: '16px' }}
     {...props}
   />
 ));

packages/ui/components/ui/tx/actions-views/output.tsx

@@ -14,9 +14,12 @@ export const OutputViewComponent = ({ value }: { value: OutputView }) => {
       <ViewBox
         label='Output'
         visibleContent={
-          <ValueWithAddress addressView={address} label='to'>
+          <div className='flex items-center justify-between gap-3'>
             <ValueViewComponent view={note.value} />
-          </ValueWithAddress>
+            <ValueWithAddress addressView={address} label='to'>
+              <></>
+            </ValueWithAddress>
+          </div>
         }
       />
     );

packages/ui/components/ui/tx/actions-views/spend.tsx

@@ -1,9 +1,9 @@
 import { SpendView } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
 import { ViewBox } from '../viewbox';
-import { ValueViewComponent } from '../../value';
 import { ValueWithAddress } from './value-with-address';
 import { getNote } from '@penumbra-zone/getters/spend-view';
 import { getAddress } from '@penumbra-zone/getters/note-view';
+import { ValueViewComponent } from '../../value';
 
 export const SpendViewComponent = ({ value }: { value: SpendView }) => {
   if (value.spendView.case === 'visible') {
@@ -14,9 +14,12 @@ export const SpendViewComponent = ({ value }: { value: SpendView }) => {
       <ViewBox
         label='Spend'
         visibleContent={
-          <ValueWithAddress addressView={address} label='from'>
+          <div className='flex items-center justify-between gap-3'>
             <ValueViewComponent view={note.value} />
-          </ValueWithAddress>
+            <ValueWithAddress addressView={address} label='from'>
+              <></>
+            </ValueWithAddress>
+          </div>
         }
       />
     );

packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx

@@ -1,5 +1,4 @@
 import { ValueViewComponent } from '../../../value';
-import { ArrowRight } from 'lucide-react';
 import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 import { getAmount } from '@penumbra-zone/getters/value-view';
 
@@ -13,12 +12,38 @@
   const outputAmount = getAmount.optional(output);
 
   return (
-    <div className='flex items-center gap-2'>
+    <div className='flex items-center justify-between'>
       <ValueViewComponent view={input} />
-
-      <ArrowRight />
-
-      <ValueViewComponent view={output} showValue={!!outputAmount} />
+      <div className='relative mx-2 flex items-center justify-center'>
+        <div className='flex items-center justify-center w-16 h-6 rounded-full bg-gray-800 border border-gray-500'>
+          <div
+            className='flex items-center justify-center'
+            style={{
+              position: 'relative',
+            }}
+          >
+            <div
+              className='flex items-center'
+              style={{
+                width: '14px',
+                height: '2px',
+                backgroundColor: 'white',
+              }}
+            />
+            <div
+              className='w-0 h-0 ml-[2px]'
+              style={{
+                borderTop: '4px solid transparent',
+                borderBottom: '4px solid transparent',
+                borderLeft: '6px solid white',
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <div className='flex items-center justify-end'>
+        <ValueViewComponent view={output} showValue={!!outputAmount} />
+      </div>
     </div>
   );
 };

packages/ui/components/ui/tx/index.tsx

@@ -64,14 +64,14 @@ export const TransactionViewComponent = ({
   const { feeValueView, isLoading, error } = useFeeMetadata(txv, metadataFetcher);
 
   return (
-    <div className='flex flex-col gap-8'>
+    <div className='flex flex-col gap-4'>
       {txv.bodyView?.memoView?.memoView && <MemoViewComponent memo={txv.bodyView.memoView} />}
-      <ViewSection heading='Actions'>
+      <ViewSection heading={<div style={{ paddingLeft: '3px' }}>Actions</div>}>
         {txv.bodyView?.actionViews.map((av, i) => (
           <ActionViewComponent av={av} feeValueView={feeValueView} key={i} />
         ))}
       </ViewSection>
-      <ViewSection heading='Parameters'>
+      <ViewSection heading={<div style={{ paddingLeft: '3px' }}>Parameters</div>}>
         <ViewBox
           label='Transaction Fee'
           visibleContent={

packages/ui/components/ui/tx/memo-view.tsx

@@ -10,13 +10,13 @@ export const MemoViewComponent = ({ memo: { memoView } }: { memo: MemoView }) =>
         <ViewBox
           label='Memo'
           visibleContent={
-            <div className='flex flex-col gap-4'>
+            <div className='flex flex-col gap-2'>
               <ActionDetails>
                 <ActionDetails.Row label='Return Address'>
                   <AddressViewComponent view={memoView.value.plaintext!.returnAddress} />
                 </ActionDetails.Row>
                 <ActionDetails.Row label='Memo Text'>
-                  <span className='italic' style={{ wordBreak: 'normal' }}>
+                  <span className='text-sm italic' style={{ wordBreak: 'normal' }}>
                     {memoView.value.plaintext?.text}
                   </span>
                 </ActionDetails.Row>

packages/ui/components/ui/tx/viewbox.tsx

@@ -11,44 +11,43 @@ export interface ViewBoxProps {
   isOpaque?: boolean;
 }
 
-const Label = ({ label }: { label: string }) => <span className='text-lg'>{label}</span>;
+const Label = ({ label }: { label: string }) => (
+  <span className='text-lg font-bold text-gray-300'>{label}</span>
+);
 
 export const ViewBox = ({ label, visibleContent, isOpaque }: ViewBoxProps) => {
   // if isOpaque is undefined, set it to !visibleContent
-  isOpaque = isOpaque ?? !visibleContent;
+  isOpaque = isOpaque ?? !visibleContent?.props;
+
   return (
     <Box overflow='hidden'>
-      <div
-        className={cn(
-          'flex flex-col gap-1 break-all overflow-hidden',
-          isOpaque ? 'cursor-not-allowed' : '',
-        )}
-      >
-        <div className='flex items-center gap-2 self-start'>
-          <span className={cn('text-base font-bold', isOpaque ? 'text-gray-600' : '')}>
-            {!isOpaque && <Label label={label} />}
-            {isOpaque && (
-              <div className='flex gap-2'>
+      <div className={cn('flex flex-col gap-2', isOpaque ? 'cursor-not-allowed' : '')}>
+        <div className='flex items-center gap-2'>
+          <span className={cn('text-base', isOpaque ? 'text-gray-600' : '')}>
+            {isOpaque ? (
+              <div className='flex items-center gap-2'>
                 <IncognitoIcon fill='#4b5563' />
                 <Label label={label} />
               </div>
+            ) : (
+              <Label label={label} />
             )}
           </span>
         </div>
-        {visibleContent}
+        {visibleContent && <div className='border-t border-gray-700 pt-2'>{visibleContent}</div>}
       </div>
     </Box>
   );
 };
 
 export interface ViewSectionProps {
-  heading: string;
+  heading: React.ReactNode;
   children?: React.ReactNode;
 }
 
 export const ViewSection = ({ heading, children }: ViewSectionProps) => {
   return (
-    <div className='grid gap-4'>
+    <div className='grid gap-2'>
       <div className='text-xl font-bold'>{heading}</div>
       {children}
     </div>

packages/ui/components/ui/value/value.tsx

@@ -38,7 +38,9 @@
         </span>
       )}
       {showDenom && (
-        <span className='truncate font-mono text-xs text-muted-foreground'>{symbol}</span>
+        <span className='truncate font-mono text-xs text-muted-foreground max-w-[80px]'>
+          {symbol}
+        </span>
       )}
     </div>
   </Pill>