From a450d91294578d052c90309087c3bc725ea43f0a Mon Sep 17 00:00:00 2001
From: Tal Derei <talderei99@gmail.com>
Date: Mon, 25 Nov 2024 13:41:24 -0800
Subject: [PATCH] address feedback

---
 .../popup/approval/transaction/index.tsx      | 10 ++-----
 .../popup/approval/transaction/view-tabs.tsx  |  2 +-
 packages/ui/components/ui/tabs/index.tsx      |  3 +--
 .../ui/tx/actions-views/action-details.tsx    |  2 +-
 .../ui/tx/actions-views/swap/index.tsx        |  2 +-
 .../ui/tx/actions-views/swap/one-way-swap.tsx | 27 ++-----------------
 .../tx/actions-views/value-with-address.tsx   |  6 ++---
 packages/ui/components/ui/tx/index.tsx        |  4 +--
 packages/ui/components/ui/value/value.tsx     |  2 +-
 9 files changed, 14 insertions(+), 44 deletions(-)

diff --git a/apps/extension/src/routes/popup/approval/transaction/index.tsx b/apps/extension/src/routes/popup/approval/transaction/index.tsx
index 1352dc90..e7b3586c 100644
--- a/apps/extension/src/routes/popup/approval/transaction/index.tsx
+++ b/apps/extension/src/routes/popup/approval/transaction/index.tsx
@@ -48,10 +48,7 @@ export const TransactionApproval = () => {
   return (
     <div className='flex h-screen flex-col'>
       <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' }}
-        >
+        <h1 className=' bg-text-linear bg-clip-text pb-0 font-headline text-2xl font-bold text-transparent'>
           Confirm Transaction
         </h1>
       </div>
@@ -70,10 +67,7 @@ export const TransactionApproval = () => {
         )}
       </div>
 
-      <div
-        className='border-t border-gray-700 p-4'
-        style={{ paddingBottom: '0px', paddingTop: '0px', paddingRight: '0px', paddingLeft: '0px' }}
-      >
+      <div className='border-t border-gray-700 p-0'>
         <ApproveDeny approve={approve} deny={deny} wait={3} />
       </div>
     </div>
diff --git a/apps/extension/src/routes/popup/approval/transaction/view-tabs.tsx b/apps/extension/src/routes/popup/approval/transaction/view-tabs.tsx
index 9baf7941..b0bdfbac 100644
--- a/apps/extension/src/routes/popup/approval/transaction/view-tabs.tsx
+++ b/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-12 grid w-[100%] gap-4', {
+        className={cn('mx-auto mb-8 grid w-[100%] gap-4', {
           'grid-cols-2': !showReceiverTransactionView,
           'grid-cols-3': showReceiverTransactionView,
         })}
diff --git a/packages/ui/components/ui/tabs/index.tsx b/packages/ui/components/ui/tabs/index.tsx
index cc9edb94..6e581085 100644
--- a/packages/ui/components/ui/tabs/index.tsx
+++ b/packages/ui/components/ui/tabs/index.tsx
@@ -13,10 +13,9 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-[52px] items-center justify-center rounded-lg bg-background px-2',
+      'inline-flex h-[52px] items-center justify-center rounded-lg bg-background px-2 mb-4',
       className,
     )}
-    style={{ marginBottom: '16px' }}
     {...props}
   />
 ));
diff --git a/packages/ui/components/ui/tx/actions-views/action-details.tsx b/packages/ui/components/ui/tx/actions-views/action-details.tsx
index 97ffcf99..2779ea4f 100644
--- a/packages/ui/components/ui/tx/actions-views/action-details.tsx
+++ b/packages/ui/components/ui/tx/actions-views/action-details.tsx
@@ -74,7 +74,7 @@ const ActionDetailsRow = ({
           <span>{label}</span>
         </span>
       ) : (
-        <span className='whitespace-nowrap break-keep'>{label}</span>
+        <span className='whitespace-nowrap break-keep text-base'>{label}</span>
       )}
 
       <Separator />
