fix: bridge polishing

packages/app-portal/src/systems/Bridge/components/BridgeSteps/BridgeSteps.tsx

@@ -1,10 +1,10 @@
-import { Box, Flex, Spinner, Text, VStack } from '@fuels/ui';
+import { Box, Flex, HStack, Spinner, Text, VStack } from '@fuels/ui';
 import { IconCheck } from '@tabler/icons-react';
 import type { ReactNode } from 'react';
 import { tv } from 'tailwind-variants';
 
 type Step = {
-  name: ReactNode;
+  name: string;
   status: ReactNode;
   isLoading?: boolean;
   isDone?: boolean;
@@ -23,7 +23,7 @@ export const BridgeSteps = ({ steps }: BridgeStepsProps) => {
       {steps?.map((step, index) => {
         return (
           <Flex
-            key={`${index}_${step.name?.toString()}`}
+            key={step.name}
             className={classes.item()}
             data-done={step.isDone}
             data-selected={step.isSelected}
@@ -32,22 +32,22 @@ export const BridgeSteps = ({ steps }: BridgeStepsProps) => {
             <Flex className={classes.action()}>
               <Box className={classes.circle()}>
                 {step.isDone ? (
-                  <IconCheck size={12} className={classes.icon()} />
+                  <IconCheck size={10} className={classes.icon()} />
                 ) : (
                   <Text className={classes.number()}>{index + 1}</Text>
                 )}
               </Box>
               <Text className={classes.name()}>{step.name}</Text>
             </Flex>
-            <Flex align="center">
+            <HStack align="center" gap="1">
               {step.isLoading && <Spinner size={14} />}
               <Text
                 aria-label={`Step ${step.name?.toString()}: ${step.status}`}
                 className={classes.status()}
               >
                 {step.status}
               </Text>
-            </Flex>
+            </HStack>
           </Flex>
         );
       })}
@@ -57,14 +57,14 @@ export const BridgeSteps = ({ steps }: BridgeStepsProps) => {
 
 const styles = tv({
   slots: {
-    item: 'group flex justify-between px-3 py-2 [&_~_&]:border-t [&_~_&]:border-border',
+    item: 'group flex justify-between p-3 [&_~_&]:border-t [&_~_&]:border-border',
     stack: 'gap-0 rounded-md border border-border bg-inputBaseBg',
     action: 'gap-2 items-center',
     name: 'leading-tight text-xs text-heading',
     status: 'text-xs text-muted',
-    icon: 'text-gray-1',
+    icon: 'text-white',
     number: [
-      'flex justify-center text-xs',
+      'flex justify-center text-[9px]',
       'group-[&[data-selected=true]]:text-gray-11',
     ],
     circle: [

packages/app-portal/src/systems/Bridge/components/BridgeTxItem/BridgeTxItem.tsx

@@ -75,10 +75,10 @@ export const BridgeTxItem = ({
 
 const styles = tv({
   slots: {
-    networks: 'gap-1',
-    cardItem: 'flex flex-row min-h-[24px] gap-6 items-center',
+    networks: 'gap-1 items-center',
+    cardItem: 'flex flex-row min-h-[58px] px-5 gap-1 items-center',
     statusTime: [
-      'flex-1 justify-between',
+      'flex-1 justify-between items-center',
       'mobile:max-tablet:flex-col-reverse mobile:max-tablet:flex-wrap',
       'mobile:max-tablet:items-end mobile:max-tablet:gap-1',
     ],

packages/app-portal/src/systems/Bridge/components/BridgeTxItemsLoading/BridgeTxItemsLoading.tsx

@@ -2,7 +2,9 @@ import { LoadingBox, VStack } from '@fuels/ui';
 
 export const BridgeTxItemsLoading = () => {
   return (
-    <VStack justify="center" gap="4" aria-label="Loading Bridge Transactions">
+    <VStack justify="center" gap="3" aria-label="Loading Bridge Transactions">
+      <LoadingBox className="w-full h-[58px]" />
+      <LoadingBox className="w-full h-[58px]" />
       <LoadingBox className="w-full h-[58px]" />
       <LoadingBox className="w-full h-[58px]" />
       <LoadingBox className="w-full h-[58px]" />

packages/app-portal/src/systems/Bridge/components/BridgeTxOverview/BridgeTxOverview.tsx

@@ -101,10 +101,10 @@ export const BridgeTxOverview = ({
 
 const styles = tv({
   slots: {
-    stack: 'w-full',
+    stack: 'w-full mt-2',
     txItem: 'flex-wrap justify-between',
     labelText: 'text-xs text-intentsBase11',
-    subtleText: 'text-[10px] leading-tight text-muted',
+    subtleText: 'text-xs leading-tight text-muted',
     infoText: 'text-xs text-heading',
     linkText: 'text-xs',
     directionInfo: 'gap-1 items-center',

packages/app-portal/src/systems/Bridge/hooks/useBridgeTxs.tsx

@@ -7,7 +7,7 @@ import {
 
 import type { BridgeTxsMachineState } from '../machines';
 
-const MAX_BY_PAGE = 15;
+const MAX_BY_PAGE = 5;
 
 const selectors = {
   bridgeTxs: (state: BridgeTxsMachineState) => {

packages/app-portal/src/systems/Bridge/pages/BridgeTxList.tsx

@@ -95,6 +95,6 @@ export const BridgeTxList = () => {
 const styles = tv({
   slots: {
     cardList: 'cursor-pointer select-none :hover:bg-muted', // was intentsBase3
-    buttonShowMore: 'mt-2',
+    buttonShowMore: 'mt-2 w-full',
   },
 });

packages/app-portal/src/systems/Chains/fuel/components/ActionRequiredBadge/ActionRequiredBadge.tsx

@@ -1,20 +1,19 @@
-import { Badge, Text } from '@fuels/ui';
+import { Badge } from '@fuels/ui';
 import { tv } from 'tailwind-variants';
 
 export const ActionRequiredBadge = () => {
   const classes = styles();
 
   return (
-    <Text>
-      <Badge className={classes.actionBadge()} color="green">
-        Action Required
-      </Badge>
-    </Text>
+    <Badge className={classes.actionBadge()} color="green">
+      Action Required
+    </Badge>
   );
 };
 
 export const styles = tv({
   slots: {
-    actionBadge: 'text-[13px] font-medium leading-1 normal-case',
+    actionBadge:
+      'text-[11px] px-2 font-medium leading-1 normal-case cursor-pointer',
   },
 });

packages/app-portal/src/systems/Chains/fuel/containers/TxFuelToEthDialog.tsx

@@ -37,7 +37,7 @@ export function TxFuelToEthDialog() {
   return (
     <VStack className="max-w-sm">
       <Dialog.Title className="mb-0">
-        <HStack className="items-center">
+        <HStack gap="2" className="items-center">
           <IconTransferOut size={20} stroke={1.5} /> Withdraw
         </HStack>
       </Dialog.Title>
@@ -80,7 +80,6 @@ export function TxFuelToEthDialog() {
 
 const styles = tv({
   slots: {
-    divider: 'h-[2px] bg-border mt-2 w-full',
     actionButton: 'w-full',
   },
 });

packages/app-portal/src/systems/Chains/fuel/containers/TxListItemFuelToEth.tsx

@@ -21,8 +21,9 @@ export const TxListItemFuelToEth = ({ txHash }: TxListItemFuelToEthProps) => {
   const bridgeTxStatus = steps?.find(({ isSelected }) => !!isSelected);
 
   function getStatusComponent() {
-    if (status?.isReceiveDone)
+    if (status?.isReceiveDone) {
       return <Text className={classes.settledText()}>Settled</Text>;
+    }
 
     if (bridgeTxStatus?.isLoading) {
       return (
@@ -37,7 +38,7 @@ export const TxListItemFuelToEth = ({ txHash }: TxListItemFuelToEthProps) => {
       return <ActionRequiredBadge />;
     }
 
-    return '';
+    return null;
   }
 
   return (