LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Chore/design updates (#1305)

Browse Source 
* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* chore: design updates

* fix: fix lint tests

* chore: fixes ag grid invisible header seperators

* fix: fixing conflicts

* fix: fixing conflicts

* chore: fix header spacing

* chore: fix dropdown hover colour

* fix: formatting change to pass test
This commit is contained in:
PeteWilliams 2022-09-12 14:05:39 +01:00 committed by GitHub
parent 8b08e48840
commit 549e0e004d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 101 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/console-lite/src/app/components/nav/tab-bar.tsx
View File

@ -8,7 +8,7 @@ interface TabBarProps {
export const TabBar = ({ className }: TabBarProps) => (
<div role="group" aria-label="Tab Bar Navigation Menu" className={className}>
<div role="presentation" className="py-[42px]" />
<div className="md:hidden fixed bottom-0 left-0 right-0 bg-black py-4 border-t border-neutral-300 dark:border-neutral-700">
<div className="md:hidden fixed bottom-0 left-0 right-0 bg-black py-4 border-t border-neutral-300 dark:border-neutral-600">
<Nav tabs className="flex justify-evenly items-center" />
</div>
</div>

5
apps/trading/components/footer/footer.tsx
View File

@ -1,11 +1,8 @@
import { Vega } from '../icons/vega';
export const Footer = () => {
return (
<footer className="px-4 py-2 text-xs border-t border-neutral-300 dark:border-neutral-700">
<footer className="px-4 py-2 text-xs border-t border-neutral-300 dark:border-neutral-600 bg-neutral-100 dark:bg-neutral-800">
<div className="flex justify-between">
<div>Status</div>
<Vega className="w-13" />
</div>
</footer>
);

4
apps/trading/components/header/header.tsx
View File

@ -10,7 +10,7 @@ interface TradeMarketHeaderProps {
export const Header = ({ title, children }: TradeMarketHeaderProps) => {
return (
<header className="w-screen xl:px-4 pt-4 border-b border-neutral-300 dark:border-neutral-700">
<header className="w-screen xl:px-4 pt-4 border-b border-neutral-300 dark:border-neutral-600">
<div className="xl:flex xl:gap-4 items-start">
<div className="px-4 mb-2">{title}</div>
<div
@ -40,7 +40,7 @@ export const HeaderStat = ({
description?: string | ReactNode;
}) => {
const itemClass =
'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-neutral-300 dark:border-neutral-700';
'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-neutral-300 dark:border-neutral-600';
const itemHeading = 'text-neutral-400';
return (

2
apps/trading/components/icons/vega.tsx
View File

@ -1,7 +1,7 @@
import classNames from 'classnames';
export function Vega({ className }: { className?: string }) {
const svgClasses = classNames(className, 'fill-current');
const svgClasses = classNames(className, 'fill-white');
return (
<svg
width="86"

9
apps/trading/components/navbar/navbar.tsx
View File

@ -5,7 +5,8 @@ import { NetworkSwitcher } from '@vegaprotocol/environment';
import { t } from '@vegaprotocol/react-helpers';
import { useGlobalStore } from '../../stores/global';
import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
import { ThemeSwitcher, VLogo } from '@vegaprotocol/ui-toolkit';
import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
import { Vega } from '../icons/vega';
interface NavbarProps {
theme: 'light' | 'dark';
@ -19,12 +20,12 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
}));
const tradingPath = marketId ? `/markets/${marketId}` : '/markets';
return (
<div className="px-4 flex items-stretch border-b border-neutral-300 dark:border-neutral-700 bg-black">
<div className="px-4 flex items-stretch border-b border-neutral-300 dark:border-neutral-400 bg-black">
<div className="flex gap-4 mr-4 items-center h-full">
<Link href="/" passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a>
<VLogo className="w-6 h-6 fill-white" />
<Vega className="w-13" />
</a>
</Link>
<NetworkSwitcher fixedBg="dark" />
@ -69,7 +70,7 @@ const NavLink = ({ name, path, exact, testId = name }: NavLinkProps) => {
router.asPath === path || (!exact && router.asPath.startsWith(path));
const linkClasses = classNames('mx-2 py-2 self-end border-b-4', {
'border-vega-yellow text-white cursor-default': isActive,
'border-transparent text-neutral-400': !isActive,
'border-transparent text-neutral-400 hover:text-neutral-300': !isActive,
});
return (
<Link data-testid={testId} href={path} passHref={true}>

2
apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
View File

@ -30,7 +30,7 @@ export const VegaWalletConnectButton = ({
return (
<DropdownMenu open={dropdownOpen}>
<DropdownMenuTrigger
className="text-white"
className="text-white hover:!bg-neutral-700"
data-testid="manage-vega-wallet"
onClick={() => setDropdownOpen((curr) => !curr)}
>

23
apps/trading/pages/markets/trade-grid.tsx
View File

@ -127,14 +127,14 @@ export const TradeMarketHeader = ({
market.tradableInstrument.instrument.product?.settlementAsset?.symbol;
const itemClass =
'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-neutral-300 dark:border-neutral-700';
const itemHeading = 'text-neutral-400';
'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-neutral-300 dark:border-neutral-600';
const itemHeading = 'text-neutral-500 dark:text-neutral-400';
const { push } = useRouter();
return (
<header className="w-screen xl:px-4 pt-4 border-b border-neutral-300 dark:border-neutral-700">
<header className="w-screen px-4 border-b border-neutral-300 dark:border-neutral-600">
<div className="xl:flex xl:gap-4 items-start">
<div className="px-4 mb-2 xl:mb-0">
<div>
<SelectMarketPopover
marketName={market.tradableInstrument.instrument.name}
onSelect={onSelect}
@ -142,7 +142,7 @@ export const TradeMarketHeader = ({
</div>
<div
data-testid="market-summary"
className="flex flex-nowrap items-start xl:flex-1 w-full overflow-x-auto text-xs "
className="flex flex-nowrap items-start mt-3 xl:flex-1 w-full overflow-x-auto text-xs "
>
<div className={itemClass}>
<div className={itemHeading}>{t('Expiry')}</div>
@ -273,7 +273,7 @@ export const TradeGrid = ({ market, onSelect }: TradeGridProps) => {
</ResizableGridPanel>
<ResizableGridPanel
priority={LayoutPriority.Low}
preferredSize="25%"
preferredSize={330}
minSize={300}
>
<TradeGridChild>
@ -295,7 +295,7 @@ export const TradeGrid = ({ market, onSelect }: TradeGridProps) => {
</ResizableGridPanel>
<ResizableGridPanel
priority={LayoutPriority.Low}
preferredSize="25%"
preferredSize={430}
minSize={200}
>
<TradeGridChild>
@ -313,7 +313,7 @@ export const TradeGrid = ({ market, onSelect }: TradeGridProps) => {
</ResizableGridPanel>
<ResizableGridPanel
priority={LayoutPriority.Low}
preferredSize="33%"
preferredSize="25%"
minSize={50}
>
<TradeGridChild>
@ -347,7 +347,10 @@ const TradeGridChild = ({ children }: TradeGridChildProps) => {
<section className="h-full">
<AutoSizer>
{({ width, height }) => (
<div style={{ width, height }} className="overflow-auto">
<div
style={{ width, height }}
className="overflow-auto border-[1px] dark:border-neutral-600"
>
{children}
</div>
)}
@ -395,7 +398,7 @@ export const TradePanels = ({ market, onSelect }: TradePanelsProps) => {
)}
</AutoSizer>
</div>
<div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-neutral-300 dark:border-neutral-700">
<div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-neutral-300 dark:border-neutral-600">
{Object.keys(TradingViews).map((key) => {
const isActive = view === key;
const className = classNames('p-4 min-w-[100px] capitalize', {

2
apps/trading/pages/styles.css
View File

@ -16,5 +16,5 @@ html {
html.dark {
--focus-border: theme('colors.vega.yellow');
--separator-border: theme('colors.neutral.700');
--separator-border: theme('colors.neutral.600');
}

2
libs/environment/src/components/network-switcher/network-switcher.tsx
View File

@ -88,7 +88,7 @@ export const NetworkSwitcher = ({
[setOpen, setAdvancedView]
);
const dropdownTriggerClasses = classNames({
const dropdownTriggerClasses = classNames('hover:!bg-neutral-700', {
'dark:text-white dark:bg-black text-black bg-white': !fixedBg,
'text-black bg-white': fixedBg === 'light',
'text-white bg-black': fixedBg === 'dark',

8
libs/market-depth/src/lib/orderbook.tsx
View File

@ -27,7 +27,7 @@ interface OrderbookProps extends OrderbookData {
const HorizontalLine = ({ top, testId }: { top: string; testId: string }) => (
<div
className="absolute border-b border-neutral-300 dark:border-neutral-700 inset-x-0"
className="absolute border-b border-neutral-300 dark:border-neutral-600 inset-x-0"
style={{ top }}
data-testid={testId}
/>
@ -309,7 +309,7 @@ export const Orderbook = ({
</div>
) : null;
const c = theme === 'dark' ? colors.neutral[700] : colors.neutral[300];
const c = theme === 'dark' ? colors.neutral[600] : colors.neutral[300];
const gradientStyles = `linear-gradient(${c},${c}) 24.6% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 50% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 75.2% 0/1px 100% no-repeat`;
return (
@ -320,7 +320,7 @@ export const Orderbook = ({
data-testid="scroll"
>
<div
className="sticky top-0 grid grid-cols-4 gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-neutral-300 dark:border-neutral-700"
className="sticky top-0 grid grid-cols-4 gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-neutral-300 dark:border-neutral-600"
style={{ gridAutoRows: '17px' }}
>
<div>{t('Bid vol')}</div>
@ -344,7 +344,7 @@ export const Orderbook = ({
)}
</div>
<div
className="sticky bottom-0 grid grid-cols-4 gap-2 border-t-[1px] border-neutral-300 dark:border-neutral-700 mt-2 z-10 bg-white dark:bg-black"
className="sticky bottom-0 grid grid-cols-4 gap-2 border-t-[1px] border-neutral-300 dark:border-neutral-600 mt-2 z-10 bg-white dark:bg-black"
style={{ gridAutoRows: '17px' }}
>
<div className="col-start-2">

2
libs/market-info/src/components/market-info/info-market.tsx
View File

@ -331,7 +331,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
return (
<div className="p-4">
<div className="mb-4">
<div className="mb-8">
<p className={headerClassName}>{t('Market data')}</p>
<Accordion panels={marketDataPanels} />
</div>

40
libs/market-list/src/lib/components/select-market-columns.tsx
View File

@ -24,7 +24,7 @@ import type {
} from '../__generated__/MarketList';
import isNil from 'lodash/isNil';
export const cellClassNames = 'px-2 py-1 first:text-left text-right capitalize';
export const cellClassNames = 'px-0 py-1 first:text-left text-right';
const FeesInfo = () => {
return (
@ -81,12 +81,12 @@ export const columnHeadersPositionMarkets: Column[] = [
onlyOnDetailed: false,
},
{
value: t('24h High'),
value: t('24h high'),
className: `${cellClassNames} hidden xl:table-cell`,
onlyOnDetailed: true,
},
{
value: t('24h Low'),
value: t('24h low'),
className: `${cellClassNames} hidden xl:table-cell`,
onlyOnDetailed: true,
},
@ -139,12 +139,12 @@ export const columnHeaders: Column[] = [
onlyOnDetailed: false,
},
{
value: t('24h High'),
value: t('24h high'),
className: `${cellClassNames} hidden xl:table-cell`,
onlyOnDetailed: true,
},
{
value: t('24h Low'),
value: t('24h low'),
className: `${cellClassNames} hidden xl:table-cell`,
onlyOnDetailed: true,
},
@ -264,7 +264,7 @@ export const columns = (
) : (
'-'
),
className: `${cellClassNames} hidden xl:table-cell`,
className: `${cellClassNames} hidden xl:table-cell font-mono`,
onlyOnDetailed: true,
},
{
@ -280,7 +280,7 @@ export const columns = (
) : (
'-'
),
className: `${cellClassNames} hidden xl:table-cell`,
className: `${cellClassNames} hidden xl:table-cell font-mono`,
onlyOnDetailed: true,
},
{
@ -304,13 +304,13 @@ export const columns = (
market.positionDecimalPlaces
)
: '-',
className: `${cellClassNames} hidden lg:table-cell`,
className: `${cellClassNames} hidden lg:table-cell font-mono`,
onlyOnDetailed: true,
dataTestId: 'market-volume',
},
{
value: <FeesCell feeFactors={market.fees.factors} />,
className: `${cellClassNames} hidden xl:table-cell`,
className: `${cellClassNames} hidden xl:table-cell font-mono`,
onlyOnDetailed: true,
dataTestId: 'taker-fee',
},
@ -417,7 +417,7 @@ export const columnsPositionMarkets = (
) : (
'-'
),
className: `${cellClassNames} hidden xl:table-cell`,
className: `${cellClassNames} hidden xl:table-cell font-mono`,
onlyOnDetailed: true,
},
{
@ -433,7 +433,7 @@ export const columnsPositionMarkets = (
) : (
'-'
),
className: `${cellClassNames} hidden xl:table-cell`,
className: `${cellClassNames} hidden xl:table-cell font-mono`,
onlyOnDetailed: true,
},
{
@ -457,12 +457,12 @@ export const columnsPositionMarkets = (
market.positionDecimalPlaces
)
: '-',
className: `${cellClassNames} hidden lg:table-cell`,
className: `${cellClassNames} hidden lg:table-cell font-mono`,
onlyOnDetailed: true,
},
{
value: <FeesCell feeFactors={market.fees.factors} />,
className: `${cellClassNames} hidden xl:table-cell`,
className: `${cellClassNames} hidden xl:table-cell font-mono`,
onlyOnDetailed: true,
},
{
@ -470,16 +470,16 @@ export const columnsPositionMarkets = (
<p
className={
market.openVolume.includes('+')
? 'text-vega-green'
? 'text-vega-green-dark dark:text-vega-green'
: market.openVolume.includes('-')
? 'text-vega-red'
? 'text-vega-red-dark dark:text-vega-red'
: ''
}
>
{market.openVolume}
</p>
),
className: `${cellClassNames} hidden xxl:table-cell`,
className: `${cellClassNames} hidden xxl:table-cell font-mono`,
onlyOnDetailed: true,
},
];
@ -504,23 +504,23 @@ export const FeesBreakdown = ({
if (!feeFactors) return null;
return (
<dl className="grid grid-cols-2 gap-x-2">
<dt>{t('Infrastructure Fee')}</dt>
<dt>{t('Infrastructure fee')}</dt>
<dd className="text-right">
{formatNumberPercentage(
new BigNumber(feeFactors.infrastructureFee).times(100)
)}
</dd>
<dt>{t('Liquidity Fee')}</dt>
<dt>{t('Liquidity fee')}</dt>
<dd className="text-right">
{formatNumberPercentage(
new BigNumber(feeFactors.liquidityFee).times(100)
)}
</dd>
<dt>{t('Maker Fee')}</dt>
<dt>{t('Maker fee')}</dt>
<dd className="text-right">
{formatNumberPercentage(new BigNumber(feeFactors.makerFee).times(100))}
</dd>
<dt>{t('Total Fees')}</dt>
<dt>{t('Total fees')}</dt>
<dd className="text-right">{totalFees(feeFactors)}</dd>
</dl>
);

4
libs/market-list/src/lib/components/select-market-table.tsx
View File

@ -7,7 +7,7 @@ export const SelectMarketTableHeader = ({
headers = columnHeaders,
}) => {
return (
<tr className="sticky top-0 z-10 border-b border-neutral-300 dark:border-neutral-700 bg-inherit">
<tr className="sticky top-0 z-10 border-b border-neutral-300 dark:border-neutral-600 bg-inherit">
{headers.map(({ value, className, onlyOnDetailed }, i) => {
const thClass = classNames(
'font-normal text-neutral-500 dark:text-neutral-400',
@ -37,7 +37,7 @@ export const SelectMarketTableRow = ({
}) => {
return (
<tr
className={`hover:bg-black/10 dark:hover:bg-white/20 cursor-pointer relative h-[34px]`}
className={`hover:bg-neutral-200 dark:hover:bg-neutral-700 cursor-pointer relative h-[34px]`}
>
{columns.map(({ value, className, dataTestId, onlyOnDetailed }, i) => {
if (!onlyOnDetailed || detailed === onlyOnDetailed) {

13
libs/market-list/src/lib/components/select-market.tsx
View File

@ -76,7 +76,7 @@ export const SelectAllMarketsTableBody = ({
if (!data) return null;
return (
<>
<thead className="bg-neutral-200 dark:bg-neutral-800">
<thead className="bg-neutral-50 dark:bg-neutral-800">
<SelectMarketTableHeader detailed={true} headers={headers} />
</thead>
{/* Border styles required to create space between tbody elements margin/padding dont work */}
@ -100,7 +100,8 @@ export const SelectMarketPopover = ({
marketName: string;
onSelect: (id: string) => void;
}) => {
const triggerClasses = 'flex items-center gap-4 whitespace-nowrap';
const triggerClasses =
'sm:text-lg md:text-xl lg:text-2xl font-medium flex items-center gap-4 whitespace-nowrap my-3 hover:text-neutral-500 dark:hover:text-neutral-300';
const { keypair } = useVegaWallet();
const [open, setOpen] = useState(false);
const { data, loading: marketsLoading } = useMarketList();
@ -149,7 +150,7 @@ export const SelectMarketPopover = ({
trigger={
<span className={triggerClasses}>
{marketName}
<Icon name="chevron-down" className={iconClass} />
<Icon name="chevron-down" className={iconClass} size={6} />
</span>
}
>
@ -167,7 +168,7 @@ export const SelectMarketPopover = ({
{keypair &&
positionMarkets?.markets &&
positionMarkets.markets.length > 0 && (
<table className="relative text-sm w-full whitespace-nowrap -mx-2">
<table className="relative text-sm w-full whitespace-nowrap">
<TableTitle>{t('My markets')}</TableTitle>
<SelectAllMarketsTableBody
data={positionMarkets.markets}
@ -179,7 +180,7 @@ export const SelectMarketPopover = ({
/>
</table>
)}
<table className="relative text-sm w-full whitespace-nowrap -mx-2">
<table className="relative text-sm w-full whitespace-nowrap">
<TableTitle>{t('All markets')}</TableTitle>
<SelectAllMarketsTableBody
data={data}
@ -197,7 +198,7 @@ const TableTitle = ({ children }: { children: ReactNode }) => {
return (
<thead>
<tr>
<th className="font-normal px-2 text-left">
<th className="font-normal text-left">
<h3 className="text-lg">{children}</h3>
</th>
</tr>

2
libs/orders/src/lib/components/order-list/order-edit-dialog.tsx
View File

@ -78,7 +78,7 @@ export const OrderEditDialog = ({
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 py-12">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 py-4">
<form onSubmit={handleSubmit(onSubmit)} data-testid="edit-order">
<FormGroup label={t('Entry price')} labelFor="entryPrice">
<Input

4
libs/orders/src/lib/components/order-list/order-list.tsx
View File

@ -289,7 +289,7 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
onClick={() => {
setEditOrder(data);
}}
size="sm"
size="xs"
>
{t('Edit')}
</Button>
@ -306,7 +306,7 @@ export const OrderListTable = forwardRef<AgGridReact, OrderListTableProps>(
if (isOrderActive(data.status)) {
return (
<Button
size="sm"
size="xs"
data-testid="cancel"
onClick={() => cancel(data)}
>

2
libs/positions/src/lib/positions-table.spec.tsx
View File

@ -47,7 +47,7 @@ it('Render correct columns', async () => {
headers.map((h) => h.querySelector('[ref="eText"]')?.textContent?.trim())
).toEqual([
'Market',
'Amount',
'Size',
'Mark price',
'Entry price',
'Leverage',

4
libs/positions/src/lib/positions-table.tsx
View File

@ -133,7 +133,7 @@ const ButtonCell = ({
<Button
data-testid="close-position"
onClick={() => onClick(data)}
size="sm"
size="xs"
>
{t('Close')}
</Button>
@ -181,7 +181,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
}}
/>
<AgGridColumn
headerName={t('Amount')}
headerName={t('Size')}
field="openVolume"
valueGetter={({ node, data }: ValueGetterParams) => {
return node?.rowPinned ? data?.notional : data?.openVolume;

8
libs/positions/src/lib/positions.tsx
View File

@ -82,16 +82,16 @@ export const Positions = memo(
};
return (
<AsyncRenderer loading={loading} error={error} data={data}>
<div className="p-2">
<h4 className="text-lg">
<div className="flex justify-between items-center p-3 pb-1">
<h4 className="text-m">
{assetSymbol} {t('markets')}
</h4>
<p>
<div className="text-sm text-neutral-500 dark:text-neutral-300">
{assetSymbol} {t('balance')}:
<span data-testid="balance" className="pl-1 font-mono">
<AssetBalance partyId={partyId} assetSymbol={assetSymbol} />
</span>
</p>
</div>
</div>
<PositionsTable
domLayout="autoHeight"

2
libs/react-helpers/src/lib/grid/price-cell.tsx
View File

@ -26,7 +26,7 @@ export const PriceCell = React.memo(
{valueSplit[0]}
{valueSplit[1] ? decimalSeparator : null}
{valueSplit[1] ? (
<span className="opacity-50">{valueSplit[1]}</span>
<span className="opacity-60">{valueSplit[1]}</span>
) : null}
</span>
);

4
libs/trades/src/lib/trades-table.tsx
View File

@ -13,8 +13,8 @@ import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
import type { Trades_market_tradesConnection_edges_node } from './__generated__/Trades';
import BigNumber from 'bignumber.js';
export const UP_CLASS = 'text-vega-green';
export const DOWN_CLASS = 'text-vega-red';
export const UP_CLASS = 'text-vega-green-dark dark:text-vega-green';
export const DOWN_CLASS = 'text-vega-red-dark dark:text-vega-red';
const changeCellClass =
(dataKey: string) =>

7
libs/ui-toolkit/src/components/ag-grid/ag-grid-dark.tsx
View File

@ -8,8 +8,9 @@ const agGridDarkVariables = `
--ag-border-color: ${colors.neutral[700]};
--ag-header-background-color: ${colors.black};
--ag-odd-row-background-color: ${colors.black};
--ag-header-column-separator-color: ${colors.neutral[600]};
--ag-row-border-color:${colors.black};
--ag-row-hover-color: ${colors.neutral[700]};
--ag-row-hover-color: ${colors.neutral[800]};
--ag-font-size: 12px;
}
@ -21,10 +22,6 @@ const agGridDarkVariables = `
overflow: hidden;
text-overflow: ellipsis;
}
.ag-theme-balham-dark .ag-header-row {
font-weight: 400;
}
`;
export const AgGrid = ({

7
libs/ui-toolkit/src/components/ag-grid/ag-grid-light.tsx
View File

@ -8,8 +8,9 @@ const agGridLightVariables = `
--ag-border-color: ${colors.neutral[300]};
--ag-header-background-color: ${colors.white};
--ag-odd-row-background-color: ${colors.white};
--ag-header-column-separator-color: ${colors.neutral[300]};
--ag-row-border-color: ${colors.white};
--ag-row-hover-color: ${colors.neutral[300]};
--ag-row-hover-color: ${colors.neutral[100]};
--ag-font-size: 12px;
}
@ -21,10 +22,6 @@ const agGridLightVariables = `
overflow: hidden;
text-overflow: ellipsis;
}
.ag-theme-balham-dark .ag-header-row {
font-weight: 400;
}
`;
export const AgGrid = ({

12
libs/ui-toolkit/src/components/button/button.tsx
View File

@ -9,10 +9,10 @@ import { Icon } from '../icon';
import classnames from 'classnames';
type ButtonVariant = 'default' | 'primary' | 'secondary';
type ButtonSize = 'lg' | 'md' | 'sm';
type ButtonSize = 'lg' | 'md' | 'sm' | 'xs';
const base =
'inline-block uppercase border rounded-md disabled:opacity-40 transition-colors';
const base = 'inline-block uppercase border rounded-md disabled:opacity-60';
const xs = 'px-2 py-0 text-sm';
const sm = 'px-2 py-1 text-sm';
const md = 'px-10 py-2 text-base';
const lg = 'px-14 py-4';
@ -21,8 +21,8 @@ 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-800',
'enabled:active:bg-neutral-200 dark:enabled:active:bg-neutral-500',
'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 dark:enabled:active:border-neutral-400',
];
const primary = [
'text-black',
@ -54,9 +54,11 @@ const getClassname = ({
[defaultClasses.join(' ')]: variant === 'default',
[primary.join(' ')]: variant === 'primary',
[secondary.join(' ')]: variant === 'secondary',
[lg]: size === 'lg',
[md]: size === 'md',
[sm]: size === 'sm',
[xs]: size === 'xs',
[fillClasses]: fill,
});
};

2
libs/ui-toolkit/src/components/dialog/dialog.tsx
View File

@ -70,7 +70,7 @@ export function Dialog({
</DialogPrimitives.Close>
)}
<div className="flex gap-4 max-w-full">
{icon && <div className="pt-2 fill-current">{icon}</div>}
{icon && <div className="fill-current">{icon}</div>}
<div data-testid="dialog-content" className="flex-1">
{title && (
<h1

3
libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
View File

@ -26,9 +26,10 @@ export const DropdownMenuTrigger = forwardRef<
React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>
>(({ 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',
className
'hover:bg-neutral-100 dark:hover:bg-neutral-700'
);
return (
<DropdownMenuPrimitive.Trigger

2
libs/ui-toolkit/src/components/input-error/input-error.tsx
View File

@ -14,7 +14,7 @@ export const InputError = ({
...props
}: InputErrorProps) => {
const effectiveClassName = classNames(
'text-sm text-vega-pink flex items-center',
'text-sm text-vega-red flex items-center',
'mt-2',
{
'border-danger': intent === 'danger',

4
libs/ui-toolkit/src/components/key-value-table/key-value-table.tsx
View File

@ -72,9 +72,9 @@ export const KeyValueTableRow = ({
{ 'flex-row items-center': inline },
className
);
const dtClassNames = `break-words capitalize ${dtClassName}`;
const dtClassNames = `break-words ${dtClassName}`;
const ddClassNames = classNames(
'break-words text-neutral-500',
'break-words text-neutral-500 dark:text-neutral-300',
{
'font-mono': numerical,
},

4
libs/ui-toolkit/src/components/popover/popover.tsx
View File

@ -23,11 +23,11 @@ export const Popover = ({
<PopoverPrimitive.Content
data-testid="popover-content"
align="start"
className="p-4 rounded bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200"
className="p-4 rounded bg-neutral-50 dark:bg-neutral-800 dark:text-neutral-200 border border-neutral-400"
sideOffset={10}
>
<PopoverPrimitive.Close
className="px-4 py-2 absolute top-0 right-0"
className="px-4 py-2 absolute top-0 right-0 z-20"
data-testid="dialog-close"
>
<Icon name="cross" />

12
libs/ui-toolkit/src/components/tabs/tabs.tsx
View File

@ -19,7 +19,7 @@ export const Tabs = ({ children, active: activeDefaultId }: TabsProps) => {
className="h-full grid grid-rows-[min-content_1fr]"
onValueChange={(value) => setActiveTab(value)}
>
<div className="border-b border-neutral-300 dark:border-neutral-700">
<div className="border-b border-neutral-300 dark:border-neutral-600">
<TabsPrimitive.List
className="flex flex-nowrap overflow-visible"
role="tablist"
@ -28,9 +28,13 @@ export const Tabs = ({ children, active: activeDefaultId }: TabsProps) => {
if (!isValidElement(child) || child.props.hidden) return null;
const isActive = child.props.id === activeTab;
const triggerClass = classNames(
'relative px-4 py-2 border-r border-neutral-300 dark:border-neutral-700',
'text-black dark:text-white',
'uppercase'
'relative px-4 py-2 border-r border-neutral-300 dark:border-neutral-600',
'uppercase',
'inline-block after:content-[attr(data-testid)] after:block after:invisible after:overflow-hidden after:h-0 after:tracking-wider',
{
'text-neutral-400 dark:text-neutral-400 hover:text-neutral-500 dark:hover:text-neutral-300':
!isActive,
}
);
const borderClass = classNames(
'absolute bottom-[-1px] left-0 w-full h-0 border-b',

2
libs/ui-toolkit/src/utils/shared.ts
View File

@ -9,7 +9,7 @@ export const defaultFormElement = (hasError?: boolean) =>
'p-2 border-2 rounded-none',
'bg-transparent',
'border border-neutral-500 focus:border-black dark:focus:border-white',
'disabled:opacity-40',
'disabled:opacity-60',
{
'border-vega-pink': hasError,
}