style(tables): update table header styling (dydxprotocol#729)

nabla-studio · Jun 26, 2024 · 58cf253 · 58cf253
1 parent bb3cc17
commit 58cf253
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -557,6 +557,7 @@ const TableColumnHeader = <TableRowData extends BaseTableRowData>({
       // data-focused={isFocusVisible || undefined}
       style={{ width: column.props?.width }}
       ref={ref}
+      allowSorting={column.props?.allowsSorting ?? true}
       withScrollSnapColumns={withScrollSnapColumns}
     >
       <$Row>
@@ -814,7 +815,7 @@ const $Tr = styled.tr<{
     `}
 `;
 
-const $Th = styled.th<{ withScrollSnapColumns?: boolean }>`
+const $Th = styled.th<{ allowSorting: boolean; withScrollSnapColumns?: boolean }>`
   // Computed
   --table-cell-currentAlign: var(--table-cell-align);
 
@@ -832,6 +833,16 @@ const $Th = styled.th<{ withScrollSnapColumns?: boolean }>`
       ${layoutMixins.scrollSnapItem}
     `}
 
+  ${({ allowSorting }) =>
+    allowSorting
+      ? css`
+          cursor: pointer;
+        `
+      : css`
+          cursor: default;
+          pointer-events: none;
+        `}
+
   white-space: nowrap;
   text-align: var(--table-cell-currentAlign);
 `;

diff --git a/src/views/MarketsStats.tsx b/src/views/MarketsStats.tsx
@@ -98,6 +98,7 @@ const $ToggleGroupContainer = styled.div`
   position: absolute;
   top: 0.8125rem;
   right: 1rem;
+  z-index: 2;
 
   & button {
     --button-toggle-off-backgroundColor: var(--color-layer-3);
@@ -112,7 +113,7 @@ const $SectionHeader = styled.div`
   ${layoutMixins.row}
   position: relative;
 
-  padding: 1rem 1.5rem;
+  padding: 1rem 1.5rem 0;
   gap: 0.25rem;
 
   & h4 {