replace isLoading with isPending, fix style mismatch in modal

djeck1432 · Dec 18, 2024 · 98a5f6b · 98a5f6b
1 parent 44d00a5
commit 98a5f6b
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 39 deletions.
diff --git a/frontend/src/globals.css b/frontend/src/globals.css
@@ -66,6 +66,7 @@
   --dark-background: #130713;
   --light-dark-background: #130713;
   --text-gray: #798795;
+  --modal-border: #170f2e;
 }
 
 body {

diff --git a/frontend/src/hooks/usePositionHistory.js b/frontend/src/hooks/usePositionHistory.js
@@ -27,7 +27,7 @@ const formatPositionHistoryTable = (data) => {
 const usePositionHistoryTable = () => {
     const walletId = useWalletStore((state) => state.walletId);
 
-    const { data, isLoading, error } = useQuery({
+    const { data, isPending, error } = useQuery({
         queryKey: ['positionHistory', walletId],
         queryFn: () => fetchPositionHistoryTable(walletId),
         enabled: !!walletId,
@@ -37,9 +37,11 @@ const usePositionHistoryTable = () => {
         select: formatPositionHistoryTable,
     });
 
+    const showSpinner = !!walletId && isPending;
+
     return {
         data,
-        isLoading,
+        isPending: showSpinner,
         error: walletId ? error : 'Wallet ID is required',
     };
 };

diff --git a/frontend/src/pages/spotnet/position_history/PositionHistory.jsx b/frontend/src/pages/spotnet/position_history/PositionHistory.jsx
@@ -98,7 +98,7 @@ function PositionHistory() {
                         <td>{data.is_liquidated}</td>
                         <td>{data.datetime_liquidation}</td>
                         <td className="action-column">
-                          <span className="action-button" onClick={() => setSelectedPosition(data)}>
+                          <span className="action-button" onClick={() => setSelectedPosition({ data, index })}>
                             &#x22EE;
                           </span>
                         </td>
@@ -113,10 +113,11 @@ function PositionHistory() {
       </div>
       {selectedPosition && (
         <PositionHistoryModal
-          position={selectedPosition}
+          position={selectedPosition.data}
           onClose={() => setSelectedPosition(null)}
           tokenIcon={tokenIconMap}
           statusStyles={statusStyles}
+          index={selectedPosition.index + 1}
         />
       )}
     </div>

diff --git a/frontend/src/pages/spotnet/position_history/PositionHistoryModal.jsx b/frontend/src/pages/spotnet/position_history/PositionHistoryModal.jsx
@@ -1,14 +1,17 @@
 import React from 'react';
 import './positionHistory.css';
 
-function PositionHistoryModal({ position, onClose, tokenIcon, statusStyles }) {
+function PositionHistoryModal({ position, onClose, index, tokenIcon, statusStyles }) {
   return (
     <div className="position-modal-overlay">
       <div className="position-modal-content">
         <div className="position-modal-header">
           <p className="position-modal-p">
-            {tokenIcon[position.token_symbol]}
-            <span>{position.token_symbol}</span>
+            <span>
+              <span>{index}.</span>
+              {tokenIcon[position.token_symbol]}
+              {position.token_symbol}
+            </span>
             <span>{position.amount}</span>
             <span className={`status-cell ${statusStyles[position.status.toLowerCase()] || ''}`}>
               {position.status}
@@ -19,7 +22,7 @@ function PositionHistoryModal({ position, onClose, tokenIcon, statusStyles }) {
             ✕
           </span>
         </div>
-
+        <hr className="modal-divider" />
         <div className="position-modal-body">
           <div className="position-detail-row">
             <p>

diff --git a/frontend/src/pages/spotnet/position_history/positionHistory.css b/frontend/src/pages/spotnet/position_history/positionHistory.css
@@ -50,8 +50,7 @@
 }
 
 .position-table {
-  background: rgba(18, 7, 33, 0.5);
-  border: 1px solid rgba(54, 41, 78, 1);
+  border: var(--midnight-purple-border);
   border-radius: 10px;
 }
 
@@ -61,6 +60,10 @@
   border-spacing: 0;
 }
 
+.position-table .index {
+  color: var(--gray);
+}
+
 .position-table th,
 .position-table td {
   padding: 16px;
@@ -111,25 +114,6 @@
   color: var(--status-pending);
 }
 
-@media (max-width: 768px) {
-  .position-table th:nth-child(4),
-  .position-table th:nth-child(6),
-  .position-table th:nth-child(7),
-  .position-table th:nth-child(8),
-  .position-table th:nth-child(9),
-  .position-table td:nth-child(4),
-  .position-table td:nth-child(6),
-  .position-table td:nth-child(7),
-  .position-table td:nth-child(8),
-  .position-table td:nth-child(9) {
-    display: none;
-  }
-
-  .position-table {
-    overflow: hidden;
-  }
-}
-
 .action-button {
   background: none;
   border: none;
@@ -160,36 +144,55 @@
 
 .position-modal-content {
   background-color: var(--bg);
-  border-radius: 12px;
+  border-radius: 14px;
   padding: 24px;
-  width: 70%;
-  max-width: 500px;
+  border: 2px solid var(--modal-border);
+  width: 400px;
+  max-width: 90%;
 }
 
 .position-modal-header {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
 }
 
 .position-modal-p {
   display: flex;
   color: var(--primary);
-  width: 90%;
+  gap: 2rem;
+  margin: 0;
+  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
-  justify-content: space-evenly;
-  margin-top: 15px;
+  word-wrap: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.position-close-button {
+.position-modal-p span {
+  display: flex;
+  align-items: center;
+}
+
+.position-modal-p :first-child :first-child {
   color: var(--status-closed);
 }
 
+.position-close-button {
+  cursor: var(--status-closed);
+  font-size: 1.5rem;
+  margin-left: 1rem;
+}
+
+.modal-divider {
+  border: 0.4px solid var(--gray);
+}
+
 .position-modal-body {
   display: flex;
   flex-direction: column;
-  justify-self: center;
-  gap: 20px;
+  margin-left: 22px;
 }
 
 .position-detail-row p {
@@ -209,6 +212,23 @@
 }
 
 @media (max-width: 768px) {
+  .position-table th:nth-child(4),
+  .position-table th:nth-child(6),
+  .position-table th:nth-child(7),
+  .position-table th:nth-child(8),
+  .position-table th:nth-child(9),
+  .position-table td:nth-child(4),
+  .position-table td:nth-child(6),
+  .position-table td:nth-child(7),
+  .position-table td:nth-child(8),
+  .position-table td:nth-child(9) {
+    display: none;
+  }
+
+  .position-table {
+    overflow: hidden;
+  }
+
   .action-column {
     display: table-cell;
   }