diff --git a/src/components/common/TxModalDialog/styles.module.css b/src/components/common/TxModalDialog/styles.module.css
index 30ad5e0157..cc5941f166 100644
--- a/src/components/common/TxModalDialog/styles.module.css
+++ b/src/components/common/TxModalDialog/styles.module.css
@@ -38,6 +38,7 @@
.close {
color: var(--color-border-main);
padding: var(--space-1);
+ background-color: var(--color-border-light);
}
.paper {
@@ -76,6 +77,10 @@
background-color: var(--color-background-paper);
}
+ .close {
+ background-color: unset;
+ }
+
.close svg {
font-size: 1.5rem;
}
diff --git a/src/components/tx-flow/common/TxLayout/index.tsx b/src/components/tx-flow/common/TxLayout/index.tsx
index 652f633055..733ad21b77 100644
--- a/src/components/tx-flow/common/TxLayout/index.tsx
+++ b/src/components/tx-flow/common/TxLayout/index.tsx
@@ -92,28 +92,29 @@ const TxLayout = ({
-
-
-
-
-
- {title}
-
-
-
-
-
-
-
-
-
-
+ <>
+ {/* Header status button */}
+
+
+
+
+
+
+ {/* Main content */}
+
+
+ {title}
+
+
+
+
+
@@ -133,6 +134,7 @@ const TxLayout = ({
+ {/* Sidebar */}
{statusVisible && (
-
-
+
+ >
diff --git a/src/components/tx-flow/common/TxLayout/styles.module.css b/src/components/tx-flow/common/TxLayout/styles.module.css
index 504c07542d..5ff2454e6a 100644
--- a/src/components/tx-flow/common/TxLayout/styles.module.css
+++ b/src/components/tx-flow/common/TxLayout/styles.module.css
@@ -11,7 +11,8 @@
display: flex;
justify-content: space-between;
align-items: center;
- padding: var(--space-3);
+ /* Remove height of progress bar */
+ padding: calc(var(--space-3) - 6px) var(--space-3) var(--space-3);
border-bottom: 1px solid var(--color-border-light);
}
@@ -103,6 +104,11 @@
margin-bottom: var(--space-2);
}
+.widget {
+ /* Height of transaction type title */
+ margin-top: 46px;
+}
+
@media (max-width: 899.95px) {
.widget {
position: absolute;
@@ -111,6 +117,7 @@
width: 100%;
height: 100%;
z-index: -1;
+ margin-top: unset;
}
.widget.active {
diff --git a/src/components/tx-flow/common/TxStatusWidget/index.tsx b/src/components/tx-flow/common/TxStatusWidget/index.tsx
index a702265558..d3fce261e0 100644
--- a/src/components/tx-flow/common/TxStatusWidget/index.tsx
+++ b/src/components/tx-flow/common/TxStatusWidget/index.tsx
@@ -47,8 +47,8 @@ const TxStatusWidget = ({
return (
-
-
+
+
Transaction status
diff --git a/src/components/tx-flow/common/TxStatusWidget/styles.module.css b/src/components/tx-flow/common/TxStatusWidget/styles.module.css
index 80817f9cd0..3408f2bace 100644
--- a/src/components/tx-flow/common/TxStatusWidget/styles.module.css
+++ b/src/components/tx-flow/common/TxStatusWidget/styles.module.css
@@ -1,13 +1,12 @@
.header {
- padding: var(--space-3);
+ padding: var(--space-4) var(--space-3);
display: flex;
flex-direction: column;
- align-items: center;
gap: var(--space-1);
}
.content {
- padding: var(--space-3);
+ padding: var(--space-2);
}
.status {
@@ -83,11 +82,11 @@
margin-left: 16px;
}
- .title {
- font-size: 16px;
- }
-
.close {
display: flex;
}
+
+ .content {
+ padding: var(--space-3);
+ }
}
diff --git a/src/components/tx-flow/flows/NewTx/index.tsx b/src/components/tx-flow/flows/NewTx/index.tsx
index 55e85333ef..ab0c615eb0 100644
--- a/src/components/tx-flow/flows/NewTx/index.tsx
+++ b/src/components/tx-flow/flows/NewTx/index.tsx
@@ -23,7 +23,7 @@ const NewTxMenu = () => {
return (
-
+
{/* Alignment of `TxLayout` */}
diff --git a/src/components/tx-flow/flows/SuccessScreen/index.tsx b/src/components/tx-flow/flows/SuccessScreen/index.tsx
index 550b7d0f90..641a0b51d1 100644
--- a/src/components/tx-flow/flows/SuccessScreen/index.tsx
+++ b/src/components/tx-flow/flows/SuccessScreen/index.tsx
@@ -51,8 +51,9 @@ export const SuccessScreen = ({ txId }: { txId: string }) => {
disableGutters
sx={{
textAlign: 'center',
+ maxWidth: `${900 - 75}px`, // md={11}
}}
- maxWidth="md"
+ maxWidth={false}
>