From 4bd3f8f7e1dc0ba120cf23a9fa5de907b2e0186b Mon Sep 17 00:00:00 2001
From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com>
Date: Mon, 23 Sep 2024 15:33:30 -0300
Subject: [PATCH] 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)
---
 .changeset/fast-islands-dress.md                          | 5 +++++
 .../components/TxStatusAlert/TxStatusAlert.tsx            | 8 +++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fast-islands-dress.md

diff --git a/.changeset/fast-islands-dress.md b/.changeset/fast-islands-dress.md
new file mode 100644
index 000000000..5a2e665ae
--- /dev/null
+++ 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
index 833bc8d1f..578c27df5 100644
--- 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,
       },