-
-
+
+
+
+
+ {/* 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) {
-
+
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 (
void;
className?: string;
}) => {
- const classes = 'text-neutral-800 dark:text-neutral-300';
return (
);
};