feat: style twap table layouts

cowprotocol · Jan 15, 2025 · 31f582d · 31f582d
1 parent ce68e55
commit 31f582d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx
@@ -532,6 +532,9 @@ export function OrderRow({
       {/* Children (e.g. ToggleExpandButton for parent orders) */}
       {children}
 
+      {/* Add empty cell for child TWAP orders */}
+      {isTwapTable && isChild && <styledEl.CellElement />}
+
       {/* Action content menu */}
       <styledEl.CellElement>
         <OrderContextMenu

diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/TableGroup.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/TableGroup.tsx
@@ -30,13 +30,6 @@ const Pagination = styled(OrdersTablePagination)`
   padding: 10px 0;
 `
 
-const TwapStatusAndToggleWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-`
-
 function TwapStatusAndToggle({
   parent,
   childrenLength,
@@ -69,7 +62,7 @@ function TwapStatusAndToggle({
     : null
 
   return (
-    <TwapStatusAndToggleWrapper>
+    <>
       <OrderStatusBox
         order={parent}
         onClick={onClick}
@@ -98,7 +91,7 @@ function TwapStatusAndToggle({
         )}
         <button />
       </styledEl.ToggleExpandButton>
-    </TwapStatusAndToggleWrapper>
+    </>
   )
 }
 

diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/styled.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/styled.tsx
@@ -61,6 +61,22 @@ export const TableHeader = styled.div<{ isHistoryTab: boolean; isRowSelectable:
   display: grid;
   gap: 14px;
   grid-template-columns: ${({ isHistoryTab, isRowSelectable, isTwapTable }) => {
+    const checkboxColumn = isRowSelectable ? 'var(--checkboxSize)' : ''
+
+    // TWAP table layout - applies to both history and non-history tabs
+    if (isTwapTable) {
+      if (isHistoryTab) {
+        return `minmax(200px, 2.5fr)  
+                repeat(4, minmax(110px, 1fr))
+                minmax(80px, 0.8fr)   
+                minmax(120px, 1fr)
+                minmax(100px, 0.8fr)  
+                24px`
+      }
+      return `${checkboxColumn} minmax(160px,2fr) minmax(120px,1fr) minmax(140px,1fr) minmax(120px,1fr) minmax(120px,1fr) minmax(100px,110px) minmax(120px,1fr) minmax(100px,0.8fr) 24px`
+    }
+
+    // Default layout for history tab
     if (isHistoryTab) {
       return `minmax(200px, 2.5fr)  
               repeat(4, minmax(110px, 1fr))
@@ -69,13 +85,6 @@ export const TableHeader = styled.div<{ isHistoryTab: boolean; isRowSelectable:
               24px`
     }
 
-    const checkboxColumn = isRowSelectable ? 'var(--checkboxSize)' : ''
-
-    // TWAP table layout
-    if (isTwapTable) {
-      return `${checkboxColumn} minmax(160px,2fr) minmax(120px,1fr) minmax(140px,1fr) minmax(120px,1fr) minmax(120px,1fr) minmax(100px,110px) minmax(190px,1.6fr) 24px`
-    }
-
     // Default/Limit orders layout
     return `${checkboxColumn} minmax(160px,2fr) minmax(120px,1fr) minmax(140px,1fr) minmax(120px,1fr) minmax(120px,1fr) minmax(100px,110px) minmax(80px,0.8fr) 24px`
   }};