From 51712f4c20b4cc1994dc416aada487bc7ec1bfba Mon Sep 17 00:00:00 2001 From: macqbat Date: Tue, 28 Jun 2022 11:57:47 +0200 Subject: [PATCH] Feat/526 consolelite design update market list (#635) * feat: [console-lite] - market list - improve list view * feat: [console-lite] - market list - add column sorting, improve ag-grid styles * feat: [console-lite] - market list - remove unnecessary changes * feat: [console-lite] - market list - fixes for eslint errors * feat: [console-lite] - market list - remove redundant changes * feat: [console-lite] - market list - add resize handler and other small improvements Co-authored-by: maciek --- .../__generated__/SimpleMarkets.ts | 4 + .../simple-market-list/constants.ts | 128 ++++++++++++++++-- .../simple-market-list/data-provider.ts | 1 + .../simple-market-list.spec.tsx | 17 ++- .../simple-market-list/simple-market-list.tsx | 121 ++++++++--------- .../simple-market-percent-change.spec.tsx | 25 +++- .../simple-market-percent-change.tsx | 21 ++- .../simple-market-renderer.tsx | 26 ++++ .../simple-market-toolbar.tsx | 4 +- .../src/app/hooks/use-column-definitions.tsx | 125 +++++++++++++++++ libs/tailwindcss-config/src/theme-lite.js | 12 ++ libs/tailwindcss-config/src/theme.js | 4 + .../src/components/ag-grid/ag-grid-dark.tsx | 11 +- .../ag-grid/ag-grid-dynamic-themed.tsx | 7 +- .../components/ag-grid/ag-grid-dynamic.tsx | 1 + .../src/components/ag-grid/ag-grid-light.tsx | 11 +- .../dropdown-menu/dropdown-menu.tsx | 6 +- 17 files changed, 425 insertions(+), 99 deletions(-) create mode 100644 apps/simple-trading-app/src/app/components/simple-market-list/simple-market-renderer.tsx create mode 100644 apps/simple-trading-app/src/app/hooks/use-column-definitions.tsx diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/__generated__/SimpleMarkets.ts b/apps/simple-trading-app/src/app/components/simple-market-list/__generated__/SimpleMarkets.ts index 9e9ce7943..efeb150a4 100644 --- a/apps/simple-trading-app/src/app/components/simple-market-list/__generated__/SimpleMarkets.ts +++ b/apps/simple-trading-app/src/app/components/simple-market-list/__generated__/SimpleMarkets.ts @@ -47,6 +47,10 @@ export interface SimpleMarkets_markets_tradableInstrument_instrument_product_set export interface SimpleMarkets_markets_tradableInstrument_instrument_product { __typename: "Future"; + /** + * String representing the quote (e.g. BTCUSD -> USD is quote) + */ + quoteName: string; /** * The name of the asset (string) */ diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/constants.ts b/apps/simple-trading-app/src/app/components/simple-market-list/constants.ts index 6ad352067..a346ab7bc 100644 --- a/apps/simple-trading-app/src/app/components/simple-market-list/constants.ts +++ b/apps/simple-trading-app/src/app/components/simple-market-list/constants.ts @@ -1,19 +1,5 @@ -import { Intent } from '@vegaprotocol/ui-toolkit'; -import { MarketState } from '@vegaprotocol/types'; import { t } from '@vegaprotocol/react-helpers'; - -export const MARKET_STATUS: Record = { - [MarketState.Active]: Intent.Success, - [MarketState.Cancelled]: Intent.Primary, - [MarketState.Closed]: Intent.None, - [MarketState.Pending]: Intent.Warning, - [MarketState.Proposed]: Intent.Warning, - [MarketState.Rejected]: Intent.Danger, - [MarketState.Settled]: Intent.Primary, - [MarketState.Suspended]: Intent.Warning, - [MarketState.TradingTerminated]: Intent.Danger, - '': Intent.Primary, -}; +import { themelite as theme } from '@vegaprotocol/tailwindcss-config'; export const STATES_FILTER = [ { value: 'all', text: t('All') }, @@ -27,3 +13,115 @@ export const STATES_FILTER = [ { value: 'Suspended', text: t('Suspended') }, { value: 'TradingTerminated', text: t('TradingTerminated') }, ]; + +export const agGridLightVariables = ` + .ag-theme-balham { + --ag-row-border-color: ${theme.colors.transparent}; + --ag-row-hover-color: ${theme.colors.transparent}; + --ag-font-size: 15px; + } + .ag-theme-balham .ag-row-hover { + --ag-row-border-color: ${theme.colors.black[100]}; + } + .ag-theme-balham [col-id="status"] .ag-header-cell-label, + .ag-theme-balham [col-id="asset"] .ag-header-cell-label, + .ag-theme-balham [col-id="change"] .ag-header-cell-label{ + justify-content: center; + } + .ag-theme-balham .ag-header-row .ag-header-cell:first-child{ + padding-left: 0; + } + .ag-theme-balham .ag-ltr .ag-header-cell::after, .ag-theme-balham .ag-ltr .ag-header-group-cell::after { + right: 0; + } + .ag-theme-balham .ag-header-cell::after{ + width: 0; + } + .ag-theme-balham .ag-header{ + border-bottom-width: 0; + } + .ag-theme-balham .ag-has-focus .ag-row.ag-row-focus .ag-cell-focus { + outline: none; + border-width: 0; + } + .ag-theme-balham .ag-header-label-icon .ag-icon{ + position: relative; + } + .ag-theme-balham .ag-icon::before{ + font-size: 10px; + line-height: 12px; + position: absolute; + transform: rotate(45deg); + top: -6px; + right: -14px; + content: "◾"; + background: -webkit-linear-gradient(135deg, rgba(0,0,0,0.54) 0%, rgba(0,0,0,0.54) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.54) 52%, rgba(0,0,0,0.54) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + .ag-theme-balham .ag-icon-desc::before{ + background: -webkit-linear-gradient(135deg, #000 0%, #000 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.54) 52%, rgba(0,0,0,0.54) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + .ag-theme-balham .ag-icon-asc::before{ + background: -webkit-linear-gradient(135deg, rgba(0,0,0,0.54) 0%, rgba(0,0,0,0.54) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 52%, #000 52%, #000 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +`; + +export const agGridDarkVariables = ` + .ag-theme-balham-dark { + --ag-row-border-color: ${theme.colors.transparent}; + --ag-row-hover-color: ${theme.colors.transparent}; + --ag-font-size: 15px; + } + .ag-theme-balham-dark .ag-row-hover { + --ag-row-border-color: ${theme.colors.white[100]}; + } + .ag-theme-balham-dark [col-id="status"] .ag-header-cell-label, + .ag-theme-balham-dark [col-id="asset"] .ag-header-cell-label, + .ag-theme-balham-dark [col-id="change"] .ag-header-cell-label{ + justify-content: center; + } + .ag-theme-balham-dark .ag-header-row .ag-header-cell:first-child{ + padding-left: 0; + } + .ag-theme-balham-dark .ag-header-cell::after{ + width: 0; + } + .ag-theme-balham-dark .ag-header{ + border-bottom-width: 0; + } + .ag-theme-balham-dark .ag-has-focus .ag-row.ag-row-focus .ag-cell-focus { + outline: none; + border-width: 0; + } + .ag-theme-balham-dark .ag-header-label-icon .ag-icon{ + position: relative; + } + .ag-theme-balham-dark .ag-icon::before{ + font-size: 10px; + line-height: 12px; + position: absolute; + transform: rotate(45deg); + top: -6px; + right: -14px; + content: "◾"; + background: -webkit-linear-gradient(135deg, rgba(245, 245, 245, 0.64) 0%, rgba(245, 245, 245, 0.64) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 52%, rgba(245, 245, 245, 0.64) 52%, rgba(245, 245, 245, 0.64) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-position: center; + } + .ag-theme-balham-dark .ag-icon-desc::before{ + background: -webkit-linear-gradient(135deg, #fff 0%, #fff 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 52%, rgba(245, 245, 245, 0.64) 52%, rgba(245, 245, 245, 0.64) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + .ag-theme-balham-dark .ag-icon-asc::before{ + background: -webkit-linear-gradient(135deg, rgba(245, 245, 245, 0.64) 0%, rgba(245, 245, 245, 0.64) 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 52%, #fff 52%, #fff 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } +`; diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/data-provider.ts b/apps/simple-trading-app/src/app/components/simple-market-list/data-provider.ts index 5e3a4ad73..4466ba980 100644 --- a/apps/simple-trading-app/src/app/components/simple-market-list/data-provider.ts +++ b/apps/simple-trading-app/src/app/components/simple-market-list/data-provider.ts @@ -36,6 +36,7 @@ export const MARKETS_QUERY = gql` product { __typename ... on Future { + quoteName settlementAsset { symbol } diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.spec.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.spec.tsx index 3268c1f96..c2776419f 100644 --- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.spec.tsx +++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.spec.tsx @@ -1,6 +1,12 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; -import { render, screen, waitFor } from '@testing-library/react'; +import { + render, + screen, + waitFor, + cleanup, + getAllByRole, +} from '@testing-library/react'; import { MockedProvider } from '@apollo/client/testing'; import type { MockedResponse } from '@apollo/client/testing'; import { BrowserRouter } from 'react-router-dom'; @@ -37,6 +43,7 @@ describe('SimpleMarketList', () => { afterEach(() => { jest.clearAllMocks(); + cleanup(); }); it('should be properly renderer as empty', async () => { @@ -130,8 +137,12 @@ describe('SimpleMarketList', () => { await new Promise((resolve) => setTimeout(resolve, 0)); }); await waitFor(() => { - expect(screen.getByTestId('simple-market-list')).toBeInTheDocument(); + expect( + document.querySelector('.ag-center-cols-container') + ).toBeInTheDocument(); }); - expect(screen.getByTestId('simple-market-list').children).toHaveLength(2); + + const container = document.querySelector('.ag-center-cols-container'); + expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2); }); }); diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx index f5ae85aab..391e9efe7 100644 --- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx +++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx @@ -1,17 +1,29 @@ -import React, { useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { + useCallback, + useContext, + useEffect, + useMemo, + useRef, +} from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { subDays } from 'date-fns'; +import type { AgGridReact } from 'ag-grid-react'; +import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit'; import { useDataProvider } from '@vegaprotocol/react-helpers'; import { t } from '@vegaprotocol/react-helpers'; -import { AsyncRenderer, Lozenge, Splash } from '@vegaprotocol/ui-toolkit'; -import { Button } from '@vegaprotocol/ui-toolkit'; +import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; +import { ThemeContext } from '@vegaprotocol/react-helpers'; import type { MarketState } from '@vegaprotocol/types'; -import SimpleMarketPercentChange from './simple-market-percent-change'; -import SimpleMarketExpires from './simple-market-expires'; -import DataProvider from './data-provider'; -import { MARKET_STATUS } from './constants'; -import SimpleMarketToolbar from './simple-market-toolbar'; import useMarketsFilterData from '../../hooks/use-markets-filter-data'; +import useColumnDefinitions from '../../hooks/use-column-definitions'; +import DataProvider from './data-provider'; +import * as constants from './constants'; +import SimpleMarketToolbar from './simple-market-toolbar'; +import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets'; + +export type SimpleMarketsType = SimpleMarkets_markets & { + percentChange?: number | '-'; +}; export type RouterParams = Partial<{ product: string; @@ -22,8 +34,9 @@ export type RouterParams = Partial<{ const SimpleMarketList = () => { const navigate = useNavigate(); const params = useParams(); - + const theme = useContext(ThemeContext); const statusesRef = useRef>({}); + const gridRef = useRef(null); const variables = useMemo( () => ({ CandleSince: subDays(Date.now(), 1).toJSON(), @@ -40,7 +53,14 @@ const SimpleMarketList = () => { update, variables ); - const localData = useMarketsFilterData(data || [], params); + const localData: Array = useMarketsFilterData( + data || [], + params + ); + + const handleOnGridReady = useCallback(() => { + gridRef.current?.api.sizeColumnsToFit(); + }, [gridRef]); useEffect(() => { const statuses: Record = {}; @@ -50,6 +70,11 @@ const SimpleMarketList = () => { statusesRef.current = statuses; }, [data, statusesRef]); + useEffect(() => { + window.addEventListener('resize', handleOnGridReady); + return () => window.removeEventListener('resize', handleOnGridReady); + }, [handleOnGridReady]); + const onClick = useCallback( (marketId) => { navigate(`/trading/${marketId}`); @@ -57,62 +82,34 @@ const SimpleMarketList = () => { [navigate] ); + const { columnDefs, defaultColDef } = useColumnDefinitions({ onClick }); + + const getRowId = useCallback(({ data }) => data.id, []); + return ( - <> +
- {localData && localData.length > 0 ? ( -
    - {localData?.map((market) => ( -
  • -
    -
    -
    {market.name}
    - -
    {`${t('settled in')} ${ - market.tradableInstrument.instrument.product - .settlementAsset.symbol - }`}
    -
    -
    -
    - -
    -
    - - {market.data?.market.state} - -
    -
    -
    -
    -
    -
  • - ))} -
- ) : ( - {t('No data to display')} - )} +
- +
); }; diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.spec.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.spec.tsx index 0e6d4e733..b6d89c262 100644 --- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.spec.tsx +++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.spec.tsx @@ -7,11 +7,16 @@ import type { SimpleMarkets_markets_candles } from './__generated__/SimpleMarket describe('SimpleMarketPercentChange should parse proper change', () => { let candles: (SimpleMarkets_markets_candles | null)[] | null; + const setValue = () => undefined; it('empty array', () => { candles = []; render( - + ); expect(screen.getByText('-')).toBeInTheDocument(); @@ -20,7 +25,11 @@ describe('SimpleMarketPercentChange should parse proper change', () => { candles = null; render( - + ); expect(screen.getByText('-')).toBeInTheDocument(); @@ -33,7 +42,11 @@ describe('SimpleMarketPercentChange should parse proper change', () => { ]; render( - + ); expect(screen.getByText('100.000%')).toBeInTheDocument(); @@ -49,7 +62,11 @@ describe('SimpleMarketPercentChange should parse proper change', () => { ]; render( - + ); expect(screen.getByText('-50.000%')).toBeInTheDocument(); diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.tsx index e4c094736..9b0ade0d3 100644 --- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.tsx +++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { InView } from 'react-intersection-observer'; import { useSubscription } from '@apollo/client'; import { themelite as theme } from '@vegaprotocol/tailwindcss-config'; @@ -12,6 +12,7 @@ import { CANDLE_SUB } from './data-provider'; interface Props { candles: (SimpleMarkets_markets_candles | null)[] | null; marketId: string; + setValue: (arg: unknown) => void; } const getChange = ( @@ -51,20 +52,32 @@ const SimpleMarketPercentChangeWrapper = (props: Props) => { return ( // @ts-ignore falsy wrong type? - + {inView && } ); }; -const SimpleMarketPercentChange = ({ candles, marketId }: Props) => { +const SimpleMarketPercentChange = ({ candles, marketId, setValue }: Props) => { const { data: { candles: { close = undefined } = {} } = {} } = useSubscription(CANDLE_SUB, { variables: { marketId }, }); const change = getChange(candles, close); const color = getColor(change); - return

