fix: improve design of alerts in submitted transactions (#1493)

Closes #1407 Improved design of alerts in submitted transactions. ![CleanShot 2024-09-19 at 14 17 20](https://github.com/user-attachments/assets/75108682-62ae-40ac-8369-71098d99b1bb)
FuelLabs · Sep 23, 2024 · 4bd3f8f · 4bd3f8f
1 parent 76c88c4
commit 4bd3f8f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/fast-islands-dress.md b/.changeset/fast-islands-dress.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Improve design of alerts in submitted transactions
diff --git a/packages/app/src/systems/Transaction/components/TxStatusAlert/TxStatusAlert.tsx b/packages/app/src/systems/Transaction/components/TxStatusAlert/TxStatusAlert.tsx
@@ -66,16 +66,22 @@ const styles = {
   root: (color: string) => {
     const cssColor = color ? `$${color}` : undefined;
     return cssObj({
+      marginBottom: '$4',
       '.fuel_Alert-icon': {
-        alignSelf: 'flex-start',
+        alignItems: 'center',
         mt: '2px',
         color: cssColor,
+        marginBottom: '$0',
 
         '& .fuel_Icon': {
           mt: '1px',
           color: cssColor,
         },
       },
+      '& .fuel_Alert-content': {
+        alignItems: 'center',
+        marginBottom: '$0',
+      },
       '& .fuel_Heading, & .fuel_Icon': {
         color: cssColor,
       },