feat: [GSW-2040] Improve ApproveTransaction Modal

gnoswap-labs · Jan 8, 2025 · c85bbf8 · c85bbf8
1 parent b5b4167
commit c85bbf8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/...es/web/src/components/common/approve-transaction-modal/ApproveTransactionModal.styles.tsx b/...es/web/src/components/common/approve-transaction-modal/ApproveTransactionModal.styles.tsx
@@ -140,19 +140,28 @@ export const ApproveTransactionDetails = styled.div`
   width: 100%;
 
   button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
     color: ${({ theme }) => theme.color.text04};
     font-size: 14px;
     font-weight: 400;
-    margin: 8px 0;
+    margin: 8px 0 0;
+    * {
+      fill: ${({ theme }) => theme.color.text04};
+    }
   }
   .transaction-messages {
     width: 100%;
     border-radius: 8px;
-    border: 1px solid transparent;
+    border: 0px solid transparent;
     background-color: transparent;
     overflow: scroll;
-    transition: all 0.3s ease-in-out;
+    transition: max-height 0.3s ease-in-out, border 0.3s ease-in-out;
+    margin-top: 0px;
     &.expanded {
+      margin-top: 8px;
       border: 1px solid ${({ theme }) => theme.color.border02};
       background-color: ${({ theme }) => theme.color.border12};
     }

diff --git a/packages/web/src/components/common/approve-transaction-modal/ApproveTransactionModal.tsx b/packages/web/src/components/common/approve-transaction-modal/ApproveTransactionModal.tsx
@@ -14,6 +14,8 @@ import {
 import IconClose from "@components/common/icons/IconCancel";
 import IconAdenaLogo from "../icons/defaultIcon/IconAdenaLogo";
 import Button, { ButtonHierarchy } from "@components/common/button/Button";
+import IconArrowDown from "../icons/IconArrowDown";
+import IconArrowUp from "../icons/IconArrowUp";
 
 const ApproveTransactionModal = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
@@ -63,7 +65,7 @@ const ApproveTransactionModal = () => {
           </ApproveTransactionSummary>
           <ApproveTransactionDetails>
             <button onClick={() => setIsExpanded(prev => !prev)} aria-expanded={isExpanded}>
-              View Transaction Data {isExpanded ? "▼" : "▲"}
+              View Transaction Data {isExpanded ? <IconArrowDown /> : <IconArrowUp />}
             </button>
 
             <div