fix: classname mismatch warning by setting dark class for nav (#1465)

* fix: classname mismatch warning, tidy unnecessary classes to accomodate dark nav

* chore: lint

* fix: lp test console error and fix

* fix: remove fixed bg from console-lite theme switcher

apps/console-lite/src/app/components/header/header.tsx

@@ -12,7 +12,7 @@ const Header = () => {
   } = useContext(LocalContext);
   return (
     <div
-      className="flex items-stretch pr-6 py-6 bg-black text-neutral-400"
+      className="dark flex items-stretch pr-6 py-6 bg-black text-neutral-400"
       data-testid="header"
     >
       <Logo />
@@ -21,12 +21,7 @@ const Header = () => {
           setConnectDialog={setConnect}
           setManageDialog={setManage}
         />
-        <ThemeSwitcher
-          theme={theme}
-          onToggle={toggleTheme}
-          className="-my-4"
-          fixedBg="dark"
-        />
+        <ThemeSwitcher theme={theme} onToggle={toggleTheme} className="-my-4" />
       </div>
     </div>
   );

apps/trading/components/header/header.tsx

@@ -12,7 +12,7 @@ export const Header = ({ title, children }: TradeMarketHeaderProps) => {
   return (
     <header className="w-screen xl:px-4 pt-4 border-b border-default">
       <div className="xl:flex xl:gap-4  items-start">
-        <div className="mb-4 xl:mb-0">{title}</div>
+        <div className="mb-4 xl:mb-0 px-4 xl:px-0">{title}</div>
         <div
           data-testid="header-summary"
           className="flex flex-nowrap items-start xl:flex-1 w-full overflow-x-auto text-xs "

apps/trading/components/navbar/navbar.tsx

@@ -20,7 +20,7 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
   }));
   const tradingPath = marketId ? `/markets/${marketId}` : '/markets';
   return (
-    <div className="px-4 flex items-stretch border-b border-default bg-black text-white">
+    <div className="dark px-4 flex items-stretch border-b border-default bg-black text-white">
       <div className="flex gap-4 mr-4 items-center h-full">
         <Link href="/" passHref={true}>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
@@ -28,7 +28,7 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
             <Vega className="w-13" />
           </a>
         </Link>
-        <NetworkSwitcher theme="dark" />
+        <NetworkSwitcher />
       </div>
       <nav className="flex items-center">
         {[
@@ -43,12 +43,7 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
         ))}
       </nav>
       <div className="flex items-center gap-2 ml-auto">
-        <ThemeSwitcher
-          theme={theme}
-          onToggle={toggleTheme}
-          sunClassName="text-white"
-          fixedBg="dark"
-        />
+        <ThemeSwitcher theme={theme} onToggle={toggleTheme} />
         <VegaWalletConnectButton
           setConnectDialog={(open) => update({ connectDialog: open })}
         />

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

@@ -9,7 +9,6 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '../../hooks/use-environment';
 import { Networks } from '../../types';
-import classNames from 'classnames';
 
 export const envNameMapping: Record<Networks, string> = {
   [Networks.CUSTOM]: t('Custom'),
@@ -69,7 +68,7 @@ const NetworkLabel = ({
   </span>
 );
 
-export const NetworkSwitcher = ({ theme }: { theme?: 'dark' | 'light' }) => {
+export const NetworkSwitcher = () => {
   const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
   const [isOpen, setOpen] = useState(false);
   const [isAdvancedView, setAdvancedView] = useState(false);
@@ -84,16 +83,9 @@ export const NetworkSwitcher = ({ theme }: { theme?: 'dark' | 'light' }) => {
     [setOpen, setAdvancedView]
   );
 
-  const dropdownTriggerClasses = classNames({
-    'text-black hover:!bg-neutral-300': theme === 'light',
-    'text-white hover:!bg-neutral-700': theme === 'dark',
-  });
-
   return (
     <DropdownMenu open={isOpen} onOpenChange={handleOpen}>
-      <DropdownMenuTrigger className={dropdownTriggerClasses}>
-        {envTriggerMapping[VEGA_ENV]}
-      </DropdownMenuTrigger>
+      <DropdownMenuTrigger>{envTriggerMapping[VEGA_ENV]}</DropdownMenuTrigger>
       <DropdownMenuContent align="start">
         {!isAdvancedView && (
           <>

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

@@ -1,5 +1,5 @@
 import LiquidityTable from './liquidity-table';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { LiquidityProvisionStatus } from '@vegaprotocol/types';
 import type { LiquidityProvision } from './liquidity-data-provider';
 
@@ -27,27 +27,28 @@ describe('LiquidityTable', () => {
   });
 
   it('should render correct columns', async () => {
-    act(async () => {
+    await act(async () => {
       render(<LiquidityTable data={singleRowData} />);
-      await waitFor(async () => {
-        const headers = await screen.getAllByRole('columnheader');
-        expect(headers).toHaveLength(9);
-        expect(
-          headers.map((h) =>
-            h.querySelector('[ref="eText"]')?.textContent?.trim()
-          )
-        ).toEqual([
-          'Party',
-          'Average entry valuation',
-          'Updated',
-          'Created',
-          'Supplied (siskas)',
-          'Obligation (siskas)',
-          'Share',
-          'Fee',
-          'Status',
-        ]);
-      });
     });
+
+    const headers = await screen.getAllByRole('columnheader');
+
+    const headerTexts = headers.map((h) =>
+      h.querySelector('[ref="eText"]')?.textContent?.trim()
+    );
+    const expectedHeaders = [
+      'Party',
+      'Commitment ()',
+      'Share',
+      'Proposed fee',
+      'Average entry valuation',
+      'Obligation',
+      'Supplied',
+      'Status',
+      'Created',
+      'Updated',
+    ];
+    expect(headers).toHaveLength(expectedHeaders.length);
+    expect(headerTexts).toEqual(expectedHeaders);
   });
 });

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

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import React from 'react';
 import { SunIcon, MoonIcon } from './icons';
 
@@ -6,28 +5,12 @@ export const ThemeSwitcher = ({
   theme,
   onToggle,
   className,
-  sunClassName,
-  moonClassName,
-  fixedBg,
 }: {
   theme: 'light' | 'dark';
   onToggle: () => void;
   className?: string;
-  sunClassName?: string;
-  moonClassName?: string;
-  fixedBg?: 'light' | 'dark';
 }) => {
-  const sharedClasses = classNames({
-    'text-neutral-800 dark:text-neutral-300': !fixedBg,
-    'text-neutral-800': fixedBg === 'light',
-    'text-neutral-300': fixedBg === 'dark',
-  });
-  const sunClasses = classNames(sharedClasses, sunClassName, {
-    hidden: theme === 'light',
-  });
-  const moonClasses = classNames(sharedClasses, moonClassName, {
-    hidden: theme === 'dark',
-  });
+  const classes = 'text-neutral-800 dark:text-neutral-300';
   return (
     <button
       type="button"
@@ -35,12 +18,16 @@ export const ThemeSwitcher = ({
       className={className}
       data-testid="theme-switcher"
     >
-      <span className={sunClasses}>
-        <SunIcon />
-      </span>
-      <span className={moonClasses}>
-        <MoonIcon />
-      </span>
+      {theme === 'dark' && (
+        <span className={classes}>
+          <SunIcon />
+        </span>
+      )}
+      {theme === 'light' && (
+        <span className={classes}>
+          <MoonIcon />
+        </span>
+      )}
     </button>
   );
 };