fix: show transaction amount above Increase Fee, closes #5826

leather-io · Sep 4, 2024 · 0a61651 · 0a61651
1 parent 4897030
commit 0a61651
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/src/app/components/stacks-transaction-item/increase-fee-button.tsx b/src/app/components/stacks-transaction-item/increase-fee-button.tsx
@@ -15,8 +15,6 @@ export function IncreaseFeeButton(props: IncreaseFeeButtonProps) {
     <styled.button
       _hover={{ color: 'ink.text-subdued' }}
       bg="ink.background-primary"
-      maxWidth="110px"
-      ml="auto"
       onClick={e => {
         onIncreaseFee();
         e.stopPropagation();
@@ -25,7 +23,6 @@ export function IncreaseFeeButton(props: IncreaseFeeButtonProps) {
       pointerEvents={!isActive ? 'none' : 'all'}
       position="relative"
       px="space.02"
-      py="space.01"
       rounded="xs"
       zIndex={999}
     >

diff --git a/src/app/components/transaction-item/transaction-item.layout.tsx b/src/app/components/transaction-item/transaction-item.layout.tsx
@@ -15,6 +15,14 @@ interface TransactionItemLayoutProps {
   children?: ReactNode;
 }
 
+function TxValue({ txValue }: { txValue: ReactNode }) {
+  return (
+    <styled.span textStyle="label.02" px="space.02">
+      {txValue}
+    </styled.span>
+  );
+}
+
 export function TransactionItemLayout({
   openTxLink,
   rightElement,
@@ -25,7 +33,7 @@ export function TransactionItemLayout({
   txValue,
 }: TransactionItemLayoutProps) {
   return (
-    <Pressable onClick={openTxLink} p="space.03">
+    <Pressable onClick={openTxLink} my="space.02">
       <ItemLayout
         flagImg={txIcon && txIcon}
         titleLeft={txTitle}
@@ -41,9 +49,8 @@ export function TransactionItemLayout({
             {txStatus && txStatus}
           </HStack>
         }
-        titleRight={
-          rightElement ? rightElement : <styled.span textStyle="label.02">{txValue}</styled.span>
-        }
+        titleRight={<TxValue txValue={txValue} />}
+        captionRight={rightElement}
       />
     </Pressable>
   );

diff --git a/...res/activity-list/components/pending-transaction-list/pending-transaction-list.layout.tsx b/...res/activity-list/components/pending-transaction-list/pending-transaction-list.layout.tsx
@@ -11,7 +11,9 @@ export function PendingTransactionListLayout({ children }: PendingTransactionLis
       <styled.span color="ink.text-subdued" textStyle="body.02">
         Pending
       </styled.span>
-      <Stack pb="space.06">{children}</Stack>
+      <Stack pb="space.06" mt="space.04">
+        {children}
+      </Stack>
     </>
   );
 }