{change}

; + useEffect(() => { + const value = parseFloat(change); + setValue(isNaN(value) ? '-' : value); + }, [setValue, change]); + + return ( +
+ {change} +
+ ); }; export default SimpleMarketPercentChangeWrapper; diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-renderer.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-renderer.tsx new file mode 100644 index 000000000..5d26e330d --- /dev/null +++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-renderer.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets'; +import SimpleMarketExpires from './simple-market-expires'; + +interface Props { + data: SimpleMarkets_markets; +} + +const MarketNameRenderer = ({ data }: Props) => { + return ( +
+
+
+ {data.name}{' '} + +
+
+ {data.tradableInstrument.instrument.product.quoteName} +
+
+ ); +}; + +export default MarketNameRenderer; diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-toolbar.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-toolbar.tsx index c250871aa..48e7fc78f 100644 --- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-toolbar.tsx +++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-toolbar.tsx @@ -67,7 +67,7 @@ const SimpleMarketToolbar = () => { ); return ( -
+
    {
{activeNumber > 0 && (
    diff --git a/apps/simple-trading-app/src/app/hooks/use-column-definitions.tsx b/apps/simple-trading-app/src/app/hooks/use-column-definitions.tsx new file mode 100644 index 000000000..a3882fc93 --- /dev/null +++ b/apps/simple-trading-app/src/app/hooks/use-column-definitions.tsx @@ -0,0 +1,125 @@ +import React, { useMemo } from 'react'; +import { t } from '@vegaprotocol/react-helpers'; +import type { SimpleMarkets_markets } from '../components/simple-market-list/__generated__/SimpleMarkets'; +import MarketNameRenderer from '../components/simple-market-list/simple-market-renderer'; +import SimpleMarketPercentChange from '../components/simple-market-list/simple-market-percent-change'; +import { Button } from '@vegaprotocol/ui-toolkit'; +import type { ValueSetterParams } from 'ag-grid-community'; +import type { SimpleMarketsType } from '../components/simple-market-list/simple-market-list'; + +interface Props { + onClick: (marketId: string) => void; +} + +const useColumnDefinitions = ({ onClick }: Props) => { + const columnDefs = useMemo(() => { + return [ + { + colId: 'market', + headerName: t('Markets'), + headerClass: 'uppercase', + minWidth: 300, + field: 'name', + cellRenderer: ({ data }: { data: SimpleMarketsType }) => ( + + ), + }, + { + colId: 'asset', + headerName: t('Settlement asset'), + headerClass: 'uppercase', + minWidth: 100, + cellClass: 'uppercase flex h-full items-center', + field: 'tradableInstrument.instrument.product.settlementAsset.symbol', + cellRenderer: ({ data }: { data: SimpleMarketsType }) => ( +
    + {data.tradableInstrument.instrument.product.settlementAsset.symbol} +
    + ), + }, + { + colId: 'change', + headerName: t('24h change'), + headerClass: 'uppercase', + field: 'percentChange', + minWidth: 100, + valueSetter: (params: ValueSetterParams): boolean => { + const { oldValue, newValue, api, data } = params; + if (oldValue !== newValue) { + const newdata = { percentChange: newValue, ...data }; + api.applyTransaction({ update: [newdata] }); + return true; + } + return false; + }, + cellRenderer: ({ + data, + setValue, + }: { + data: SimpleMarketsType; + setValue: (arg: unknown) => void; + }) => ( + + ), + comparator: (valueA: number | '-', valueB: number | '-') => { + if (valueA === valueB) return 0; + if (valueA === '-') { + return -1; + } + if (valueB === '-') { + return 1; + } + return valueA > valueB ? 1 : -1; + }, + }, + { + colId: 'status', + headerName: t('Status'), + field: 'data.market.state', + headerClass: 'uppercase', + minWidth: 100, + cellRenderer: ({ data }: { data: SimpleMarkets_markets }) => ( +
    +
    + {data.data?.market.state} +
    +
    + ), + }, + { + colId: 'trade', + headerName: '', + headerClass: 'uppercase', + sortable: false, + minWidth: 100, + cellRenderer: ({ data }: { data: SimpleMarkets_markets }) => ( +
    + +
    + ), + }, + ]; + }, [onClick]); + + const defaultColDef = useMemo(() => { + return { + sortable: true, + unSortIcon: true, + }; + }, []); + + return { columnDefs, defaultColDef }; +}; + +export default useColumnDefinitions; diff --git a/libs/tailwindcss-config/src/theme-lite.js b/libs/tailwindcss-config/src/theme-lite.js index 125e540e0..1920a316d 100644 --- a/libs/tailwindcss-config/src/theme-lite.js +++ b/libs/tailwindcss-config/src/theme-lite.js @@ -12,9 +12,21 @@ module.exports = { mint: '#00F780', pink: '#FF077F', blue: '#2E6DE5', + vega: { + ...theme.colors.vega, + 'highlight-item': '#000', + 'highlight-item-dark': '#fff', + }, + 'dropdown-bg-dark': theme.colors.black['100'], }, fontSize: { ...theme.fontSize, capMenu: ['15px', { lineHeight: '24px', letterSpacing: '-0.01em' }], + market: ['15px', { lineHeight: '24px' }], + }, + boxShadow: { + ...theme.boxShadow, + 'inset-black': '', + 'inset-white': '', }, }; diff --git a/libs/tailwindcss-config/src/theme.js b/libs/tailwindcss-config/src/theme.js index 8ffdc2e21..6001a1b68 100644 --- a/libs/tailwindcss-config/src/theme.js +++ b/libs/tailwindcss-config/src/theme.js @@ -55,6 +55,8 @@ const colours = { 'green-dark': '#008545', red: '#FF261A', 'red-dark': '#EB001B', + 'highlight-item': '#FF077F', + 'highlight-item-dark': '#DFFF0B', }, blue: '#1DA2FB', coral: '#FF6057', @@ -65,6 +67,8 @@ const colours = { selected: '#DFFF0B', success: '#00F780', 'danger-bg': '#9E0025', // for white text + 'dropdown-bg': '#FFF', + 'dropdown-bg-dark': shadeOfGray(100 - 60), }; const boxShadowPosition = { diff --git a/libs/ui-toolkit/src/components/ag-grid/ag-grid-dark.tsx b/libs/ui-toolkit/src/components/ag-grid/ag-grid-dark.tsx index 84410d393..9f84adf72 100644 --- a/libs/ui-toolkit/src/components/ag-grid/ag-grid-dark.tsx +++ b/libs/ui-toolkit/src/components/ag-grid/ag-grid-dark.tsx @@ -27,9 +27,16 @@ const agGridDarkVariables = ` } `; -export const AgGrid = (props: { children: ReactNode }) => ( +export const AgGrid = ({ + children, + customThemeParams, +}: { + children: ReactNode; + customThemeParams?: string; +}) => ( <> - {props.children} + {customThemeParams && } + {children} ); diff --git a/libs/ui-toolkit/src/components/ag-grid/ag-grid-dynamic-themed.tsx b/libs/ui-toolkit/src/components/ag-grid/ag-grid-dynamic-themed.tsx index 52b9cf1e7..39ee2ca36 100644 --- a/libs/ui-toolkit/src/components/ag-grid/ag-grid-dynamic-themed.tsx +++ b/libs/ui-toolkit/src/components/ag-grid/ag-grid-dynamic-themed.tsx @@ -8,6 +8,7 @@ import 'ag-grid-community/dist/styles/ag-grid.css'; interface GridProps { children: ReactNode; + customThemeParams: string; } const AgGridLightTheme = dynamic( @@ -24,11 +25,13 @@ export const AgGridThemed = ({ style, className, gridRef, + customThemeParams = '', ...props }: (AgGridReactProps | AgReactUiProps) & { style?: React.CSSProperties; className?: string; gridRef?: React.ForwardedRef; + customThemeParams?: string; }) => { const theme = useContext(ThemeContext); const defaultProps = { rowHeight: 20, headerHeight: 22 }; @@ -40,11 +43,11 @@ export const AgGridThemed = ({ style={style} > {theme === 'dark' ? ( - + ) : ( - + )} diff --git a/libs/ui-toolkit/src/components/ag-grid/ag-grid-dynamic.tsx b/libs/ui-toolkit/src/components/ag-grid/ag-grid-dynamic.tsx index 0c49a05b6..e722af2ec 100644 --- a/libs/ui-toolkit/src/components/ag-grid/ag-grid-dynamic.tsx +++ b/libs/ui-toolkit/src/components/ag-grid/ag-grid-dynamic.tsx @@ -11,6 +11,7 @@ type Props = (AgGridReactProps | AgReactUiProps) & { style?: React.CSSProperties; className?: string; gridRef?: React.Ref; + customThemeParams?: string; }; // https://stackoverflow.com/questions/69433673/nextjs-reactdomserver-does-not-yet-support-suspense diff --git a/libs/ui-toolkit/src/components/ag-grid/ag-grid-light.tsx b/libs/ui-toolkit/src/components/ag-grid/ag-grid-light.tsx index 06fac8fa1..e016fd5d6 100644 --- a/libs/ui-toolkit/src/components/ag-grid/ag-grid-light.tsx +++ b/libs/ui-toolkit/src/components/ag-grid/ag-grid-light.tsx @@ -27,9 +27,16 @@ const agGridLightVariables = ` } `; -export const AgGrid = (props: { children: ReactNode }) => ( +export const AgGrid = ({ + children, + customThemeParams, +}: { + children: ReactNode; + customThemeParams?: string; +}) => ( <> - {props.children} + {customThemeParams && } + {children} ); 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 7eaaf2529..1a11bb28f 100644 --- a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx +++ b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx @@ -13,7 +13,7 @@ const itemClass = classNames( 'hover:cursor-pointer', 'select-none', 'whitespace-nowrap', - 'focus:bg-vega-pink dark:focus:bg-vega-yellow', + 'focus:bg-vega-highlight-item dark:focus:bg-vega-highlight-item-dark', 'focus:text-white dark:focus:text-black', 'focus:outline-none' ); @@ -23,7 +23,7 @@ function getItemClasses(inset: boolean, checked?: boolean) { itemClass, inset ? 'pl-28' : 'pl-8', checked - ? 'bg-vega-pink dark:bg-vega-yellow text-white dark:text-black' + ? 'bg-vega-highlight-item dark:bg-vega-highlight-item-dark text-white dark:text-black' : 'text-black dark:text-white' ); } @@ -73,7 +73,7 @@ export const DropdownMenuContent = forwardRef< {...contentProps} ref={forwardedRef} className={classNames( - 'inline-block box-border border-1 border-black bg-white dark:bg-black-60', + 'inline-block box-border border-1 border-black bg-dropdown-bg dark:bg-dropdown-bg-dark', className )} />