diff --git a/packages/ui/components/ui/tx/actions-views/swap/index.tsx b/packages/ui/components/ui/tx/actions-views/swap/index.tsx
index aab630b1..c6ab05ae 100644
--- a/packages/ui/components/ui/tx/actions-views/swap/index.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/index.tsx
@@ -53,7 +53,7 @@ export const SwapViewComponent = ({
               )}
 
               <ActionDetails.Row label='Swap Claim Fee'>
-                <div className='font-mono'>
+                <div className='text-base'>
                   <ValueViewComponent view={prepaidClaimFee} />
                 </div>
               </ActionDetails.Row>
diff --git a/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx b/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
index 1ac82f5e..7f50403a 100644
--- a/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
@@ -15,31 +15,8 @@ export const OneWaySwap = ({ input, output }: { input: ValueView; output: ValueV
     <div className='flex items-center justify-between'>
       <ValueViewComponent view={input} />
       <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 className='flex h-0.5 w-3.5 items-center bg-white' />
+        <div className='ml-[2px] size-0 border-y-4 border-l-[6px] border-y-transparent border-l-white' />
       </div>
       <div className='flex items-center justify-end'>
         <ValueViewComponent view={output} showValue={!!outputAmount} />
diff --git a/packages/ui/components/ui/tx/actions-views/value-with-address.tsx b/packages/ui/components/ui/tx/actions-views/value-with-address.tsx
index d0611d48..8699f67a 100644
--- a/packages/ui/components/ui/tx/actions-views/value-with-address.tsx
+++ b/packages/ui/components/ui/tx/actions-views/value-with-address.tsx
@@ -11,7 +11,6 @@ export const ValueWithAddress = ({
   label,
   addressView,
 }: {
-  /** What to display before the address. Typically a `ValueViewComponent`. */
   children: ReactNode;
   label: 'from' | 'to';
   addressView?: AddressView;
@@ -22,8 +21,9 @@ export const ValueWithAddress = ({
     {addressView && (
       <div className='flex items-center gap-2 overflow-hidden'>
         <span className='whitespace-nowrap font-mono text-sm italic text-foreground'>{label}</span>
-
-        <AddressViewComponent view={addressView} />
+        <div className='max-w-[150px] truncate'>
+          <AddressViewComponent view={addressView} />
+        </div>
       </div>
     )}
   </div>
diff --git a/packages/ui/components/ui/tx/index.tsx b/packages/ui/components/ui/tx/index.tsx
index e0c566bf..fb737dae 100644
--- a/packages/ui/components/ui/tx/index.tsx
+++ b/packages/ui/components/ui/tx/index.tsx
@@ -66,12 +66,12 @@ export const TransactionViewComponent = ({
   return (
     <div className='flex flex-col gap-4'>
       {txv.bodyView?.memoView?.memoView && <MemoViewComponent memo={txv.bodyView.memoView} />}
-      <ViewSection heading={<div style={{ paddingLeft: '3px' }}>Actions</div>}>
+      <ViewSection heading={<div className='pl-[3px]'>Actions</div>}>
         {txv.bodyView?.actionViews.map((av, i) => (
           <ActionViewComponent av={av} feeValueView={feeValueView} key={i} />
         ))}
       </ViewSection>
-      <ViewSection heading={<div style={{ paddingLeft: '3px' }}>Parameters</div>}>
+      <ViewSection heading={<div className='pl-[3px]'>Parameters</div>}>
         <ViewBox
           label='Transaction Fee'
           visibleContent={
diff --git a/packages/ui/components/ui/value/value.tsx b/packages/ui/components/ui/value/value.tsx
index 040462f4..f523cd9c 100644
--- a/packages/ui/components/ui/value/value.tsx
+++ b/packages/ui/components/ui/value/value.tsx
@@ -38,7 +38,7 @@ export const ValueComponent = ({
         </span>
       )}
       {showDenom && (
-        <span className='truncate font-mono text-xs text-muted-foreground max-w-[80px]'>
+        <span className='max-w-[80px] truncate font-mono text-xs text-muted-foreground'>
           {symbol}
         </span>
       )}