fix 24h sort in market dropdown, table styling (#141)

src/components/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -22,6 +22,11 @@ export const SearchInput = ({
 }: SearchInputProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (isOpen) inputRef?.current?.focus();
+  }, [inputRef, isOpen]);
 
   return (
     <Styled.Search>
@@ -41,6 +46,7 @@ export const SearchInput = ({
       />
       <Styled.Input
         autoFocus
+        ref={inputRef}
         value={value}
         isOpen={isOpen}
         type={type}

src/components/Table.tsx

@@ -831,6 +831,7 @@ Styled.SortArrow = styled.span<{ sortDirection: 'ascending' | 'descending' }>`
 Styled.Thead = styled.thead<StyleProps>`
   ${layoutMixins.stickyHeader}
   scroll-snap-align: none;
+  font: var(--font-mini-book);
 
   > * {
     height: var(--stickyArea-topHeight);
@@ -839,18 +840,17 @@ Styled.Thead = styled.thead<StyleProps>`
   color: var(--tableHeader-textColor);
   background-color: var(--tableHeader-backgroundColor);
 
-  @media ${breakpoints.notTablet} {
-    ${({ withInnerBorders, withGradientCardRows }) =>
-      withInnerBorders &&
-      !withGradientCardRows &&
-      css`
-        ${layoutMixins.withInnerHorizontalBorders}
-      `}
-  }
+  ${({ withInnerBorders, withGradientCardRows }) =>
+    withInnerBorders &&
+    !withGradientCardRows &&
+    css`
+      ${layoutMixins.withInnerHorizontalBorders}
+    `}
 `;
 
 Styled.Tbody = styled.tbody<StyleProps>`
   ${layoutMixins.stickyArea2}
+  font: var(--font-small-book);
 
   // If <table> height is fixed with not enough rows to overflow, vertically center the rows
   &:before,
@@ -869,6 +869,10 @@ Styled.Tbody = styled.tbody<StyleProps>`
       --stickyArea2-paddingBottom: var(--border-width);
       --stickyArea2-paddingLeft: var(--border-width);
       --stickyArea2-paddingRight: var(--border-width);
+
+      tr:first-of-type {
+        box-shadow: none;
+      }
     `}
 
   ${({ withGradientCardRows }) =>

src/hooks/useAccounts.tsx

@@ -136,8 +136,8 @@ const useAccountsContext = () => {
       getSubaccounts: async ({ dydxAddress }: { dydxAddress: DydxAddress }) => {
         try {
           const response = await compositeClient?.indexerClient.account.getSubaccounts(dydxAddress);
-          setDydxSubaccounts(response.subaccounts);
-          return response.subaccounts;
+          setDydxSubaccounts(response?.subaccounts);
+          return response?.subaccounts ?? [];
         } catch (error) {
           // 404 is expected if the user has no subaccounts
           if (error.status === 404) {

src/pages/portfolio/Fees.tsx

@@ -304,10 +304,6 @@ Styled.FeeTable = styled(Table)`
 
   @media ${breakpoints.notTablet} {
     --tableHeader-backgroundColor: var(--color-layer-1);
-
-    thead tr {
-      --border-width: 0;
-    }
   }
 `;
 

src/styles/tradeViewMixins.ts

@@ -18,9 +18,5 @@ export const tradeViewMixins: Record<
     tbody {
       font: var(--font-small-book);
     }
-
-    thead tr {
-      box-shadow: none;
-    }
   `,
 };

src/views/MarketsDropdown.tsx

@@ -82,18 +82,18 @@ const MarketsDropdownContent = ({ onRowAction }: { onRowAction?: (market: string
                 ),
               },
               {
-                columnKey: 'priceChange24H',
-                getCellValue: (row) => row.priceChange24H,
+                columnKey: 'priceChange24HPercent',
+                getCellValue: (row) => row.priceChange24HPercent,
                 label: stringGetter({ key: STRING_KEYS._24H }),
-                renderCell: ({ priceChange24H, priceChange24HPercent }) => (
+                renderCell: ({ priceChange24HPercent }) => (
                   <Styled.InlineRow>
-                    {!priceChange24H ? (
+                    {!priceChange24HPercent ? (
                       <Styled.Output type={OutputType.Text} value={null} />
                     ) : (
                       <Styled.PriceChangeOutput
                         type={OutputType.Percent}
                         value={priceChange24HPercent}
-                        isNegative={MustBigNumber(priceChange24H).isNegative()}
+                        isNegative={MustBigNumber(priceChange24HPercent).isNegative()}
                       />
                     )}
                   </Styled.InlineRow>