vega-frontend-monorepo/apps/trading/components/navbar/navbar.tsx

52 lines
1.4 KiB
TypeScript
Raw Normal View History

import { useRouter } from 'next/router';
import { Vega } from '../icons/vega';
import Link from 'next/link';
import { t } from '@vegaprotocol/react-helpers';
feat(#447): 447 - UI toolkit and theme updates * feat: 447 Refactored 'progress' intent to be 'prompt' as now white. Added yellow 'selected' intent * feat: 447 Colour consolidation * feat: 447 Colour consolidation extra renaming * feat: 447 Fixing specified red colours * feat: 447 Removed unused darker red * feat: 447 Documenting additional colours in storybook * feat: 447 Buttons updated (except 'accent', which will probably get removed when navs built) * feat: 447 Text inputs updated * feat:frontend-monorepo-447: Trading nav * feat:frontend-monorepo-447: Updated toggle button colours * feat:frontend-monorepo-447: Custom checkboxes * feat:frontend-monorepo-447: Tweaks to radio buttons * feat:frontend-monorepo-447: Input dates get dark color scheme in dark mode * feat:frontend-monorepo-447: Dropdown updates * feat:frontend-monorepo-447: Icon menu * feat:frontend-monorepo-447: Focus visual styles moved to focus-visible for radios and toggle * feat:frontend-monorepo-447: Tweak to focus styles for text input and textarea * feat:frontend-monorepo-447: Labeled input * feat:frontend-monorepo-447: Labeled input description red when in error * feat:frontend-monorepo-447: Tooltip visual update * feat:frontend-monorepo-447: Added disabled state to checkbox * feat:frontend-monorepo-447: Custom select with radix * feat:frontend-monorepo-447: Reverted back to native Select for a11y concerns * feat:frontend-monorepo-447: Added visual cue for dropdown items when multiple can be selected * feat:frontend-monorepo-447: Removed shadow from buttons in Explorer where it looked wrong * feat:frontend-monorepo-447: Added box shadow classes into tailwind theme * feat:frontend-monorepo-447: Colour primitives documentation updated * feat:frontend-monorepo-447: Cleaning up box shadow use further * feat:frontend-monorepo-447: Intents util updated * feat:frontend-monorepo-447: Dialog component updated * feat:frontend-monorepo-447: Callout component updated * feat:frontend-monorepo-447: Adjusted apps to handle toolkit changes * feat:frontend-monorepo-447: Moved tabs to ui-toolkit and styled * feat:frontend-monorepo-447: Fixed ui-toolkit tests * feat:frontend-monorepo-447: Token eth wallet made dark to support new buttons * feat:frontend-monorepo-447: Ran prettier * frontend-monorepo-447: Simplified button class functions and exported for use on other elements * frontend-monorepo-447: Used newly exported button classes on Link elements in eth-wallet * frontend-monorepo-447: Moved trading nav from ui-toolkit to trading app * frontend-monorepo-447: Simplified intents and updated stories * frontend-monorepo-447: Using classnames in requested spot * frontend-monorepo-447: Removed unnecessary 'asChild' prop on dropdown triggers * frontend-monorepo-447: Made use of the XPrimitive Radix naming convention * frontend-monorepo-447: Simplified types in 'getButtonClasses' * frontend-monorepo-447: Added 'asChild' to dropdown trigger to avoid nested buttons * frontend-monorepo-447: Moved input label and description into Formgroup component. Refactored based on tweaked structure * frontend-monorepo-447: Externally linked input label * frontend-monorepo-447: Adding correct text colours to Intent.None backgrounds * frontend-monorepo-447: Improved intent function name * frontend-monorepo-447: Removed new navbar until implementation ticket is picked up * frontend-monorepo-447: using testing-library/user-event for tab click unit tests * frontend-monorepo-447: Removed unused button import * frontend-monorepo-447: Little extra use of classnames in form-group.tsx * feat: make navbar pink for light mode * fix: problem with theme not switching when dependent in js on theme value * fix: bg of row hover * fix: dont use vega pink for sell red * fix: type error in generate orders func * fix: lint Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-24 03:16:01 +00:00
import classNames from 'classnames';
export const Navbar = () => {
return (
<nav className="flex items-center">
<Link href="/" passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="px-[26px]">
<Vega className="fill-white" />
</a>
</Link>
{[
{ name: t('Trading'), path: '/markets' },
{ name: t('Portfolio'), path: '/portfolio' },
].map((route) => (
<NavLink key={route.path} {...route} />
))}
</nav>
);
};
interface NavLinkProps {
name: string;
path: string;
exact?: boolean;
feat: trading page market summary & select markets modal opening from market title & fix: positions table realised PnL (#505) * feat: [#456] select markets modal opening from market title * feat: add a global zustand store for managing connect dialogs and landing dialog * feat: add tests * feat: [#456] make arrow configurable * feat: [#456] make arrow configurable * feat: [#456] trading tab active only on portfolio * chore: update tranches Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix: [#445] shallow routing from index (#484) * fix: [#445] shallow routing from index * fix: [#445] use link to redirect to market - an attempt to fix reload * fix: [#445] remove stretched link from last link - it makes all the other links unusable * fix: [#445] fix lint on select market list - remove stretched link * fix: [#456] put everything in landing folder to avoid conflicts * fix: remove condition for cypress for auto connecting * feat: [#456] add global store and fix href routing * feat: [#456] add global store and fix href routing * feat: [#456] add one more test * feat: [#154] pull market data summary * feat: [#154] move header above the trade grid child sections * feat: [#154] flex oerflow and styling updates for market summary * feat: [#154] fix styling * fix: [154] fix cyp tests and styling * fix: [#154] fix markets navigation cypress step * fix: [#154] fix for navigate to markets link * fix: failing tests from market change * fix: [#154] set nav items based on market id and show last viewed market on landing * fix: [#412] invalid decimal place on realised PnL field * fix: [#154] remove redundant curly braces * fix: [#154] show hyphen on volume if market data is undefined Co-authored-by: Matthew Russell <mattrussell36@gmail.com> Co-authored-by: dexturr <dexturr@users.noreply.github.com> Co-authored-by: Joe <joe@vega.xyz>
2022-06-06 16:19:56 +00:00
testId?: string;
}
const NavLink = ({ name, path, exact, testId = name }: NavLinkProps) => {
const router = useRouter();
const isActive =
router.asPath === path || (!exact && router.asPath.startsWith(path));
feat(#447): 447 - UI toolkit and theme updates * feat: 447 Refactored 'progress' intent to be 'prompt' as now white. Added yellow 'selected' intent * feat: 447 Colour consolidation * feat: 447 Colour consolidation extra renaming * feat: 447 Fixing specified red colours * feat: 447 Removed unused darker red * feat: 447 Documenting additional colours in storybook * feat: 447 Buttons updated (except 'accent', which will probably get removed when navs built) * feat: 447 Text inputs updated * feat:frontend-monorepo-447: Trading nav * feat:frontend-monorepo-447: Updated toggle button colours * feat:frontend-monorepo-447: Custom checkboxes * feat:frontend-monorepo-447: Tweaks to radio buttons * feat:frontend-monorepo-447: Input dates get dark color scheme in dark mode * feat:frontend-monorepo-447: Dropdown updates * feat:frontend-monorepo-447: Icon menu * feat:frontend-monorepo-447: Focus visual styles moved to focus-visible for radios and toggle * feat:frontend-monorepo-447: Tweak to focus styles for text input and textarea * feat:frontend-monorepo-447: Labeled input * feat:frontend-monorepo-447: Labeled input description red when in error * feat:frontend-monorepo-447: Tooltip visual update * feat:frontend-monorepo-447: Added disabled state to checkbox * feat:frontend-monorepo-447: Custom select with radix * feat:frontend-monorepo-447: Reverted back to native Select for a11y concerns * feat:frontend-monorepo-447: Added visual cue for dropdown items when multiple can be selected * feat:frontend-monorepo-447: Removed shadow from buttons in Explorer where it looked wrong * feat:frontend-monorepo-447: Added box shadow classes into tailwind theme * feat:frontend-monorepo-447: Colour primitives documentation updated * feat:frontend-monorepo-447: Cleaning up box shadow use further * feat:frontend-monorepo-447: Intents util updated * feat:frontend-monorepo-447: Dialog component updated * feat:frontend-monorepo-447: Callout component updated * feat:frontend-monorepo-447: Adjusted apps to handle toolkit changes * feat:frontend-monorepo-447: Moved tabs to ui-toolkit and styled * feat:frontend-monorepo-447: Fixed ui-toolkit tests * feat:frontend-monorepo-447: Token eth wallet made dark to support new buttons * feat:frontend-monorepo-447: Ran prettier * frontend-monorepo-447: Simplified button class functions and exported for use on other elements * frontend-monorepo-447: Used newly exported button classes on Link elements in eth-wallet * frontend-monorepo-447: Moved trading nav from ui-toolkit to trading app * frontend-monorepo-447: Simplified intents and updated stories * frontend-monorepo-447: Using classnames in requested spot * frontend-monorepo-447: Removed unnecessary 'asChild' prop on dropdown triggers * frontend-monorepo-447: Made use of the XPrimitive Radix naming convention * frontend-monorepo-447: Simplified types in 'getButtonClasses' * frontend-monorepo-447: Added 'asChild' to dropdown trigger to avoid nested buttons * frontend-monorepo-447: Moved input label and description into Formgroup component. Refactored based on tweaked structure * frontend-monorepo-447: Externally linked input label * frontend-monorepo-447: Adding correct text colours to Intent.None backgrounds * frontend-monorepo-447: Improved intent function name * frontend-monorepo-447: Removed new navbar until implementation ticket is picked up * frontend-monorepo-447: using testing-library/user-event for tab click unit tests * frontend-monorepo-447: Removed unused button import * frontend-monorepo-447: Little extra use of classnames in form-group.tsx * feat: make navbar pink for light mode * fix: problem with theme not switching when dependent in js on theme value * fix: bg of row hover * fix: dont use vega pink for sell red * fix: type error in generate orders func * fix: lint Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-24 03:16:01 +00:00
const linkClasses = classNames(
'px-16 py-6 border-0 self-end',
'uppercase xs:text-ui sm:text-body-large md:text-h5 lg:text-h4',
{
'bg-vega-pink dark:bg-vega-yellow text-white dark:text-black': isActive,
'text-white': !isActive,
feat(#447): 447 - UI toolkit and theme updates * feat: 447 Refactored 'progress' intent to be 'prompt' as now white. Added yellow 'selected' intent * feat: 447 Colour consolidation * feat: 447 Colour consolidation extra renaming * feat: 447 Fixing specified red colours * feat: 447 Removed unused darker red * feat: 447 Documenting additional colours in storybook * feat: 447 Buttons updated (except 'accent', which will probably get removed when navs built) * feat: 447 Text inputs updated * feat:frontend-monorepo-447: Trading nav * feat:frontend-monorepo-447: Updated toggle button colours * feat:frontend-monorepo-447: Custom checkboxes * feat:frontend-monorepo-447: Tweaks to radio buttons * feat:frontend-monorepo-447: Input dates get dark color scheme in dark mode * feat:frontend-monorepo-447: Dropdown updates * feat:frontend-monorepo-447: Icon menu * feat:frontend-monorepo-447: Focus visual styles moved to focus-visible for radios and toggle * feat:frontend-monorepo-447: Tweak to focus styles for text input and textarea * feat:frontend-monorepo-447: Labeled input * feat:frontend-monorepo-447: Labeled input description red when in error * feat:frontend-monorepo-447: Tooltip visual update * feat:frontend-monorepo-447: Added disabled state to checkbox * feat:frontend-monorepo-447: Custom select with radix * feat:frontend-monorepo-447: Reverted back to native Select for a11y concerns * feat:frontend-monorepo-447: Added visual cue for dropdown items when multiple can be selected * feat:frontend-monorepo-447: Removed shadow from buttons in Explorer where it looked wrong * feat:frontend-monorepo-447: Added box shadow classes into tailwind theme * feat:frontend-monorepo-447: Colour primitives documentation updated * feat:frontend-monorepo-447: Cleaning up box shadow use further * feat:frontend-monorepo-447: Intents util updated * feat:frontend-monorepo-447: Dialog component updated * feat:frontend-monorepo-447: Callout component updated * feat:frontend-monorepo-447: Adjusted apps to handle toolkit changes * feat:frontend-monorepo-447: Moved tabs to ui-toolkit and styled * feat:frontend-monorepo-447: Fixed ui-toolkit tests * feat:frontend-monorepo-447: Token eth wallet made dark to support new buttons * feat:frontend-monorepo-447: Ran prettier * frontend-monorepo-447: Simplified button class functions and exported for use on other elements * frontend-monorepo-447: Used newly exported button classes on Link elements in eth-wallet * frontend-monorepo-447: Moved trading nav from ui-toolkit to trading app * frontend-monorepo-447: Simplified intents and updated stories * frontend-monorepo-447: Using classnames in requested spot * frontend-monorepo-447: Removed unnecessary 'asChild' prop on dropdown triggers * frontend-monorepo-447: Made use of the XPrimitive Radix naming convention * frontend-monorepo-447: Simplified types in 'getButtonClasses' * frontend-monorepo-447: Added 'asChild' to dropdown trigger to avoid nested buttons * frontend-monorepo-447: Moved input label and description into Formgroup component. Refactored based on tweaked structure * frontend-monorepo-447: Externally linked input label * frontend-monorepo-447: Adding correct text colours to Intent.None backgrounds * frontend-monorepo-447: Improved intent function name * frontend-monorepo-447: Removed new navbar until implementation ticket is picked up * frontend-monorepo-447: using testing-library/user-event for tab click unit tests * frontend-monorepo-447: Removed unused button import * frontend-monorepo-447: Little extra use of classnames in form-group.tsx * feat: make navbar pink for light mode * fix: problem with theme not switching when dependent in js on theme value * fix: bg of row hover * fix: dont use vega pink for sell red * fix: type error in generate orders func * fix: lint Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-24 03:16:01 +00:00
}
);
return (
feat(#447): 447 - UI toolkit and theme updates * feat: 447 Refactored 'progress' intent to be 'prompt' as now white. Added yellow 'selected' intent * feat: 447 Colour consolidation * feat: 447 Colour consolidation extra renaming * feat: 447 Fixing specified red colours * feat: 447 Removed unused darker red * feat: 447 Documenting additional colours in storybook * feat: 447 Buttons updated (except 'accent', which will probably get removed when navs built) * feat: 447 Text inputs updated * feat:frontend-monorepo-447: Trading nav * feat:frontend-monorepo-447: Updated toggle button colours * feat:frontend-monorepo-447: Custom checkboxes * feat:frontend-monorepo-447: Tweaks to radio buttons * feat:frontend-monorepo-447: Input dates get dark color scheme in dark mode * feat:frontend-monorepo-447: Dropdown updates * feat:frontend-monorepo-447: Icon menu * feat:frontend-monorepo-447: Focus visual styles moved to focus-visible for radios and toggle * feat:frontend-monorepo-447: Tweak to focus styles for text input and textarea * feat:frontend-monorepo-447: Labeled input * feat:frontend-monorepo-447: Labeled input description red when in error * feat:frontend-monorepo-447: Tooltip visual update * feat:frontend-monorepo-447: Added disabled state to checkbox * feat:frontend-monorepo-447: Custom select with radix * feat:frontend-monorepo-447: Reverted back to native Select for a11y concerns * feat:frontend-monorepo-447: Added visual cue for dropdown items when multiple can be selected * feat:frontend-monorepo-447: Removed shadow from buttons in Explorer where it looked wrong * feat:frontend-monorepo-447: Added box shadow classes into tailwind theme * feat:frontend-monorepo-447: Colour primitives documentation updated * feat:frontend-monorepo-447: Cleaning up box shadow use further * feat:frontend-monorepo-447: Intents util updated * feat:frontend-monorepo-447: Dialog component updated * feat:frontend-monorepo-447: Callout component updated * feat:frontend-monorepo-447: Adjusted apps to handle toolkit changes * feat:frontend-monorepo-447: Moved tabs to ui-toolkit and styled * feat:frontend-monorepo-447: Fixed ui-toolkit tests * feat:frontend-monorepo-447: Token eth wallet made dark to support new buttons * feat:frontend-monorepo-447: Ran prettier * frontend-monorepo-447: Simplified button class functions and exported for use on other elements * frontend-monorepo-447: Used newly exported button classes on Link elements in eth-wallet * frontend-monorepo-447: Moved trading nav from ui-toolkit to trading app * frontend-monorepo-447: Simplified intents and updated stories * frontend-monorepo-447: Using classnames in requested spot * frontend-monorepo-447: Removed unnecessary 'asChild' prop on dropdown triggers * frontend-monorepo-447: Made use of the XPrimitive Radix naming convention * frontend-monorepo-447: Simplified types in 'getButtonClasses' * frontend-monorepo-447: Added 'asChild' to dropdown trigger to avoid nested buttons * frontend-monorepo-447: Moved input label and description into Formgroup component. Refactored based on tweaked structure * frontend-monorepo-447: Externally linked input label * frontend-monorepo-447: Adding correct text colours to Intent.None backgrounds * frontend-monorepo-447: Improved intent function name * frontend-monorepo-447: Removed new navbar until implementation ticket is picked up * frontend-monorepo-447: using testing-library/user-event for tab click unit tests * frontend-monorepo-447: Removed unused button import * frontend-monorepo-447: Little extra use of classnames in form-group.tsx * feat: make navbar pink for light mode * fix: problem with theme not switching when dependent in js on theme value * fix: bg of row hover * fix: dont use vega pink for sell red * fix: type error in generate orders func * fix: lint Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-24 03:16:01 +00:00
<Link data-testid={testId} href={path} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
feat(#447): 447 - UI toolkit and theme updates * feat: 447 Refactored 'progress' intent to be 'prompt' as now white. Added yellow 'selected' intent * feat: 447 Colour consolidation * feat: 447 Colour consolidation extra renaming * feat: 447 Fixing specified red colours * feat: 447 Removed unused darker red * feat: 447 Documenting additional colours in storybook * feat: 447 Buttons updated (except 'accent', which will probably get removed when navs built) * feat: 447 Text inputs updated * feat:frontend-monorepo-447: Trading nav * feat:frontend-monorepo-447: Updated toggle button colours * feat:frontend-monorepo-447: Custom checkboxes * feat:frontend-monorepo-447: Tweaks to radio buttons * feat:frontend-monorepo-447: Input dates get dark color scheme in dark mode * feat:frontend-monorepo-447: Dropdown updates * feat:frontend-monorepo-447: Icon menu * feat:frontend-monorepo-447: Focus visual styles moved to focus-visible for radios and toggle * feat:frontend-monorepo-447: Tweak to focus styles for text input and textarea * feat:frontend-monorepo-447: Labeled input * feat:frontend-monorepo-447: Labeled input description red when in error * feat:frontend-monorepo-447: Tooltip visual update * feat:frontend-monorepo-447: Added disabled state to checkbox * feat:frontend-monorepo-447: Custom select with radix * feat:frontend-monorepo-447: Reverted back to native Select for a11y concerns * feat:frontend-monorepo-447: Added visual cue for dropdown items when multiple can be selected * feat:frontend-monorepo-447: Removed shadow from buttons in Explorer where it looked wrong * feat:frontend-monorepo-447: Added box shadow classes into tailwind theme * feat:frontend-monorepo-447: Colour primitives documentation updated * feat:frontend-monorepo-447: Cleaning up box shadow use further * feat:frontend-monorepo-447: Intents util updated * feat:frontend-monorepo-447: Dialog component updated * feat:frontend-monorepo-447: Callout component updated * feat:frontend-monorepo-447: Adjusted apps to handle toolkit changes * feat:frontend-monorepo-447: Moved tabs to ui-toolkit and styled * feat:frontend-monorepo-447: Fixed ui-toolkit tests * feat:frontend-monorepo-447: Token eth wallet made dark to support new buttons * feat:frontend-monorepo-447: Ran prettier * frontend-monorepo-447: Simplified button class functions and exported for use on other elements * frontend-monorepo-447: Used newly exported button classes on Link elements in eth-wallet * frontend-monorepo-447: Moved trading nav from ui-toolkit to trading app * frontend-monorepo-447: Simplified intents and updated stories * frontend-monorepo-447: Using classnames in requested spot * frontend-monorepo-447: Removed unnecessary 'asChild' prop on dropdown triggers * frontend-monorepo-447: Made use of the XPrimitive Radix naming convention * frontend-monorepo-447: Simplified types in 'getButtonClasses' * frontend-monorepo-447: Added 'asChild' to dropdown trigger to avoid nested buttons * frontend-monorepo-447: Moved input label and description into Formgroup component. Refactored based on tweaked structure * frontend-monorepo-447: Externally linked input label * frontend-monorepo-447: Adding correct text colours to Intent.None backgrounds * frontend-monorepo-447: Improved intent function name * frontend-monorepo-447: Removed new navbar until implementation ticket is picked up * frontend-monorepo-447: using testing-library/user-event for tab click unit tests * frontend-monorepo-447: Removed unused button import * frontend-monorepo-447: Little extra use of classnames in form-group.tsx * feat: make navbar pink for light mode * fix: problem with theme not switching when dependent in js on theme value * fix: bg of row hover * fix: dont use vega pink for sell red * fix: type error in generate orders func * fix: lint Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-24 03:16:01 +00:00
<a className={linkClasses}>{name}</a>
</Link>
);
};