Chore/design updates (#1305)

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* fix: fix lint tests

* chore: fixes ag grid invisible header seperators

* fix: fixing conflicts

* fix: fixing conflicts

* chore: fix header spacing

* chore: fix dropdown hover colour

* fix: formatting change to pass test

apps/console-lite/src/app/components/nav/tab-bar.tsx

@@ -8,7 +8,7 @@ interface TabBarProps {
 export const TabBar = ({ className }: TabBarProps) => (
   <div role="group" aria-label="Tab Bar Navigation Menu" className={className}>
     <div role="presentation" className="py-[42px]" />
-    <div className="md:hidden fixed bottom-0 left-0 right-0 bg-black py-4 border-t border-neutral-300 dark:border-neutral-700">
+    <div className="md:hidden fixed bottom-0 left-0 right-0 bg-black py-4 border-t border-neutral-300 dark:border-neutral-600">
       <Nav tabs className="flex justify-evenly items-center" />
     </div>
   </div>

apps/trading/components/footer/footer.tsx

@@ -1,11 +1,8 @@
-import { Vega } from '../icons/vega';
-
 export const Footer = () => {
   return (
-    <footer className="px-4 py-2 text-xs border-t border-neutral-300 dark:border-neutral-700">
+    <footer className="px-4 py-2 text-xs border-t border-neutral-300 dark:border-neutral-600 bg-neutral-100 dark:bg-neutral-800">
       <div className="flex justify-between">
         <div>Status</div>
-        <Vega className="w-13" />
       </div>
     </footer>
   );

apps/trading/components/header/header.tsx

@@ -10,7 +10,7 @@ interface TradeMarketHeaderProps {
 
 export const Header = ({ title, children }: TradeMarketHeaderProps) => {
   return (
-    <header className="w-screen xl:px-4 pt-4 border-b border-neutral-300 dark:border-neutral-700">
+    <header className="w-screen xl:px-4 pt-4 border-b border-neutral-300 dark:border-neutral-600">
       <div className="xl:flex xl:gap-4  items-start">
         <div className="px-4 mb-2">{title}</div>
         <div
@@ -40,7 +40,7 @@ export const HeaderStat = ({
   description?: string | ReactNode;
 }) => {
   const itemClass =
-    'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-neutral-300 dark:border-neutral-700';
+    'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-neutral-300 dark:border-neutral-600';
   const itemHeading = 'text-neutral-400';
 
   return (

apps/trading/components/icons/vega.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
 export function Vega({ className }: { className?: string }) {
-  const svgClasses = classNames(className, 'fill-current');
+  const svgClasses = classNames(className, 'fill-white');
   return (
     <svg
       width="86"

apps/trading/components/navbar/navbar.tsx

@@ -5,7 +5,8 @@ import { NetworkSwitcher } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/react-helpers';
 import { useGlobalStore } from '../../stores/global';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
-import { ThemeSwitcher, VLogo } from '@vegaprotocol/ui-toolkit';
+import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
+import { Vega } from '../icons/vega';
 
 interface NavbarProps {
   theme: 'light' | 'dark';
@@ -19,12 +20,12 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
   }));
   const tradingPath = marketId ? `/markets/${marketId}` : '/markets';
   return (
-    <div className="px-4 flex items-stretch border-b border-neutral-300 dark:border-neutral-700 bg-black">
+    <div className="px-4 flex items-stretch border-b border-neutral-300 dark:border-neutral-400 bg-black">
       <div className="flex gap-4 mr-4 items-center h-full">
         <Link href="/" passHref={true}>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a>
-            <VLogo className="w-6 h-6 fill-white" />
+            <Vega className="w-13" />
           </a>
         </Link>
         <NetworkSwitcher fixedBg="dark" />
@@ -69,7 +70,7 @@ const NavLink = ({ name, path, exact, testId = name }: NavLinkProps) => {
     router.asPath === path || (!exact && router.asPath.startsWith(path));
   const linkClasses = classNames('mx-2 py-2 self-end border-b-4', {
     'border-vega-yellow text-white cursor-default': isActive,
-    'border-transparent text-neutral-400': !isActive,
+    'border-transparent text-neutral-400 hover:text-neutral-300': !isActive,
   });
   return (
     <Link data-testid={testId} href={path} passHref={true}>

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

@@ -30,7 +30,7 @@ export const VegaWalletConnectButton = ({
     return (
       <DropdownMenu open={dropdownOpen}>
         <DropdownMenuTrigger
-          className="text-white"
+          className="text-white hover:!bg-neutral-700"
           data-testid="manage-vega-wallet"
           onClick={() => setDropdownOpen((curr) => !curr)}
         >

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

@@ -127,14 +127,14 @@ export const TradeMarketHeader = ({
     market.tradableInstrument.instrument.product?.settlementAsset?.symbol;
 
   const itemClass =
-    'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-neutral-300 dark:border-neutral-700';
+    'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-neutral-300 dark:border-neutral-600';
-  const itemHeading = 'text-neutral-400';
+  const itemHeading = 'text-neutral-500 dark:text-neutral-400';
   const { push } = useRouter();
 
   return (
-    <header className="w-screen xl:px-4 pt-4 border-b border-neutral-300 dark:border-neutral-700">
+    <header className="w-screen px-4 border-b border-neutral-300 dark:border-neutral-600">
       <div className="xl:flex xl:gap-4  items-start">
-        <div className="px-4 mb-2 xl:mb-0">
+        <div>
           <SelectMarketPopover
             marketName={market.tradableInstrument.instrument.name}
             onSelect={onSelect}
@@ -142,7 +142,7 @@ export const TradeMarketHeader = ({
         </div>
         <div
           data-testid="market-summary"
-          className="flex flex-nowrap items-start xl:flex-1 w-full overflow-x-auto text-xs "
+          className="flex flex-nowrap items-start mt-3 xl:flex-1 w-full overflow-x-auto text-xs "
         >
           <div className={itemClass}>
             <div className={itemHeading}>{t('Expiry')}</div>
@@ -273,7 +273,7 @@ export const TradeGrid = ({ market, onSelect }: TradeGridProps) => {
             </ResizableGridPanel>
             <ResizableGridPanel
               priority={LayoutPriority.Low}
-              preferredSize="25%"
+              preferredSize={330}
               minSize={300}
             >
               <TradeGridChild>
@@ -295,7 +295,7 @@ export const TradeGrid = ({ market, onSelect }: TradeGridProps) => {
             </ResizableGridPanel>
             <ResizableGridPanel
               priority={LayoutPriority.Low}
-              preferredSize="25%"
+              preferredSize={430}
               minSize={200}
             >
               <TradeGridChild>
@@ -313,7 +313,7 @@ export const TradeGrid = ({ market, onSelect }: TradeGridProps) => {
         </ResizableGridPanel>
         <ResizableGridPanel
           priority={LayoutPriority.Low}
-          preferredSize="33%"
+          preferredSize="25%"
           minSize={50}
         >
           <TradeGridChild>
@@ -347,7 +347,10 @@ const TradeGridChild = ({ children }: TradeGridChildProps) => {
     <section className="h-full">
       <AutoSizer>
         {({ width, height }) => (
-          <div style={{ width, height }} className="overflow-auto">
+          <div
+            style={{ width, height }}
+            className="overflow-auto border-[1px] dark:border-neutral-600"
+          >
             {children}
           </div>
         )}
@@ -395,7 +398,7 @@ export const TradePanels = ({ market, onSelect }: TradePanelsProps) => {
           )}
         </AutoSizer>
       </div>
-      <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-neutral-300 dark:border-neutral-700">
+      <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-neutral-300 dark:border-neutral-600">
         {Object.keys(TradingViews).map((key) => {
           const isActive = view === key;
           const className = classNames('p-4 min-w-[100px] capitalize', {

apps/trading/pages/styles.css

@@ -16,5 +16,5 @@ html {
 
 html.dark {
   --focus-border: theme('colors.vega.yellow');
-  --separator-border: theme('colors.neutral.700');
+  --separator-border: theme('colors.neutral.600');
 }

libs/environment/src/components/network-switcher/network-switcher.tsx

@@ -88,7 +88,7 @@ export const NetworkSwitcher = ({
     [setOpen, setAdvancedView]
   );
 
-  const dropdownTriggerClasses = classNames({
+  const dropdownTriggerClasses = classNames('hover:!bg-neutral-700', {
     'dark:text-white dark:bg-black text-black bg-white': !fixedBg,
     'text-black bg-white': fixedBg === 'light',
     'text-white bg-black': fixedBg === 'dark',

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

@@ -27,7 +27,7 @@ interface OrderbookProps extends OrderbookData {
 
 const HorizontalLine = ({ top, testId }: { top: string; testId: string }) => (
   <div
-    className="absolute border-b border-neutral-300 dark:border-neutral-700 inset-x-0"
+    className="absolute border-b border-neutral-300 dark:border-neutral-600 inset-x-0"
     style={{ top }}
     data-testid={testId}
   />
@@ -309,7 +309,7 @@ export const Orderbook = ({
       </div>
     ) : null;
 
-  const c = theme === 'dark' ? colors.neutral[700] : colors.neutral[300];
+  const c = theme === 'dark' ? colors.neutral[600] : colors.neutral[300];
   const gradientStyles = `linear-gradient(${c},${c}) 24.6% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 50% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 75.2% 0/1px 100% no-repeat`;
 
   return (
@@ -320,7 +320,7 @@ export const Orderbook = ({
       data-testid="scroll"
     >
       <div
-        className="sticky top-0 grid grid-cols-4 gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-neutral-300 dark:border-neutral-700"
+        className="sticky top-0 grid grid-cols-4 gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-neutral-300 dark:border-neutral-600"
         style={{ gridAutoRows: '17px' }}
       >
         <div>{t('Bid vol')}</div>
@@ -344,7 +344,7 @@ export const Orderbook = ({
         )}
       </div>
       <div
-        className="sticky bottom-0 grid grid-cols-4 gap-2 border-t-[1px] border-neutral-300 dark:border-neutral-700 mt-2 z-10 bg-white dark:bg-black"
+        className="sticky bottom-0 grid grid-cols-4 gap-2 border-t-[1px] border-neutral-300 dark:border-neutral-600 mt-2 z-10 bg-white dark:bg-black"
         style={{ gridAutoRows: '17px' }}
       >
         <div className="col-start-2">

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

@@ -331,7 +331,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
 
   return (
     <div className="p-4">
-      <div className="mb-4">
+      <div className="mb-8">
         <p className={headerClassName}>{t('Market data')}</p>
         <Accordion panels={marketDataPanels} />
       </div>

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

@@ -24,7 +24,7 @@ import type {
 } from '../__generated__/MarketList';
 import isNil from 'lodash/isNil';
 
-export const cellClassNames = 'px-2 py-1 first:text-left text-right capitalize';
+export const cellClassNames = 'px-0 py-1 first:text-left text-right';
 
 const FeesInfo = () => {
   return (
@@ -81,12 +81,12 @@ export const columnHeadersPositionMarkets: Column[] = [
     onlyOnDetailed: false,
   },
   {
-    value: t('24h High'),
+    value: t('24h high'),
     className: `${cellClassNames} hidden xl:table-cell`,
     onlyOnDetailed: true,
   },
   {
-    value: t('24h Low'),
+    value: t('24h low'),
     className: `${cellClassNames} hidden xl:table-cell`,
     onlyOnDetailed: true,
   },
@@ -139,12 +139,12 @@ export const columnHeaders: Column[] = [
     onlyOnDetailed: false,
   },
   {
-    value: t('24h High'),
+    value: t('24h high'),
     className: `${cellClassNames} hidden xl:table-cell`,
     onlyOnDetailed: true,
   },
   {
-    value: t('24h Low'),
+    value: t('24h low'),
     className: `${cellClassNames} hidden xl:table-cell`,
     onlyOnDetailed: true,
   },
@@ -264,7 +264,7 @@ export const columns = (
       ) : (
         '-'
       ),
-      className: `${cellClassNames} hidden xl:table-cell`,
+      className: `${cellClassNames} hidden xl:table-cell font-mono`,
       onlyOnDetailed: true,
     },
     {
@@ -280,7 +280,7 @@ export const columns = (
       ) : (
         '-'
       ),
-      className: `${cellClassNames} hidden xl:table-cell`,
+      className: `${cellClassNames} hidden xl:table-cell font-mono`,
       onlyOnDetailed: true,
     },
     {
@@ -304,13 +304,13 @@ export const columns = (
               market.positionDecimalPlaces
             )
           : '-',
-      className: `${cellClassNames} hidden lg:table-cell`,
+      className: `${cellClassNames} hidden lg:table-cell font-mono`,
       onlyOnDetailed: true,
       dataTestId: 'market-volume',
     },
     {
       value: <FeesCell feeFactors={market.fees.factors} />,
-      className: `${cellClassNames} hidden xl:table-cell`,
+      className: `${cellClassNames} hidden xl:table-cell font-mono`,
       onlyOnDetailed: true,
       dataTestId: 'taker-fee',
     },
@@ -417,7 +417,7 @@ export const columnsPositionMarkets = (
       ) : (
         '-'
       ),
-      className: `${cellClassNames} hidden xl:table-cell`,
+      className: `${cellClassNames} hidden xl:table-cell font-mono`,
       onlyOnDetailed: true,
     },
     {
@@ -433,7 +433,7 @@ export const columnsPositionMarkets = (
       ) : (
         '-'
       ),
-      className: `${cellClassNames} hidden xl:table-cell`,
+      className: `${cellClassNames} hidden xl:table-cell font-mono`,
       onlyOnDetailed: true,
     },
     {
@@ -457,12 +457,12 @@ export const columnsPositionMarkets = (
               market.positionDecimalPlaces
             )
           : '-',
-      className: `${cellClassNames} hidden lg:table-cell`,
+      className: `${cellClassNames} hidden lg:table-cell font-mono`,
       onlyOnDetailed: true,
     },
     {
       value: <FeesCell feeFactors={market.fees.factors} />,
-      className: `${cellClassNames} hidden xl:table-cell`,
+      className: `${cellClassNames} hidden xl:table-cell font-mono`,
       onlyOnDetailed: true,
     },
     {
@@ -470,16 +470,16 @@ export const columnsPositionMarkets = (
         <p
           className={
             market.openVolume.includes('+')
-              ? 'text-vega-green'
+              ? 'text-vega-green-dark dark:text-vega-green'
               : market.openVolume.includes('-')
-              ? 'text-vega-red'
+              ? 'text-vega-red-dark dark:text-vega-red'
               : ''
           }
         >
           {market.openVolume}
         </p>
       ),
-      className: `${cellClassNames} hidden xxl:table-cell`,
+      className: `${cellClassNames} hidden xxl:table-cell font-mono`,
       onlyOnDetailed: true,
     },
   ];
@@ -504,23 +504,23 @@ export const FeesBreakdown = ({
   if (!feeFactors) return null;
   return (
     <dl className="grid grid-cols-2 gap-x-2">
-      <dt>{t('Infrastructure Fee')}</dt>
+      <dt>{t('Infrastructure fee')}</dt>
       <dd className="text-right">
         {formatNumberPercentage(
           new BigNumber(feeFactors.infrastructureFee).times(100)
         )}
       </dd>
-      <dt>{t('Liquidity Fee')}</dt>
+      <dt>{t('Liquidity fee')}</dt>
       <dd className="text-right">
         {formatNumberPercentage(
           new BigNumber(feeFactors.liquidityFee).times(100)
         )}
       </dd>
-      <dt>{t('Maker Fee')}</dt>
+      <dt>{t('Maker fee')}</dt>
       <dd className="text-right">
         {formatNumberPercentage(new BigNumber(feeFactors.makerFee).times(100))}
       </dd>
-      <dt>{t('Total Fees')}</dt>
+      <dt>{t('Total fees')}</dt>
       <dd className="text-right">{totalFees(feeFactors)}</dd>
     </dl>
   );

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

@@ -7,7 +7,7 @@ export const SelectMarketTableHeader = ({
   headers = columnHeaders,
 }) => {
   return (
-    <tr className="sticky top-0 z-10 border-b border-neutral-300 dark:border-neutral-700 bg-inherit">
+    <tr className="sticky top-0 z-10 border-b border-neutral-300 dark:border-neutral-600 bg-inherit">
       {headers.map(({ value, className, onlyOnDetailed }, i) => {
         const thClass = classNames(
           'font-normal text-neutral-500 dark:text-neutral-400',
@@ -37,7 +37,7 @@ export const SelectMarketTableRow = ({
 }) => {
   return (
     <tr
-      className={`hover:bg-black/10 dark:hover:bg-white/20 cursor-pointer relative h-[34px]`}
+      className={`hover:bg-neutral-200 dark:hover:bg-neutral-700 cursor-pointer relative h-[34px]`}
     >
       {columns.map(({ value, className, dataTestId, onlyOnDetailed }, i) => {
         if (!onlyOnDetailed || detailed === onlyOnDetailed) {

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

@@ -76,7 +76,7 @@ export const SelectAllMarketsTableBody = ({
   if (!data) return null;
   return (
     <>
-      <thead className="bg-neutral-200 dark:bg-neutral-800">
+      <thead className="bg-neutral-50 dark:bg-neutral-800">
         <SelectMarketTableHeader detailed={true} headers={headers} />
       </thead>
       {/* Border styles required to create space between tbody elements margin/padding dont work */}
@@ -100,7 +100,8 @@ export const SelectMarketPopover = ({
   marketName: string;
   onSelect: (id: string) => void;
 }) => {
-  const triggerClasses = 'flex items-center gap-4 whitespace-nowrap';
+  const triggerClasses =
+    'sm:text-lg md:text-xl lg:text-2xl font-medium flex items-center gap-4 whitespace-nowrap my-3 hover:text-neutral-500 dark:hover:text-neutral-300';
   const { keypair } = useVegaWallet();
   const [open, setOpen] = useState(false);
   const { data, loading: marketsLoading } = useMarketList();
@@ -149,7 +150,7 @@ export const SelectMarketPopover = ({
       trigger={
         <span className={triggerClasses}>
           {marketName}
-          <Icon name="chevron-down" className={iconClass} />
+          <Icon name="chevron-down" className={iconClass} size={6} />
         </span>
       }
     >
@@ -167,7 +168,7 @@ export const SelectMarketPopover = ({
             {keypair &&
               positionMarkets?.markets &&
               positionMarkets.markets.length > 0 && (
-                <table className="relative text-sm w-full whitespace-nowrap -mx-2">
+                <table className="relative text-sm w-full whitespace-nowrap">
                   <TableTitle>{t('My markets')}</TableTitle>
                   <SelectAllMarketsTableBody
                     data={positionMarkets.markets}
@@ -179,7 +180,7 @@ export const SelectMarketPopover = ({
                   />
                 </table>
               )}
-            <table className="relative text-sm w-full whitespace-nowrap -mx-2">
+            <table className="relative text-sm w-full whitespace-nowrap">
               <TableTitle>{t('All markets')}</TableTitle>
               <SelectAllMarketsTableBody
                 data={data}
@@ -197,7 +198,7 @@ const TableTitle = ({ children }: { children: ReactNode }) => {
   return (
     <thead>
       <tr>
-        <th className="font-normal px-2 text-left">
+        <th className="font-normal text-left">
           <h3 className="text-lg">{children}</h3>
         </th>
       </tr>

libs/orders/src/lib/components/order-list/order-edit-dialog.tsx

@@ -78,7 +78,7 @@ export const OrderEditDialog = ({
         </div>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 py-12">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 py-4">
         <form onSubmit={handleSubmit(onSubmit)} data-testid="edit-order">
           <FormGroup label={t('Entry price')} labelFor="entryPrice">
             <Input

libs/orders/src/lib/components/order-list/order-list.tsx

@@ -289,7 +289,7 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
                   onClick={() => {
                     setEditOrder(data);
                   }}
-                  size="sm"
+                  size="xs"
                 >
                   {t('Edit')}
                 </Button>
@@ -306,7 +306,7 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
             if (isOrderActive(data.status)) {
               return (
                 <Button
-                  size="sm"
+                  size="xs"
                   data-testid="cancel"
                   onClick={() => cancel(data)}
                 >

libs/positions/src/lib/positions-table.spec.tsx

@@ -47,7 +47,7 @@ it('Render correct columns', async () => {
     headers.map((h) => h.querySelector('[ref="eText"]')?.textContent?.trim())
   ).toEqual([
     'Market',
-    'Amount',
+    'Size',
     'Mark price',
     'Entry price',
     'Leverage',

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

@@ -133,7 +133,7 @@ const ButtonCell = ({
     <Button
       data-testid="close-position"
       onClick={() => onClick(data)}
-      size="sm"
+      size="xs"
     >
       {t('Close')}
     </Button>
@@ -181,7 +181,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
           }}
         />
         <AgGridColumn
-          headerName={t('Amount')}
+          headerName={t('Size')}
           field="openVolume"
           valueGetter={({ node, data }: ValueGetterParams) => {
             return node?.rowPinned ? data?.notional : data?.openVolume;

libs/positions/src/lib/positions.tsx

@@ -82,16 +82,16 @@ export const Positions = memo(
     };
     return (
       <AsyncRenderer loading={loading} error={error} data={data}>
-        <div className="p-2">
+        <div className="flex justify-between items-center p-3 pb-1">
-          <h4 className="text-lg">
+          <h4 className="text-m">
             {assetSymbol} {t('markets')}
           </h4>
-          <p>
+          <div className="text-sm text-neutral-500 dark:text-neutral-300">
             {assetSymbol} {t('balance')}:
             <span data-testid="balance" className="pl-1 font-mono">
               <AssetBalance partyId={partyId} assetSymbol={assetSymbol} />
             </span>
-          </p>
+          </div>
         </div>
         <PositionsTable
           domLayout="autoHeight"

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

@@ -26,7 +26,7 @@ export const PriceCell = React.memo(
         {valueSplit[0]}
         {valueSplit[1] ? decimalSeparator : null}
         {valueSplit[1] ? (
-          <span className="opacity-50">{valueSplit[1]}</span>
+          <span className="opacity-60">{valueSplit[1]}</span>
         ) : null}
       </span>
     );

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

@@ -13,8 +13,8 @@ import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
 import type { Trades_market_tradesConnection_edges_node } from './__generated__/Trades';
 import BigNumber from 'bignumber.js';
 
-export const UP_CLASS = 'text-vega-green';
+export const UP_CLASS = 'text-vega-green-dark dark:text-vega-green';
-export const DOWN_CLASS = 'text-vega-red';
+export const DOWN_CLASS = 'text-vega-red-dark dark:text-vega-red';
 
 const changeCellClass =
   (dataKey: string) =>

libs/ui-toolkit/src/components/ag-grid/ag-grid-dark.tsx

@@ -8,8 +8,9 @@ const agGridDarkVariables = `
     --ag-border-color: ${colors.neutral[700]};
     --ag-header-background-color: ${colors.black};
     --ag-odd-row-background-color: ${colors.black};
+    --ag-header-column-separator-color: ${colors.neutral[600]};
     --ag-row-border-color:${colors.black};
-    --ag-row-hover-color: ${colors.neutral[700]};
+    --ag-row-hover-color: ${colors.neutral[800]};
     --ag-font-size: 12px;
   }
 
@@ -21,10 +22,6 @@ const agGridDarkVariables = `
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  .ag-theme-balham-dark .ag-header-row {
-    font-weight: 400;
-  }
 `;
 
 export const AgGrid = ({

libs/ui-toolkit/src/components/ag-grid/ag-grid-light.tsx

@@ -8,8 +8,9 @@ const agGridLightVariables = `
     --ag-border-color: ${colors.neutral[300]};
     --ag-header-background-color: ${colors.white};
     --ag-odd-row-background-color: ${colors.white};
+    --ag-header-column-separator-color: ${colors.neutral[300]};
     --ag-row-border-color: ${colors.white};
-    --ag-row-hover-color: ${colors.neutral[300]};
+    --ag-row-hover-color: ${colors.neutral[100]};
     --ag-font-size: 12px;
   }
 
@@ -21,10 +22,6 @@ const agGridLightVariables = `
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  .ag-theme-balham-dark .ag-header-row {
-    font-weight: 400;
-  }
 `;
 
 export const AgGrid = ({

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

@@ -9,10 +9,10 @@ import { Icon } from '../icon';
 import classnames from 'classnames';
 
 type ButtonVariant = 'default' | 'primary' | 'secondary';
-type ButtonSize = 'lg' | 'md' | 'sm';
+type ButtonSize = 'lg' | 'md' | 'sm' | 'xs';
 
-const base =
+const base = 'inline-block uppercase border rounded-md disabled:opacity-60';
-  'inline-block uppercase border rounded-md disabled:opacity-40 transition-colors';
+const xs = 'px-2 py-0 text-sm';
 const sm = 'px-2 py-1 text-sm';
 const md = 'px-10 py-2 text-base';
 const lg = 'px-14 py-4';
@@ -21,8 +21,8 @@ const defaultClasses = [
   'text-black dark:text-white',
   'border-black dark:border-white',
   'bg-white dark:bg-black',
-  'enabled:hover:bg-neutral-200 dark:enabled:hover:bg-neutral-800',
+  'enabled:hover:bg-neutral-200 dark:enabled:hover:bg-neutral-700',
-  'enabled:active:bg-neutral-200 dark:enabled:active:bg-neutral-500',
+  'enabled:active:bg-neutral-200 dark:enabled:active:bg-neutral-700 enabled:active:border-neutral-400 dark:enabled:active:border-neutral-400',
 ];
 const primary = [
   'text-black',
@@ -54,9 +54,11 @@ const getClassname = ({
     [defaultClasses.join(' ')]: variant === 'default',
     [primary.join(' ')]: variant === 'primary',
     [secondary.join(' ')]: variant === 'secondary',
+
     [lg]: size === 'lg',
     [md]: size === 'md',
     [sm]: size === 'sm',
+    [xs]: size === 'xs',
     [fillClasses]: fill,
   });
 };

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

@@ -70,7 +70,7 @@ export function Dialog({
               </DialogPrimitives.Close>
             )}
             <div className="flex gap-4 max-w-full">
-              {icon && <div className="pt-2 fill-current">{icon}</div>}
+              {icon && <div className="fill-current">{icon}</div>}
               <div data-testid="dialog-content" className="flex-1">
                 {title && (
                   <h1

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

@@ -26,9 +26,10 @@ export const DropdownMenuTrigger = forwardRef<
   React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>
 >(({ className, children, ...props }, forwardedRef) => {
   const triggerClasses = classNames(
+    className,
     'text-sm py-1 px-2 rounded bg-transparent border border-neutral-500',
     'focus:border-black dark:focus:border-white whitespace-nowrap',
-    className
+    'hover:bg-neutral-100 dark:hover:bg-neutral-700'
   );
   return (
     <DropdownMenuPrimitive.Trigger

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

@@ -14,7 +14,7 @@ export const InputError = ({
   ...props
 }: InputErrorProps) => {
   const effectiveClassName = classNames(
-    'text-sm text-vega-pink flex items-center',
+    'text-sm text-vega-red flex items-center',
     'mt-2',
     {
       'border-danger': intent === 'danger',

libs/ui-toolkit/src/components/key-value-table/key-value-table.tsx

@@ -72,9 +72,9 @@ export const KeyValueTableRow = ({
     { 'flex-row items-center': inline },
     className
   );
-  const dtClassNames = `break-words capitalize ${dtClassName}`;
+  const dtClassNames = `break-words ${dtClassName}`;
   const ddClassNames = classNames(
-    'break-words text-neutral-500',
+    'break-words text-neutral-500 dark:text-neutral-300',
     {
       'font-mono': numerical,
     },

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

@@ -23,11 +23,11 @@ export const Popover = ({
         <PopoverPrimitive.Content
           data-testid="popover-content"
           align="start"
-          className="p-4 rounded bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200"
+          className="p-4 rounded bg-neutral-50 dark:bg-neutral-800 dark:text-neutral-200 border border-neutral-400"
           sideOffset={10}
         >
           <PopoverPrimitive.Close
-            className="px-4 py-2 absolute top-0 right-0"
+            className="px-4 py-2 absolute top-0 right-0 z-20"
             data-testid="dialog-close"
           >
             <Icon name="cross" />

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

@@ -19,7 +19,7 @@ export const Tabs = ({ children, active: activeDefaultId }: TabsProps) => {
       className="h-full grid grid-rows-[min-content_1fr]"
       onValueChange={(value) => setActiveTab(value)}
     >
-      <div className="border-b border-neutral-300 dark:border-neutral-700">
+      <div className="border-b border-neutral-300 dark:border-neutral-600">
         <TabsPrimitive.List
           className="flex flex-nowrap overflow-visible"
           role="tablist"
@@ -28,9 +28,13 @@ export const Tabs = ({ children, active: activeDefaultId }: TabsProps) => {
             if (!isValidElement(child) || child.props.hidden) return null;
             const isActive = child.props.id === activeTab;
             const triggerClass = classNames(
-              'relative px-4 py-2 border-r border-neutral-300 dark:border-neutral-700',
+              'relative px-4 py-2 border-r border-neutral-300 dark:border-neutral-600',
-              'text-black dark:text-white',
+              'uppercase',
-              'uppercase'
+              'inline-block after:content-[attr(data-testid)] after:block after:invisible after:overflow-hidden after:h-0 after:tracking-wider',
+              {
+                'text-neutral-400 dark:text-neutral-400 hover:text-neutral-500 dark:hover:text-neutral-300':
+                  !isActive,
+              }
             );
             const borderClass = classNames(
               'absolute bottom-[-1px] left-0 w-full h-0 border-b',

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

@@ -9,7 +9,7 @@ export const defaultFormElement = (hasError?: boolean) =>
     'p-2 border-2 rounded-none',
     'bg-transparent',
     'border border-neutral-500 focus:border-black dark:focus:border-white',
-    'disabled:opacity-40',
+    'disabled:opacity-60',
     {
       'border-vega-pink': hasError,
     }