feat(staking): ui of validator selection (dydxprotocol#691)

package.json

@@ -49,7 +49,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@dydxprotocol/v4-abacus": "^1.7.87",
     "@dydxprotocol/v4-client-js": "^1.1.23",
-    "@dydxprotocol/v4-localization": "^1.1.127",
+    "@dydxprotocol/v4-localization": "^1.1.128",
     "@ethersproject/providers": "^5.7.2",
     "@hugocxl/react-to-image": "^0.0.9",
     "@js-joda/core": "^5.5.3",

src/components/Details.tsx

@@ -153,8 +153,6 @@ const detailsLayoutVariants = {
 
 const itemLayoutVariants = {
   column: css`
-    isolation: isolate;
-
     ${layoutMixins.scrollArea}
 
     ${layoutMixins.stickyArea0}

src/components/DropdownIcon.tsx

@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+
+import { Icon, IconName } from '@/components/Icon';
+
+type ElementProps = {
+  iconName?: IconName;
+  isOpen?: boolean;
+};
+
+type StyleProps = {
+  className?: string;
+};
+
+export const DropdownIcon = ({
+  iconName = IconName.Triangle,
+  isOpen,
+  className,
+}: ElementProps & StyleProps) => {
+  return (
+    <$DropdownIcon aria-hidden="true" isOpen={isOpen} className={className}>
+      <Icon iconName={iconName} aria-hidden="true" />
+    </$DropdownIcon>
+  );
+};
+
+const $DropdownIcon = styled.span<{ isOpen?: boolean }>`
+  display: inline-flex;
+  transition: transform 0.3s var(--ease-out-expo);
+  font-size: 0.375em;
+
+  ${({ isOpen }) =>
+    isOpen &&
+    css`
+      transform: scaleY(-1);
+    `}
+`;

src/components/FormMaxInputToggleButton.tsx

@@ -18,7 +18,7 @@ type ElementProps = {
 };
 
 export const FormMaxInputToggleButton = ({
-  size = ButtonSize.XSmall,
+  size = ButtonSize.Small,
   isInputEmpty,
   isLoading,
   onPressedChange,
@@ -42,4 +42,6 @@ const $FormMaxInputToggleButton = styled(ToggleButton)`
   ${formMixins.inputInnerToggleButton}
 
   --button-padding: 0 0.5rem;
+  --button-backgroundColor: var(--color-accent);
+  --button-textColor: var(--color-text-2);
 `;

src/components/Popover.tsx

@@ -25,6 +25,7 @@ type StyleProps = {
   className?: string;
   fullWidth?: boolean;
   noBlur?: boolean;
+  align?: 'start' | 'center' | 'end';
   sideOffset?: number;
   triggerType?: TriggerType;
   withPortal?: boolean;
@@ -38,6 +39,7 @@ export const Popover = ({
   onOpenChange,
   slotTrigger,
   slotAnchor,
+  align = 'center',
   sideOffset,
   fullWidth,
   noBlur,
@@ -59,6 +61,7 @@ export const Popover = ({
       $noBlur={noBlur}
       className={className}
       sideOffset={sideOffset}
+      align={align}
     >
       {children}
     </$Content>

src/components/SearchSelectMenu.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState, type ReactNode } from 'react';
 
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import { type MenuConfig } from '@/constants/menus';
 
@@ -12,13 +12,14 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { ComboboxMenu } from '@/components/ComboboxMenu';
 import { type DetailsItem } from '@/components/Details';
-import { Icon, IconName } from '@/components/Icon';
 import { Popover, TriggerType } from '@/components/Popover';
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 import { WithLabel } from '@/components/WithLabel';
 
 import { getSimpleStyledOutputType } from '@/lib/genericFunctionalComponentUtils';
 
+import { DropdownIcon } from './DropdownIcon';
+
 type ElementProps = {
   asChild?: boolean;
   children: ReactNode;
@@ -58,7 +59,7 @@ export const SearchSelectMenu = ({
   ) : (
     <$MenuTrigger>
       {label ? <$WithLabel label={label}>{children}</$WithLabel> : children}
-      <$TriggerIcon iconName={IconName.Triangle} open={open} />
+      <DropdownIcon isOpen={open} />
     </$MenuTrigger>
   );
 
@@ -153,15 +154,3 @@ const $ComboboxMenu = styled(ComboboxMenu)<ComboboxMenuStyleProps>`
   max-height: 30vh;
   overflow: auto;
 ` as typeof ComboboxMenuStyleType;
-
-const $TriggerIcon = styled(Icon)<{ open?: boolean }>`
-  width: 0.625rem;
-  height: 0.375rem;
-  color: var(--color-text-0);
-
-  ${({ open }) =>
-    open &&
-    css`
-      transform: rotate(180deg);
-    `}
-`;

src/components/Table.tsx

@@ -566,8 +566,8 @@ const TableColumnHeader = <TableRowData extends BaseTableRowData>({
             aria-hidden="true"
             sortDirection={
               state.sortDescriptor?.column === column.key
-                ? state.sortDescriptor?.direction
-                : undefined
+                ? state.sortDescriptor?.direction ?? 'none'
+                : 'none'
             }
           >
             <Icon iconName={IconName.Triangle} aria-hidden="true" />
@@ -857,7 +857,7 @@ const $Td = styled.td`
   }
 `;
 
-const $SortArrow = styled.span<{ sortDirection?: 'ascending' | 'descending' }>`
+const $SortArrow = styled.span<{ sortDirection: 'ascending' | 'descending' | 'none' }>`
   float: right;
   margin-left: auto;
 
@@ -868,13 +868,18 @@ const $SortArrow = styled.span<{ sortDirection?: 'ascending' | 'descending' }>`
 
   font-size: 0.375em;
 
-  ${$Th}[aria-sort="none"] & {
-    visibility: hidden;
-  }
-
-  ${$Th}[aria-sort="ascending"] & {
-    transform: scaleY(-1);
-  }
+  ${({ sortDirection }) =>
+    ({
+      ascending: css`
+        transform: scaleY(-1);
+      `,
+      descending: css`
+        transform: scaleY(1);
+      `,
+      none: css`
+        visibility: hidden;
+      `,
+    })[sortDirection]}
 `;
 
 const $Thead = styled.thead<TableStyleProps>`