chore: ui tweaks (#737)

* chore: change tab panel background and spacing

* chore: prevent tabs shiting on click, bg tweak

* chore: adjust chrome layout/spacing

* chore: fix horizontal alignment when accordion chevron rotates

* chore: adjusting bold levels and making market name pink on light theme

* chore: changing white theme header to black background

* chore: re-ordering bottom tabs

* chore: tweaking font sizes

* chore: adjusting dropdown button hover colour

* chore: colour tweaks for accessibility, plus orderbook column widths

* Remove redundant style

Removed 'bg-white' left by error.

* Setting header text to white

* chore: alterative fix to prevent tabs moving

* chore: fixing header font colours

* chore: adding padding to orderbook

* chore: preventing modal close icon from moving on focus

* chore: remove inner shadow from selectbox

* chore: adding padding to orderbook

* chore: preventing @ sign from moving when changing order type

* chore: fix background colour on smaller responsive view

* chore: fix truncated market header on smaller responsive view

* chore: reorder tabs in smaller responsive view to match standard view

* fix: fix broken test

apps/trading-e2e/src/integration/trading-accounts.cy.ts

@@ -11,7 +11,7 @@ beforeEach(() => {
 
 describe('accounts', () => {
   it('renders accounts', () => {
-    cy.getByTestId('Accounts').click();
+    cy.getByTestId('Collateral').click();
     cy.getByTestId('tab-accounts').contains('Please connect Vega wallet');
 
     connectVegaWallet();

apps/trading/components/navbar/navbar.tsx

@@ -10,7 +10,7 @@ export const Navbar = () => {
       <Link href="/" passHref={true}>
         {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
         <a className="px-[26px]">
-          <Vega className="fill-black dark:fill-white" />
+          <Vega className="fill-white" />
         </a>
       </Link>
       {[
@@ -39,7 +39,7 @@ const NavLink = ({ name, path, exact, testId = name }: NavLinkProps) => {
     'uppercase xs:text-ui sm:text-body-large md:text-h5 lg:text-h4',
     {
       'bg-vega-pink dark:bg-vega-yellow text-white dark:text-black': isActive,
-      'text-black dark:text-white': !isActive,
+      'text-white': !isActive,
     }
   );
   return (

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx

@@ -24,12 +24,14 @@ export const VegaWalletConnectButton = ({
   return (
     <span>
       {isConnected && (
-        <span className="text-ui-small font-mono mr-2">Vega key:</span>
+        <span className="text-ui-small font-mono mr-2 text-white-90">
+          Vega key:
+        </span>
       )}
       <button
         data-testid={isConnected ? 'manage-vega-wallet' : 'connect-vega-wallet'}
         onClick={handleClick}
-        className="ml-auto inline-block text-ui-small font-mono hover:underline"
+        className="ml-auto inline-block text-ui-small font-mono hover:underline text-white-90"
       >
         {isConnected ? truncateByChars(keypair.pub) : 'Connect Vega wallet'}
       </button>

apps/trading/pages/_app.page.tsx

@@ -28,9 +28,9 @@ function AppBody({ Component, pageProps }: AppProps) {
 
   return (
     <ThemeContext.Provider value={theme}>
-      <div className="h-full dark:bg-black dark:text-white-60 bg-white relative z-0 text-black-60 grid grid-rows-[min-content,1fr]">
+      <div className="h-full text-white relative text-black-60 dark:text-white-60 z-0 grid grid-rows-[min-content,1fr]">
         <AppLoader>
-          <div className="flex items-stretch border-b-[7px] border-vega-pink dark:border-vega-yellow">
+          <div className="flex items-stretch border-b-[7px] bg-black border-vega-pink dark:border-vega-yellow">
             <Navbar />
             <div className="flex items-center gap-4 ml-auto mr-8">
               <VegaWalletConnectButton

apps/trading/pages/markets/trade-grid.tsx

@@ -28,12 +28,12 @@ const TradingViews = {
   Candles: CandlesChartContainer,
   Depth: DepthChartContainer,
   Ticket: DealTicketContainer,
-  Orderbook: OrderbookContainer,
-  Orders: OrderListContainer,
-  Positions: PositionsContainer,
-  Accounts: AccountsContainer,
-  Trades: TradesContainer,
   Info: MarketInfoContainer,
+  Orderbook: OrderbookContainer,
+  Trades: TradesContainer,
+  Positions: PositionsContainer,
+  Orders: OrderListContainer,
+  Collateral: AccountsContainer,
 };
 
 type TradingView = keyof typeof TradingViews;
@@ -53,7 +53,7 @@ export const TradeMarketHeader = ({
     .filter((c): c is CandleClose => c !== null);
   const headerItemClassName = 'whitespace-nowrap flex flex-col';
   const itemClassName =
-    'font-sans font-normal mb-0 text-dark/80 dark:text-white/80 text-ui-small';
+    'font-sans font-normal mb-0 text-black-60 dark:text-white-80 text-ui-small';
   const itemValueClassName =
     'capitalize font-sans tracking-tighter text-black dark:text-white text-ui';
   const headerClassName = classNames(
@@ -66,7 +66,7 @@ export const TradeMarketHeader = ({
       <div className="flex flex-col md:flex-row gap-20 md:gap-64 ml-auto mr-8">
         <button
           onClick={() => setOpen(!open)}
-          className="shrink-0 dark:text-vega-yellow text-black text-h5 flex items-center gap-8 px-4 py-0 h-37 hover:bg-black/20 dark:hover:bg-white/20"
+          className="shrink-0 text-vega-pink dark:text-vega-yellow font-medium text-h5 flex items-center gap-8 px-4 py-0 h-37 hover:bg-black/10 dark:hover:bg-white/20"
         >
           <span className="break-words text-left">{market.name}</span>
           <ArrowDown color="yellow" borderX={8} borderTop={12} />
@@ -74,7 +74,7 @@ export const TradeMarketHeader = ({
 
         <div
           data-testid="market-summary"
-          className="flex flex-auto items-start gap-64 overflow-x-auto whitespace-nowrap w-[400px]"
+          className="flex flex-auto items-start gap-64 overflow-x-auto whitespace-nowrap"
         >
           <div className={headerItemClassName}>
             <span className={itemClassName}>Change (24h)</span>
@@ -116,8 +116,8 @@ interface TradeGridProps {
 export const TradeGrid = ({ market }: TradeGridProps) => {
   const wrapperClasses = classNames(
     'h-full max-h-full',
-    'grid gap-4 grid-cols-[1fr_375px_460px] grid-rows-[min-content_1fr_300px]',
-    'bg-black-10 dark:bg-white-10',
+    'grid gap-x-8 gap-y-4 grid-cols-[1fr_325px_425px] grid-rows-[min-content_1fr_200px]',
+    'bg-black-10 dark:bg-black-70',
     'text-ui'
   );
 
@@ -150,24 +150,24 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
         </TradeGridChild>
         <TradeGridChild className="row-start-2 row-end-3 col-start-3 col-end-4">
           <Tabs>
-            <Tab id="trades" name={t('Trades')}>
-              <TradingViews.Trades marketId={market.id} />
-            </Tab>
             <Tab id="orderbook" name={t('Orderbook')}>
               <TradingViews.Orderbook marketId={market.id} />
             </Tab>
+            <Tab id="trades" name={t('Trades')}>
+              <TradingViews.Trades marketId={market.id} />
+            </Tab>
           </Tabs>
         </TradeGridChild>
         <TradeGridChild className="col-span-3">
           <Tabs>
-            <Tab id="orders" name={t('Orders')}>
-              <TradingViews.Orders />
-            </Tab>
             <Tab id="positions" name={t('Positions')}>
               <TradingViews.Positions />
             </Tab>
-            <Tab id="accounts" name={t('Accounts')}>
-              <TradingViews.Accounts />
+            <Tab id="orders" name={t('Orders')}>
+              <TradingViews.Orders />
+            </Tab>
+            <Tab id="accounts" name={t('Collateral')}>
+              <TradingViews.Collateral />
             </Tab>
           </Tabs>
         </TradeGridChild>

libs/deal-ticket/src/components/deal-ticket-limit-amount.tsx

@@ -32,7 +32,7 @@ export const DealTicketLimitAmount = ({
           />
         </FormGroup>
       </div>
-      <div>@</div>
+      <div className="pt-4 text-black dark:text-white">@</div>
       <div className="flex-1">
         <FormGroup
           labelFor="input-price-quote"

libs/deal-ticket/src/components/deal-ticket-market-amount.tsx

@@ -33,8 +33,11 @@ export const DealTicketMarketAmount = ({
           />
         </FormGroup>
       </div>
-      <div className="pt-4">@</div>
-      <div className="flex-1 pt-4" data-testid="last-price">
+      <div className="pt-4 text-black dark:text-white">@</div>
+      <div
+        className="flex-1 pt-4 text-black dark:text-white"
+        data-testid="last-price"
+      >
         {price && quoteName ? (
           <>
             ~{price} {quoteName}

libs/deal-ticket/src/components/deal-ticket.tsx

@@ -62,7 +62,7 @@ export const DealTicket = ({
   );
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="px-4 py-8" noValidate>
+    <form onSubmit={handleSubmit(onSubmit)} className="px-12 py-8" noValidate>
       <Controller
         name="type"
         control={control}

libs/deal-ticket/src/components/info-market.tsx

@@ -134,7 +134,7 @@ export const MarketInfoContainer = ({ marketId }: MarketInfoContainerProps) => {
 
 export const Info = ({ market }: InfoProps) => {
   const headerClassName =
-    'text-h5 font-bold uppercase text-black dark:text-white';
+    'text-h5 font-medium uppercase text-black dark:text-white';
   const marketDataPanels = [
     {
       title: t('Current fees'),

libs/market-depth/src/lib/orderbook-row.tsx

@@ -66,7 +66,7 @@ export const OrderbookRow = React.memo(
           relativeAsk={cumulativeRelativeAsk}
           relativeBid={cumulativeRelativeBid}
           indicativeVolume={indicativeVolume}
-          className="pr-4"
+          className="pr-4 text-black dark:text-white"
         />
       </>
     );

libs/market-depth/src/lib/orderbook.tsx

@@ -282,7 +282,7 @@ export const Orderbook = ({
   const hasData = renderedRows.data && renderedRows.data.length !== 0;
   return (
     <div
-      className={`h-full overflow-auto relative ${styles['scroll']}`}
+      className={`h-full overflow-auto relative ${styles['scroll']} pl-4 pt-4`}
       onScroll={onScroll}
       ref={scrollElement}
       data-testid="scroll"
@@ -354,7 +354,7 @@ export const Orderbook = ({
           <select
             onChange={(e) => onResolutionChange(Number(e.currentTarget.value))}
             value={resolution}
-            className="block bg-black-25 dark:bg-white-25 text-black dark:text-white focus-visible:shadow-focus dark:focus-visible:shadow-focus-dark focus-visible:outline-0 font-mono w-100 text-right w-full h-full"
+            className="block bg-black-10 dark:bg-black-70 text-black dark:text-white focus-visible:shadow-focus dark:focus-visible:shadow-focus-dark focus-visible:outline-0 font-mono w-100 text-right w-full h-full"
             data-testid="resolution"
           >
             {new Array(3)

libs/market-list/src/lib/components/landing/select-market-list.tsx

@@ -67,6 +67,7 @@ export const SelectMarketList = ({
                           onKeyPress={(event) => handleKeyPress(event, id)}
                           onClick={() => onSelect(id)}
                           data-testid={`market-link-${id}`}
+                          className={`focus:decoration-vega-yellow`}
                         >
                           {marketName}
                         </a>
@@ -106,7 +107,10 @@ export const SelectMarketList = ({
         </tbody>
       </table>
 
-      <a className={`${boldUnderlineClassNames} text-ui-small`} href="/markets">
+      <a
+        className={`${boldUnderlineClassNames} text-ui-small focus:decoration-vega-yellow`}
+        href="/markets"
+      >
         {t('Or view full market list')}
       </a>
     </div>

libs/react-helpers/src/lib/grid/price-cell.tsx

@@ -20,13 +20,13 @@ export const PriceCell = React.memo(
       : [value];
     return (
       <span
-        className="font-mono relative text-ui-small"
+        className="font-mono relative text-ui-small text-black dark:text-white"
         data-testid={testId || 'price'}
       >
         {valueSplit[0]}
         {valueSplit[1] ? decimalSeparator : null}
         {valueSplit[1] ? (
-          <span className="text-black-muted dark:text-white-muted">
+          <span className="text-black-60 dark:text-white-60">
             {valueSplit[1]}
           </span>
         ) : null}

libs/trades/src/lib/trades-table.tsx

@@ -59,13 +59,13 @@ export const TradesTable = forwardRef<AgGridReact, TradesTableProps>(
         getRowId={({ data }) => data.id}
         ref={ref}
         defaultColDef={{
-          flex: 1,
           resizable: true,
         }}
       >
         <AgGridColumn
           headerName={t('Price')}
           field="price"
+          width={130}
           cellClass={changeCellClass('price')}
           valueFormatter={({ value, data }: ValueFormatterParams) => {
             return addDecimalsFormatNumber(value, data.market.decimalPlaces);
@@ -74,6 +74,7 @@ export const TradesTable = forwardRef<AgGridReact, TradesTableProps>(
         <AgGridColumn
           headerName={t('Size')}
           field="size"
+          width={125}
           valueFormatter={({ value, data }: ValueFormatterParams) => {
             return addDecimal(value, data.market.positionDecimalPlaces);
           }}
@@ -82,6 +83,7 @@ export const TradesTable = forwardRef<AgGridReact, TradesTableProps>(
         <AgGridColumn
           headerName={t('Created at')}
           field="createdAt"
+          width={170}
           valueFormatter={({ value }: ValueFormatterParams) => {
             return getDateTimeFormat().format(new Date(value));
           }}

libs/ui-toolkit/src/components/accordion/accordion.tsx

@@ -36,7 +36,7 @@ export const Accordion = ({ panels }: AccordionProps) => {
               className={triggerClassNames}
             >
               <p
-                className="inline-block text-footnote font-bold text-h6 text-black dark:text-white pt-5"
+                className="inline-block text-footnote font-medium text-h6 text-black dark:text-white pt-5"
                 data-testid="accordion-title"
               >
                 {title}

libs/ui-toolkit/src/components/accordion/chevron-down.tsx

@@ -4,22 +4,22 @@ export const ChevronDownIcon = ({ active }: ChevronDownIconProps) => {
     : 'transform duration-300 ease';
   return (
     <svg
-      width="20"
-      height="20"
+      width="14"
+      height="8"
       aria-label="chevron icon"
       data-testid="accordion-chevron-icon"
-      viewBox="0 0 20 20"
+      viewBox="0 0 14 8"
       fill="fillCurrent"
       xmlns="http://www.w3.org/2000/svg"
-      className={`${rotate} inline-block fill-black dark:fill-white`}
+      className={`${rotate} inline-block fill-black dark:fill-white mx-4`}
     >
-      <rect x="17" y="8" width="2" height="2" />
-      <rect x="15" y="10" width="2" height="2" />
-      <rect x="13" y="12" width="2" height="2" />
-      <rect x="11" y="14" width="2" height="2" />
-      <rect x="9" y="12" width="2" height="2" />
-      <rect x="7" y="10" width="2" height="2" />
-      <rect x="5" y="8" width="2" height="2" />
+      <rect x="12" y="0" width="2" height="2" />
+      <rect x="10" y="2" width="2" height="2" />
+      <rect x="8" y="4" width="2" height="2" />
+      <rect x="6" y="6" width="2" height="2" />
+      <rect x="4" y="4" width="2" height="2" />
+      <rect x="2" y="2" width="2" height="2" />
+      <rect x="0" y="0" width="2" height="2" />
     </svg>
   );
 };

libs/ui-toolkit/src/components/dialog/dialog.tsx

@@ -42,7 +42,7 @@ export function Dialog({
         />
         <DialogPrimitives.Content className={contentClasses}>
           <DialogPrimitives.Close
-            className="p-2 absolute top-8 right-8 leading-[0] focus:outline-none focus-visible:outline-none focus-visible:border focus-visible:border-vega-yellow"
+            className="p-2 absolute top-8 right-8 leading-[0] focus:outline-none focus-visible:outline-none focus-visible:border focus-visible:border-vega-yellow focus-visible:top-[7px] focus-visible:right-[7px]"
             data-testid="dialog-close"
           >
             <Icon

libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx

@@ -44,7 +44,7 @@ export const DropdownMenuTrigger = forwardRef<
   <DropdownMenuPrimitive.Trigger
     asChild={true}
     ref={forwardedRef}
-    className="focus-visible:outline-none focus-visible:shadow-inset-vega-pink dark:focus-visible:shadow-inset-vega-yellow"
+    className="focus-visible:outline-none focus-visible:shadow-inset-vega-pink dark:focus-visible:shadow-inset-vega-yellow transition-none hover:bg-white-95 dark:hover:bg-black-80"
   >
     <Button
       variant="secondary"

libs/ui-toolkit/src/components/form-group/form-group.tsx

@@ -33,14 +33,14 @@ export const FormGroup = ({
           {
             <div
               className={classNames(
-                'mb-4 text-body-large text-black dark:text-white',
+                'mb-4 text-large text-black dark:text-white',
                 {
                   'border-l-4 border-danger pl-8': hasError,
                   'text-right': labelAlign === 'right',
                 }
               )}
             >
-              <div className="font-bold mb-2">{label}</div>
+              <div className="font-medium mb-2">{label}</div>
               {labelDescription && (
                 <div className={classNames({ 'text-danger': hasError })}>
                   {labelDescription}

libs/ui-toolkit/src/components/input/input.tsx

@@ -135,6 +135,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       'appearance-none',
       'h-28',
       'dark:color-scheme-dark',
+      'shadow-input dark:shadow-input-dark',
       className,
       {
         'pl-28': hasPrepended,

libs/ui-toolkit/src/components/tabs/tabs.tsx

@@ -18,36 +18,40 @@ export const Tabs = ({ children }: TabsProps) => {
       className="h-full grid grid-rows-[min-content_1fr]"
       onValueChange={(value) => setActiveTab(value)}
     >
-      <div className="bg-black-10 dark:bg-white-10">
+      <div className="bg-black-10 dark:bg-black-70">
         <TabsPrimitive.List
-          className="flex flex-nowrap gap-4 overflow-x-auto"
+          className="flex flex-nowrap overflow-x-auto"
           role="tablist"
         >
-          {Children.map(children, (child) => {
-            if (!isValidElement(child)) return null;
-            const isActive = child.props.id === activeTab;
-            const triggerClass = classNames(
-              'py-4 px-20',
-              'capitalize',
-              'focus-visible:outline-none focus-visible:shadow-inset-vega-pink dark:focus-visible:shadow-inset-vega-yellow',
-              {
-                'font-semibold text-vega-pink dark:text-vega-yellow': isActive,
-                'bg-white dark:bg-black': isActive,
-                'text-black dark:text-white': !isActive,
-                'bg-white-90 dark:bg-black-70 hover:bg-white-95 dark:hover:bg-black-80':
-                  !isActive,
-              }
-            );
-            return (
-              <TabsPrimitive.Trigger
-                data-testid={child.props.name}
-                value={child.props.id}
-                className={triggerClass}
-              >
-                {child.props.name}
-              </TabsPrimitive.Trigger>
-            );
-          })}
+          <div className="gap-4 bg-white dark:bg-black flex border-r-4 border-r-white dark:border-r-black inline-block">
+            {Children.map(children, (child) => {
+              if (!isValidElement(child)) return null;
+              const isActive = child.props.id === activeTab;
+              const triggerClass = classNames(
+                'py-4 px-20',
+                'capitalize',
+                'focus-visible:outline-none focus-visible:shadow-inset-vega-pink dark:focus-visible:shadow-inset-vega-yellow',
+                'transition-[font-weight] duration-75',
+                'inline-block after:content-[attr(data-testid)] after:block after:font-bold after:invisible after:overflow-hidden after:h-0',
+                {
+                  'text-vega-pink dark:text-vega-yellow font-bold': isActive,
+                  'bg-white dark:bg-black': isActive,
+                  'text-black dark:text-white': !isActive,
+                  'bg-white-90 dark:bg-black-70 hover:bg-white-95 dark:hover:bg-black-80':
+                    !isActive,
+                }
+              );
+              return (
+                <TabsPrimitive.Trigger
+                  data-testid={child.props.name}
+                  value={child.props.id}
+                  className={triggerClass}
+                >
+                  {child.props.name}
+                </TabsPrimitive.Trigger>
+              );
+            })}
+          </div>
         </TabsPrimitive.List>
       </div>
       <div className="h-full overflow-auto">

libs/ui-toolkit/src/components/text-area/text-area.tsx

@@ -11,7 +11,12 @@ export interface TextAreaProps
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   ({ className, hasError, ...props }, ref) => {
-    const classes = classNames(defaultFormElement(hasError), className);
+    const textAreaClassName = classNames(
+      'shadow-input dark:shadow-input-dark',
+      className
+    );
+
+    const classes = classNames(defaultFormElement(hasError), textAreaClassName);
     return <textarea {...props} ref={ref} className={classes} />;
   }
 );

libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx

@@ -13,7 +13,7 @@ export const ThemeSwitcher = ({
   sunClassName?: string;
   moonClassName?: string;
 }) => {
-  const sunClasses = classNames('dark:hidden text-black', sunClassName);
+  const sunClasses = classNames('dark:hidden text-white', sunClassName);
   const moonClasses = classNames(
     'hidden dark:inline text-white',
     moonClassName

libs/ui-toolkit/src/utils/shared.ts

@@ -6,7 +6,6 @@ export const defaultFormElement = (hasError?: boolean) =>
     'box-border',
     'border rounded-none',
     'bg-clip-padding',
-    'shadow-input dark:shadow-input-dark',
     'bg-white dark:bg-white-25',
     'text-black placeholder:text-black-60 dark:text-white dark:placeholder:text-white-60',
     'text-ui',