From c4468d507b1248ab27126410d46a38125dd2b152 Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Tue, 27 Sep 2022 02:18:41 -0400 Subject: [PATCH] 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 --- .../src/app/components/header/header.tsx | 9 +--- apps/trading/components/header/header.tsx | 2 +- apps/trading/components/navbar/navbar.tsx | 11 ++--- .../network-switcher/network-switcher.tsx | 12 +----- .../src/lib/liquidity-table.spec.tsx | 43 ++++++++++--------- .../theme-switcher/theme-switcher.tsx | 35 +++++---------- 6 files changed, 41 insertions(+), 71 deletions(-) diff --git a/apps/console-lite/src/app/components/header/header.tsx b/apps/console-lite/src/app/components/header/header.tsx index ebc7b8410..e589cd01d 100644 --- a/apps/console-lite/src/app/components/header/header.tsx +++ b/apps/console-lite/src/app/components/header/header.tsx @@ -12,7 +12,7 @@ const Header = () => { } = useContext(LocalContext); return (
@@ -21,12 +21,7 @@ const Header = () => { setConnectDialog={setConnect} setManageDialog={setManage} /> - +
); diff --git a/apps/trading/components/header/header.tsx b/apps/trading/components/header/header.tsx index 07442bb5a..22fb94dab 100644 --- a/apps/trading/components/header/header.tsx +++ b/apps/trading/components/header/header.tsx @@ -12,7 +12,7 @@ export const Header = ({ title, children }: TradeMarketHeaderProps) => { return (
-
{title}
+
{title}
{ })); const tradingPath = marketId ? `/markets/${marketId}` : '/markets'; return ( -
+
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} @@ -28,7 +28,7 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => { - +
- + update({ connectDialog: open })} /> diff --git a/libs/environment/src/components/network-switcher/network-switcher.tsx b/libs/environment/src/components/network-switcher/network-switcher.tsx index f933af496..9836c2dd1 100644 --- a/libs/environment/src/components/network-switcher/network-switcher.tsx +++ b/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.CUSTOM]: t('Custom'), @@ -69,7 +68,7 @@ const NetworkLabel = ({ ); -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 ( - - {envTriggerMapping[VEGA_ENV]} - + {envTriggerMapping[VEGA_ENV]} {!isAdvancedView && ( <> diff --git a/libs/liquidity/src/lib/liquidity-table.spec.tsx b/libs/liquidity/src/lib/liquidity-table.spec.tsx index f96ef2e3e..78dc9aadf 100644 --- a/libs/liquidity/src/lib/liquidity-table.spec.tsx +++ b/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(); - 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); }); }); diff --git a/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx b/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx index 783b0f9d1..061f0bec8 100644 --- a/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx +++ b/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 ( ); };