Adjust table designs (#471)

* Adjust table design on all pages to match home * make table header responsive * adjust asset with logo margins * fix typo
l2beat · Aug 21, 2023 · 442cdea · 442cdea
1 parent 4658f7c
commit 442cdea
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 73 deletions.
diff --git a/packages/frontend/src/view/components/AssetWithLogo.tsx b/packages/frontend/src/view/components/AssetWithLogo.tsx
@@ -18,7 +18,7 @@ export function AssetWithLogo({
   symbolClassName,
 }: AssetWithLogoProps) {
   return (
-    <div className={classNames('flex items-center gap-1', className)}>
+    <div className={classNames('flex items-center', className)}>
       <img
         data-src={assetInfo.imageUrl}
         className={classNames(
@@ -31,7 +31,9 @@ export function AssetWithLogo({
       />
       <span
         className={classNames(
-          type === 'small' ? 'text-sm font-medium' : 'text-lg font-semibold'
+          type === 'small'
+            ? 'ml-1 text-sm font-medium'
+            : 'ml-2 text-lg font-semibold'
         )}
       >
         {type === 'full' && (

diff --git a/packages/frontend/src/view/components/SectionHeading.tsx b/packages/frontend/src/view/components/SectionHeading.tsx
@@ -1,19 +1,32 @@
-import cx from 'classnames'
+import { default as classNames, default as cx } from 'classnames'
 import React, { ReactNode } from 'react'
 
 interface SectionHeadingProps {
   title: ReactNode
   description?: ReactNode
   children?: ReactNode
+  className?: string
 }
 
 export function SectionHeading(props: SectionHeadingProps) {
   return (
-    <div className="mb-5 flex flex-wrap items-baseline justify-between gap-4">
-      <h2 className={cx('text-xl font-semibold', props.children && 'flex-1')}>
+    <div
+      className={classNames(
+        'mb-5 flex flex-wrap items-baseline justify-between gap-4',
+        props.className
+      )}
+    >
+      <h2
+        className={cx(
+          'text-xl font-semibold leading-tight',
+          props.children && 'flex-1'
+        )}
+      >
         {props.title}
       </h2>
-      <p className="text-sm font-medium text-zinc-500">{props.description}</p>
+      {props.description && (
+        <p className="text-sm font-medium text-zinc-500">{props.description}</p>
+      )}
       {props.children}
     </div>
   )

diff --git a/packages/frontend/src/view/components/table/Table.tsx b/packages/frontend/src/view/components/table/Table.tsx
@@ -7,18 +7,18 @@ import { Column, Row } from './types'
 interface TableProps {
   columns: Column[]
   rows: Row[]
-  fullBackground?: boolean
   alignLastColumnRight?: boolean
   shortenOnMobile?: boolean
+  rowClassName?: string
 }
 
 export function Table(props: TableProps) {
   const { alignLastColumnRight = true } = props
   return (
     <div
-      className={cx('overflow-x-auto sm:w-full', {
-        'rounded-lg bg-gray-800 pb-4': props.fullBackground,
-      })}
+      className={cx(
+        'overflow-x-auto rounded-lg bg-gray-800 pb-3 group-[.Card]/card:pb-0 sm:w-full'
+      )}
     >
       <table
         cellPadding="0"
@@ -33,7 +33,7 @@ export function Table(props: TableProps) {
                 scope="col"
                 key={i}
                 className={cx(
-                  'bg-gray-800 px-2 first:rounded-l first:pl-4 last:rounded-r last:pr-4 group-[.Card]/card:bg-slate-800 sm:px-2.5 sm:first:pl-5 sm:last:pr-5',
+                  'bg-slate-800 px-2 first:rounded-l first:pl-4 last:rounded-r last:pr-4 sm:px-2.5 sm:first:pl-5 sm:last:pr-5',
                   column.numeric && 'text-right',
                   column.align === 'center' && 'text-center',
                   column.minimalWidth && 'w-0',
@@ -51,7 +51,7 @@ export function Table(props: TableProps) {
               cells={cells}
               link={link}
               columns={props.columns}
-              fullBackground={props.fullBackground}
+              className={props.rowClassName}
               shortenOnMobile={props.shortenOnMobile}
               i={i}
               key={i}

diff --git a/packages/frontend/src/view/components/table/TableLimitSelect.tsx b/packages/frontend/src/view/components/table/TableLimitSelect.tsx
@@ -23,7 +23,7 @@ export function TableLimitSelect(props: TableLimitSelectProps) {
         name="perPage"
         autoComplete="off"
         defaultValue={props.limit}
-        className="rounded bg-gray-800 px-2 py-0.5 font-semibold"
+        className="rounded bg-slate-800 px-2 py-0.5 font-semibold"
       >
         {options.map((n) => (
           <option key={n}>{n}</option>

diff --git a/packages/frontend/src/view/components/table/TableRow.tsx b/packages/frontend/src/view/components/table/TableRow.tsx
@@ -6,6 +6,7 @@ import { Column, Row } from './types'
 interface TableRowProps extends Row {
   i: number
   columns: Column[]
+  className?: string
   fullBackground?: boolean
   shortenOnMobile?: boolean
 }
@@ -14,11 +15,11 @@ export function TableRow(props: TableRowProps) {
   return (
     <tr
       className={cx(
-        'whitespace-nowrap border-b border-b-zinc-800 border-opacity-50 text-sm font-medium last:border-none group-[.Card]/card:border-b-gray-750 ',
-        props.fullBackground ? 'h-16' : 'h-10',
+        'h-10 whitespace-nowrap border-b border-b-gray-750 border-opacity-50 text-sm font-medium last:border-none',
         props.link && 'cursor-pointer hover:bg-gray-900 hover:bg-opacity-40',
         props.shortenOnMobile &&
-          '[&:nth-child(n+11)]:hidden xl:[&:nth-child(n+11)]:table-row'
+          '[&:nth-child(n+11)]:hidden xl:[&:nth-child(n+11)]:table-row',
+        props.className
       )}
     >
       {props.cells.map((cell, col) => {

diff --git a/packages/frontend/src/view/components/table/TableWithPagination.tsx b/packages/frontend/src/view/components/table/TableWithPagination.tsx
@@ -2,6 +2,7 @@ import isNumber from 'lodash/isNumber'
 import React, { ReactNode } from 'react'
 
 import { formatInt } from '../../../utils/formatting/formatAmount'
+import { Card } from '../Card'
 import { SectionHeading } from '../SectionHeading'
 import { TableLimitSelect } from './TableLimitSelect'
 import { TablePagination } from './TablePagination'
@@ -25,17 +26,19 @@ export function TableWithPagination(props: TableWithPaginationProps) {
     : undefined
 
   return (
-    <>
-      <SectionHeading
-        title={props.title}
-        description={getDescription(
-          props.offset,
-          props.visible,
-          props.total,
-          props.entryShortNamePlural
-        )}
-      >
-        <TableLimitSelect limit={props.limit} link={props.path} />
+    <Card>
+      <SectionHeading title={props.title} className="flex-col md:flex-row">
+        <div className="flex w-full items-center justify-between gap-4 whitespace-pre md:w-min md:justify-end">
+          <p className="text-sm font-medium text-zinc-500">
+            {getDescription(
+              props.offset,
+              props.visible,
+              props.total,
+              props.entryShortNamePlural
+            )}
+          </p>
+          <TableLimitSelect limit={props.limit} link={props.path} />
+        </div>
       </SectionHeading>
       {props.children}
       {props.visible === 0 && (
@@ -67,7 +70,7 @@ export function TableWithPagination(props: TableWithPaginationProps) {
           </div>
         </div>
       )}
-    </>
+    </Card>
   )
 }
 

diff --git a/packages/frontend/src/view/pages/state-update/components/StateUpdateBalanceChangesTable.tsx b/packages/frontend/src/view/pages/state-update/components/StateUpdateBalanceChangesTable.tsx
@@ -29,7 +29,7 @@ export function StateUpdateBalanceChangesTable(
   return (
     <Table
       columns={[
-        { header: 'StarkKey' },
+        { header: 'Stark Key' },
         { header: props.tradingMode === 'perpetual' ? 'Position' : 'Vault' },
         { header: 'Asset' },
         { header: 'Change', numeric: true },

diff --git a/packages/frontend/src/view/pages/user/components/UserAssetTable.tsx b/packages/frontend/src/view/pages/user/components/UserAssetTable.tsx
@@ -1,4 +1,4 @@
-import { TradingMode } from '@explorer/shared'
+import { assertUnreachable, TradingMode } from '@explorer/shared'
 import { EthereumAddress, StarkKey } from '@explorer/types'
 import React from 'react'
 
@@ -36,21 +36,9 @@ export interface UserAssetEntry {
 export function UserAssetsTable(props: UserAssetsTableProps) {
   const isUserRegistered = !!props.ethereumAddress
 
-  const escapeHatchElem = (entry: UserAssetEntry) =>
-    entry.action === 'ESCAPE' ? (
-      <Button
-        as="a"
-        href={getEscapeHatchLink(entry.vaultOrPositionId, isUserRegistered)}
-      >
-        ESCAPE
-      </Button>
-    ) : entry.action === 'USE_COLLATERAL_ESCAPE' ? (
-      <span className="text-zinc-500">use collateral escape</span>
-    ) : null
-
   return (
     <Table
-      fullBackground
+      rowClassName="h-16"
       columns={[
         { header: <span className="pl-10">Name</span> },
         { header: 'Balance' },
@@ -79,41 +67,56 @@ export function UserAssetsTable(props: UserAssetsTableProps) {
                 <a href={`/proof/${entry.vaultOrPositionId}`}>(proof)</a>
               )}
             </span>,
-            props.isMine &&
-              (!props.isFrozen ? (
-                <Button
-                  as="a"
-                  className="w-32"
-                  href={getForcedActionLink(
-                    props.tradingMode,
-                    entry,
-                    isUserRegistered
-                  )}
-                  disabled={isDisabled}
-                >
-                  {entry.action}
-                </Button>
-              ) : (
-                escapeHatchElem(entry)
-              )),
+            ...(props.isMine &&
+            entry.action !== 'NO_ACTION' &&
+            entry.action !== 'USE_COLLATERAL_ESCAPE'
+              ? [
+                  <Button
+                    as="a"
+                    href={getActionButtonLink(
+                      props.tradingMode,
+                      entry,
+                      isUserRegistered
+                    )}
+                    className="block"
+                    disabled={isDisabled}
+                  >
+                    {getActionButtonLabel(entry.action)}
+                  </Button>,
+                ]
+              : []),
+            ...(props.isMine && entry.action === 'USE_COLLATERAL_ESCAPE'
+              ? [
+                  <span className="text-zinc-500">
+                    {getActionButtonLabel(entry.action)}
+                  </span>,
+                ]
+              : []),
           ],
         }
       })}
     />
   )
 }
 
-function getEscapeHatchLink(
-  vaultOrPositionId: string,
-  isUserRegistered: boolean
-) {
-  if (!isUserRegistered) {
-    return '/users/register'
+function getActionButtonLabel(action: UserAssetEntry['action']) {
+  switch (action) {
+    case 'WITHDRAW':
+      return 'Withdraw'
+    case 'CLOSE':
+      return 'Close'
+    case 'ESCAPE':
+      return 'Escape'
+    case 'USE_COLLATERAL_ESCAPE':
+      return 'Use collateral escape'
+    case 'NO_ACTION':
+      throw new Error('No action')
+    default:
+      assertUnreachable(action)
   }
-  return `/escape/${vaultOrPositionId}`
 }
 
-function getForcedActionLink(
+function getActionButtonLink(
   tradingMode: TradingMode,
   entry: UserAssetEntry,
   isUserRegistered: boolean
@@ -122,9 +125,17 @@ function getForcedActionLink(
     return '/users/register'
   }
 
-  return tradingMode === 'perpetual'
-    ? `/forced/new/${
-        entry.vaultOrPositionId
-      }/${entry.asset.hashOrId.toString()}`
-    : `/forced/new/${entry.vaultOrPositionId}`
+  switch (entry.action) {
+    case 'WITHDRAW':
+    case 'CLOSE':
+      return tradingMode === 'perpetual'
+        ? `/forced/new/${
+            entry.vaultOrPositionId
+          }/${entry.asset.hashOrId.toString()}`
+        : `/forced/new/${entry.vaultOrPositionId}`
+    case 'ESCAPE':
+      return `/escape/${entry.vaultOrPositionId}`
+    default:
+      return undefined
+  }
 }