diff --git a/apps/trading/assets/green-cloud.png b/apps/trading/assets/green-cloud.png new file mode 100644 index 000000000..08eeb94a5 Binary files /dev/null and b/apps/trading/assets/green-cloud.png differ diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx index c8a7a6478..ee3b018a7 100644 --- a/apps/trading/components/navbar/navbar.tsx +++ b/apps/trading/components/navbar/navbar.tsx @@ -9,13 +9,20 @@ import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit'; import { Vega } from '../icons/vega'; import type { HTMLAttributeAnchorTarget } from 'react'; import { useEffect, useState } from 'react'; +import testnetBg from '../../assets/green-cloud.png'; +type NavbarTheme = 'inherit' | 'dark' | 'yellow'; interface NavbarProps { theme: 'light' | 'dark'; toggleTheme: () => void; + navbarTheme?: NavbarTheme; } -export const Navbar = ({ theme, toggleTheme }: NavbarProps) => { +export const Navbar = ({ + theme, + toggleTheme, + navbarTheme = 'inherit', +}: NavbarProps) => { const { VEGA_TOKEN_URL } = useEnvironment(); const { marketId } = useGlobalStore((store) => ({ marketId: store.marketId, @@ -28,30 +35,60 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => { } }, [marketId]); + const themeWrapperClasses = classNames({ + dark: navbarTheme === 'dark', + }); + + const isYellow = navbarTheme === 'yellow'; + const navbarClasses = classNames( + 'flex items-stretch border-b px-4 border-default', + { + 'dark:bg-black dark:text-white': !isYellow, + 'bg-vega-yellow text-black bg-right-top bg-no-repeat bg-contain': + isYellow, + } + ); + return ( -
-
- - {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} - - - - - -
- -
- - +
+
+
+ + {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} + + + + + +
+ +
+ + +
); @@ -60,6 +97,7 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => { interface NavLinkProps { name: string; path: string; + navbarTheme: NavbarTheme; testId?: string; alignRight?: boolean; target?: HTMLAttributeAnchorTarget; @@ -68,6 +106,7 @@ interface NavLinkProps { const NavLink = ({ name, path, + navbarTheme, alignRight, target, testId = name, @@ -75,18 +114,24 @@ const NavLink = ({ const router = useRouter(); const isActive = router.asPath?.includes(path); const linkClasses = classNames('mx-2 py-3 self-end relative', { - 'text-white cursor-default': isActive, - 'text-neutral-400 hover:text-neutral-300': !isActive, + 'cursor-default': isActive, + 'text-black dark:text-white': isActive && navbarTheme !== 'yellow', + 'text-neutral-500 dark:text-neutral-400 hover:text-black dark:hover:text-neutral-300': + !isActive && navbarTheme !== 'yellow', 'ml-auto': alignRight, + 'text-black': isActive && navbarTheme === 'yellow', + 'text-black/60 hover:text-black': !isActive && navbarTheme === 'yellow', + }); + const borderClasses = classNames('absolute h-1 w-full bottom-[-1px] left-0', { + 'bg-black dark:bg-vega-yellow': navbarTheme !== 'yellow', + 'bg-black': navbarTheme === 'yellow', }); return ( {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} {name} - {isActive && ( - - )} + {isActive && } ); diff --git a/apps/trading/pages/_app.page.tsx b/apps/trading/pages/_app.page.tsx index c0f0f1952..f290d46bf 100644 --- a/apps/trading/pages/_app.page.tsx +++ b/apps/trading/pages/_app.page.tsx @@ -6,6 +6,7 @@ import { VegaWalletProvider } from '@vegaprotocol/wallet'; import { EnvironmentProvider, envTriggerMapping, + Networks, useEnvironment, } from '@vegaprotocol/environment'; import { AppLoader } from '../components/app-loader'; @@ -38,6 +39,7 @@ const Title = () => { }; function AppBody({ Component, pageProps }: AppProps) { + const { VEGA_ENV } = useEnvironment(); const [theme, toggleTheme] = useThemeSwitcher(); return ( @@ -47,7 +49,11 @@ function AppBody({ Component, pageProps }: AppProps) { <div className="h-full relative dark:bg-black dark:text-white z-0 grid grid-rows-[min-content,1fr,min-content]"> <AppLoader> - <Navbar theme={theme} toggleTheme={toggleTheme} /> + <Navbar + theme={theme} + toggleTheme={toggleTheme} + navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} + /> <main data-testid={pageProps.page}> <Component {...pageProps} /> </main> diff --git a/libs/ui-toolkit/src/components/button/button.tsx b/libs/ui-toolkit/src/components/button/button.tsx index 7a7ba1e22..b22c2fa33 100644 --- a/libs/ui-toolkit/src/components/button/button.tsx +++ b/libs/ui-toolkit/src/components/button/button.tsx @@ -18,12 +18,10 @@ const md = 'px-10 py-2 text-base'; const lg = 'px-14 py-4'; const fillClasses = 'block w-full'; 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-700', - 'enabled:active:bg-neutral-200 dark:enabled:active:bg-neutral-700', - 'enabled:active:border-neutral-400', + 'border-neutral-500', + 'bg-transparent', + 'enabled:hover:bg-neutral-500/20 dark:enabled:hover:bg-neutral-500/40', + 'enabled:active:bg-neutral-500/20 dark:enabled:active:bg-neutral-500/40', ]; const primary = [ 'text-black', diff --git a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx index 845fd0e39..906efc934 100644 --- a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx +++ b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx @@ -27,9 +27,8 @@ export const DropdownMenuTrigger = forwardRef< >(({ 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', - 'hover:bg-neutral-200 dark:hover:bg-neutral-700' + 'text-sm py-1 px-2 rounded bg-transparent border border-neutral-500 whitespace-nowrap', + 'hover:bg-neutral-500/20 dark:hover:bg-neutral-500/40' ); return ( <DropdownMenuPrimitive.Trigger 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 061f0bec8..771d48899 100644 --- a/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx +++ b/libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx @@ -10,24 +10,15 @@ export const ThemeSwitcher = ({ onToggle: () => void; className?: string; }) => { - const classes = 'text-neutral-800 dark:text-neutral-300'; return ( <button type="button" - onClick={() => onToggle()} + onClick={onToggle} className={className} data-testid="theme-switcher" > - {theme === 'dark' && ( - <span className={classes}> - <SunIcon /> - </span> - )} - {theme === 'light' && ( - <span className={classes}> - <MoonIcon /> - </span> - )} + {theme === 'dark' && <SunIcon />} + {theme === 'light' && <MoonIcon />} </button> ); };