chore: ui tweaks to select market panel (#1074)

* chore: ui tweaks to select market panel

* chore: add close button to popover/select market panel

* fix: fixing broken styling on cell data

* chore: tweaked styling for fees tooltip

* Revert "chore: tweaked styling for fees tooltip"

This reverts commit 3f1a34d835eb0cbea82847e37e66c5a4c8bf723d.

* chore: changing text case

* feat: adjust styles to align with petes changes

* feat: readd sticky table headers

* chore: linting fixes

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
This commit is contained in:
PeteWilliams 2022-08-31 06:46:42 +01:00 committed by GitHub
parent c259622848
commit 9199c79186
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 96 additions and 79 deletions

View File

@ -1,5 +1,5 @@
import { t } from '@vegaprotocol/react-helpers';
import { FormGroup, Input, InputError, Button } from '@vegaprotocol/ui-toolkit';
import { Input, InputError, Button } from '@vegaprotocol/ui-toolkit';
import React from 'react';
import { useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';

View File

@ -1,4 +1,3 @@
import classnames from 'classnames';
import { Link } from 'react-router-dom';
import { Button, Icon } from '@vegaprotocol/ui-toolkit';
import { useVoteInformation } from '../../hooks';

View File

@ -11,7 +11,6 @@ import { VoteButtonsContainer } from './vote-buttons';
import { VoteProgress } from './vote-progress';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { ProposalState } from '@vegaprotocol/types';
import BigNumber from 'bignumber.js';
interface VoteDetailsProps {
proposal: Proposal_proposal;

View File

@ -17,12 +17,12 @@ describe('market info is displayed', () => {
it('current fees displayed', () => {
cy.getByTestId(marketTitle).contains('Current fees').click();
validateMarketDataRow(0, 'Maker Fee', '0.02%');
validateMarketDataRow(1, 'Infrastructure Fee', '0.05%');
validateMarketDataRow(2, 'Liquidity Fee', '1.00%');
validateMarketDataRow(3, 'Total Fees', '1.04%');
});
it('market price', () => {
cy.getByTestId(marketTitle).contains('Market price').click();
validateMarketDataRow(0, 'Mark Price', '57.49');

View File

@ -5,7 +5,6 @@ import {
Button,
Dialog,
Icon,
Intent,
KeyValueTable,
KeyValueTableRow,
Splash,

View File

@ -1,4 +1,4 @@
import { render, screen, fireEvent, act } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { t } from '@vegaprotocol/react-helpers';
import { useEnvironment } from '../../hooks/use-environment';

View File

@ -1,10 +1,7 @@
import classNames from 'classnames';
import { Fragment, useState, useCallback } from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { useState, useCallback } from 'react';
import { t } from '@vegaprotocol/react-helpers';
import {
Link,
Icon,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,

View File

@ -23,9 +23,8 @@ import type {
MarketList_markets_fees_factors,
} from '../__generated__/MarketList';
import isNil from 'lodash/isNil';
import { Positions_party_positionsConnection_edges_node_market_tradableInstrument_instrument } from '@vegaprotocol/positions';
export const cellClassNames = 'px-2 first:text-left text-right capitalize';
export const cellClassNames = 'px-2 py-1 first:text-left text-right capitalize';
const FeesInfo = () => {
return (

View File

@ -7,7 +7,7 @@ export const SelectMarketTableHeader = ({
headers = columnHeaders,
}) => {
return (
<tr className="z-10">
<tr className="sticky top-0 z-10 border-b border-neutral-300 dark:border-neutral-700 bg-neutral-200 dark:bg-neutral-800">
{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/20 dark:hover:bg-white/20 cursor-pointer relative`}
className={`hover:bg-black/10 dark:hover:bg-white/20 cursor-pointer relative`}
>
{columns.map(({ value, className, dataTestId, onlyOnDetailed }, i) => {
if (!onlyOnDetailed || detailed === onlyOnDetailed) {

View File

@ -163,11 +163,11 @@ export const SelectMarketPopover = ({
Loading market data
</div>
) : (
<table className="relative text-sm w-full whitespace-nowrap -mx-2">
<>
{keypair &&
positionMarkets?.markets &&
positionMarkets.markets.length > 0 && (
<>
<table className="relative text-sm w-full whitespace-nowrap -mx-2">
<TableTitle>{t('My markets')}</TableTitle>
<SelectAllMarketsTableBody
data={positionMarkets}
@ -177,11 +177,16 @@ export const SelectMarketPopover = ({
columnsPositionMarkets(market, onSelectMarket)
}
/>
</>
</table>
)}
<TableTitle>{t('All markets')}</TableTitle>
<SelectAllMarketsTableBody data={data} onSelect={onSelectMarket} />
</table>
<table className="relative text-sm w-full whitespace-nowrap -mx-2">
<TableTitle>{t('All markets')}</TableTitle>
<SelectAllMarketsTableBody
data={data}
onSelect={onSelectMarket}
/>
</table>
</>
)}
</div>
</Popover>

View File

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

View File

@ -1,6 +1,5 @@
import React, { useState } from 'react';
import { Intent } from '../../utils/intent';
import { Button } from '../button';
import { Popover } from './popover';

View File

@ -1,4 +1,5 @@
import * as PopoverPrimitive from '@radix-ui/react-popover';
import { Icon } from '../icon';
export interface PopoverProps extends PopoverPrimitive.PopoverProps {
trigger: React.ReactNode | string;
@ -25,6 +26,12 @@ export const Popover = ({
className="p-4 rounded bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200"
sideOffset={10}
>
<PopoverPrimitive.Close
className="px-4 py-2 absolute top-0 right-0"
data-testid="dialog-close"
>
<Icon name="cross" />
</PopoverPrimitive.Close>
{children}
</PopoverPrimitive.Content>
</PopoverPrimitive.Portal>

View File

@ -1,9 +1,4 @@
import type {
ComponentStory,
ComponentMeta,
Meta,
Story,
} from '@storybook/react';
import type { ComponentStory, Meta, Story } from '@storybook/react';
import type { ToggleProps } from './toggle';
import { Toggle } from './toggle';
import { useState } from 'react';

View File

@ -1,5 +1,4 @@
import { t } from '@vegaprotocol/react-helpers';
import classNames from 'classnames';
export const VegaLogo = () => {
return (

117
yarn.lock
View File

@ -5453,7 +5453,15 @@
dependencies:
"@types/node" "*"
"@types/glob@*", "@types/glob@^7.1.1":
"@types/glob@*":
version "8.0.0"
resolved "https://registry.yarnpkg.com/@types/glob/-/glob-8.0.0.tgz#321607e9cbaec54f687a0792b2d1d370739455d2"
integrity sha512-l6NQsDDyQUVeoTynNpC9uRvCUint/gSUXQA2euwmTuWGvPY5LSDUu6tkCtJB2SvGQlJQzLaKqcGZP4//7EDveA==
dependencies:
"@types/minimatch" "*"
"@types/node" "*"
"@types/glob@^7.1.1":
version "7.2.0"
resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
integrity sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==
@ -5732,7 +5740,16 @@
dependencies:
"@types/react" "*"
"@types/react@*", "@types/react@18.0.17", "@types/react@^18.0.14":
"@types/react@*", "@types/react@^18.0.14":
version "18.0.18"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.18.tgz#9f16f33d57bc5d9dca848d12c3572110ff9429ac"
integrity sha512-6hI08umYs6NaiHFEEGioXnxJ+oEhY3eRz8VCUaudZmGdtvPviCJB8mgaMxaDWAdPSYd4eFavrPk2QIolwbLYrg==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"
"@types/react@18.0.17":
version "18.0.17"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.17.tgz#4583d9c322d67efe4b39a935d223edcc7050ccf4"
integrity sha512-38ETy4tL+rn4uQQi7mB81G7V1g0u2ryquNmsVIOKUAEIDK+3CUjZ6rSRpdvS99dNBnkLFL83qfmtLacGOTIhwQ==
@ -5921,13 +5938,13 @@
debug "^4.3.4"
"@typescript-eslint/parser@^5.21.0":
version "5.36.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.36.0.tgz#c08883073fb65acaafd268a987fd2314ce80c789"
integrity sha512-dlBZj7EGB44XML8KTng4QM0tvjI8swDh8MdpE5NX5iHWgWEfIuqSfSE+GPeCrCdj7m4tQLuevytd57jNDXJ2ZA==
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.36.1.tgz#931c22c7bacefd17e29734628cdec8b2acdcf1ce"
integrity sha512-/IsgNGOkBi7CuDfUbwt1eOqUXF9WGVBW9dwEe1pi+L32XrTsZIgmDFIi2RxjzsvB/8i+MIf5JIoTEH8LOZ368A==
dependencies:
"@typescript-eslint/scope-manager" "5.36.0"
"@typescript-eslint/types" "5.36.0"
"@typescript-eslint/typescript-estree" "5.36.0"
"@typescript-eslint/scope-manager" "5.36.1"
"@typescript-eslint/types" "5.36.1"
"@typescript-eslint/typescript-estree" "5.36.1"
debug "^4.3.4"
"@typescript-eslint/scope-manager@5.35.1":
@ -5938,13 +5955,13 @@
"@typescript-eslint/types" "5.35.1"
"@typescript-eslint/visitor-keys" "5.35.1"
"@typescript-eslint/scope-manager@5.36.0":
version "5.36.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.36.0.tgz#f4f859913add160318c0a5daccd3a030d1311530"
integrity sha512-PZUC9sz0uCzRiuzbkh6BTec7FqgwXW03isumFVkuPw/Ug/6nbAqPUZaRy4w99WCOUuJTjhn3tMjsM94NtEj64g==
"@typescript-eslint/scope-manager@5.36.1":
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.36.1.tgz#23c49b7ddbcffbe09082e6694c2524950766513f"
integrity sha512-pGC2SH3/tXdu9IH3ItoqciD3f3RRGCh7hb9zPdN2Drsr341zgd6VbhP5OHQO/reUqihNltfPpMpTNihFMarP2w==
dependencies:
"@typescript-eslint/types" "5.36.0"
"@typescript-eslint/visitor-keys" "5.36.0"
"@typescript-eslint/types" "5.36.1"
"@typescript-eslint/visitor-keys" "5.36.1"
"@typescript-eslint/type-utils@5.35.1":
version "5.35.1"
@ -5960,10 +5977,10 @@
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.35.1.tgz#af355fe52a0cc88301e889bc4ada72f279b63d61"
integrity sha512-FDaujtsH07VHzG0gQ6NDkVVhi1+rhq0qEvzHdJAQjysN+LHDCKDKCBRlZFFE0ec0jKxiv0hN63SNfExy0KrbQQ==
"@typescript-eslint/types@5.36.0":
version "5.36.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.36.0.tgz#cde7b94d1c09a4f074f46db99e7bd929fb0a5559"
integrity sha512-3JJuLL1r3ljRpFdRPeOtgi14Vmpx+2JcR6gryeORmW3gPBY7R1jNYoq4yBN1L//ONZjMlbJ7SCIwugOStucYiQ==
"@typescript-eslint/types@5.36.1":
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.36.1.tgz#1cf0e28aed1cb3ee676917966eb23c2f8334ce2c"
integrity sha512-jd93ShpsIk1KgBTx9E+hCSEuLCUFwi9V/urhjOWnOaksGZFbTOxAT47OH2d4NLJnLhkVD+wDbB48BuaycZPLBg==
"@typescript-eslint/typescript-estree@5.35.1":
version "5.35.1"
@ -5978,13 +5995,13 @@
semver "^7.3.7"
tsutils "^3.21.0"
"@typescript-eslint/typescript-estree@5.36.0":
version "5.36.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.36.0.tgz#0acce61b4850bdb0e578f0884402726680608789"
integrity sha512-EW9wxi76delg/FS9+WV+fkPdwygYzRrzEucdqFVWXMQWPOjFy39mmNNEmxuO2jZHXzSQTXzhxiU1oH60AbIw9A==
"@typescript-eslint/typescript-estree@5.36.1":
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.36.1.tgz#b857f38d6200f7f3f4c65cd0a5afd5ae723f2adb"
integrity sha512-ih7V52zvHdiX6WcPjsOdmADhYMDN15SylWRZrT2OMy80wzKbc79n8wFW0xpWpU0x3VpBz/oDgTm2xwDAnFTl+g==
dependencies:
"@typescript-eslint/types" "5.36.0"
"@typescript-eslint/visitor-keys" "5.36.0"
"@typescript-eslint/types" "5.36.1"
"@typescript-eslint/visitor-keys" "5.36.1"
debug "^4.3.4"
globby "^11.1.0"
is-glob "^4.0.3"
@ -6004,14 +6021,14 @@
eslint-utils "^3.0.0"
"@typescript-eslint/utils@^5.10.0", "@typescript-eslint/utils@^5.29.0":
version "5.36.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.36.0.tgz#104c864ecc1448417606359275368bf3872bbabb"
integrity sha512-wAlNhXXYvAAUBbRmoJDywF/j2fhGLBP4gnreFvYvFbtlsmhMJ4qCKVh/Z8OP4SgGR3xbciX2nmG639JX0uw1OQ==
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.36.1.tgz#136d5208cc7a3314b11c646957f8f0b5c01e07ad"
integrity sha512-lNj4FtTiXm5c+u0pUehozaUWhh7UYKnwryku0nxJlYUEWetyG92uw2pr+2Iy4M/u0ONMKzfrx7AsGBTCzORmIg==
dependencies:
"@types/json-schema" "^7.0.9"
"@typescript-eslint/scope-manager" "5.36.0"
"@typescript-eslint/types" "5.36.0"
"@typescript-eslint/typescript-estree" "5.36.0"
"@typescript-eslint/scope-manager" "5.36.1"
"@typescript-eslint/types" "5.36.1"
"@typescript-eslint/typescript-estree" "5.36.1"
eslint-scope "^5.1.1"
eslint-utils "^3.0.0"
@ -6023,12 +6040,12 @@
"@typescript-eslint/types" "5.35.1"
eslint-visitor-keys "^3.3.0"
"@typescript-eslint/visitor-keys@5.36.0":
version "5.36.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.36.0.tgz#565d35a5ca00d00a406a942397ead2cb190663ba"
integrity sha512-pdqSJwGKueOrpjYIex0T39xarDt1dn4p7XJ+6FqBWugNQwXlNGC5h62qayAIYZ/RPPtD+ButDWmpXT1eGtiaYg==
"@typescript-eslint/visitor-keys@5.36.1":
version "5.36.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.36.1.tgz#7731175312d65738e501780f923896d200ad1615"
integrity sha512-ojB9aRyRFzVMN3b5joSYni6FAS10BBSCAfKJhjJAV08t/a95aM6tAhz+O1jF+EtgxktuSO3wJysp2R+Def/IWQ==
dependencies:
"@typescript-eslint/types" "5.36.0"
"@typescript-eslint/types" "5.36.1"
eslint-visitor-keys "^3.3.0"
"@walletconnect/browser-utils@^1.8.0":
@ -9727,9 +9744,9 @@ cypress-real-events@^1.7.1:
integrity sha512-/Bg15RgJ0SYsuXc6lPqH08x19z6j2vmhWN4wXfJqm3z8BTAFiK2MvipZPzxT8Z0jJP0q7kuniWrLIvz/i/8lCQ==
cypress@^10.2.0:
version "10.6.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.6.0.tgz#13f46867febf2c3715874ed5dce9c2e946b175fe"
integrity sha512-6sOpHjostp8gcLO34p6r/Ci342lBs8S5z9/eb3ZCQ22w2cIhMWGUoGKkosabPBfKcvRS9BE4UxybBtlIs8gTQA==
version "10.7.0"
resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.7.0.tgz#2d37f8b9751c6de33ee48639cb7e67a2ce593231"
integrity sha512-gTFvjrUoBnqPPOu9Vl5SBHuFlzx/Wxg/ZXIz2H4lzoOLFelKeF7mbwYUOzgzgF0oieU2WhJAestQdkgwJMMTvQ==
dependencies:
"@cypress/request" "^2.88.10"
"@cypress/xvfb" "^1.2.4"
@ -10444,9 +10461,9 @@ dotenv-expand@^5.1.0:
integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
dotenv@^16.0.0, dotenv@^16.0.1:
version "16.0.1"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.1.tgz#8f8f9d94876c35dac989876a5d3a82a267fdce1d"
integrity sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==
version "16.0.2"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.2.tgz#0b0f8652c016a3858ef795024508cddc4bffc5bf"
integrity sha512-JvpYKUmzQhYoIFgK2MOnF3bciIZoItIIoryihy0rIA+H4Jy0FmgyKYAHCTN98P5ybGSJcIFbh6QKeJdtZd1qhA==
dotenv@^8.0.0:
version "8.6.0"
@ -10521,9 +10538,9 @@ ejs@^3.1.6, ejs@^3.1.7:
jake "^10.8.5"
electron-to-chromium@^1.4.202:
version "1.4.235"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.235.tgz#48ac33c4e869a1795013788099470061463d1890"
integrity sha512-eNU2SmVZYTzYVA5aAWmhAJbdVil5/8H5nMq6kGD0Yxd4k2uKIuT8YmS46I0QXY7iOoPPcb6jjem9/2xyuH5+XQ==
version "1.4.237"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.237.tgz#c695c5fedc3bb48f04ba1b39470c5aef2aaafd84"
integrity sha512-vxVyGJcsgArNOVUJcXm+7iY3PJAfmSapEszQD1HbyPLl0qoCmNQ1o/EX3RI7Et5/88In9oLxX3SGF8J3orkUgA==
elegant-spinner@^1.0.1:
version "1.0.1"
@ -18360,9 +18377,9 @@ rollup-pluginutils@^2.8.2:
estree-walker "^0.6.1"
rollup@^2.56.2:
version "2.78.1"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.1.tgz#52fe3934d9c83cb4f7c4cb5fb75d88591be8648f"
integrity sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==
version "2.79.0"
resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.0.tgz#9177992c9f09eb58c5e56cbfa641607a12b57ce2"
integrity sha512-x4KsrCgwQ7ZJPcFA/SUu6QVcYlO7uRLfLAy0DSA4NS2eG8japdbpM50ToH7z4iObodRYOJ0soneF0iaQRJ6zhA==
optionalDependencies:
fsevents "~2.3.2"
@ -18476,9 +18493,9 @@ sass@1.54.0:
source-map-js ">=0.6.2 <2.0.0"
sass@^1.42.1, sass@^1.49.9:
version "1.54.6"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.54.6.tgz#5a12c268db26555c335028e355d6b7b1a5b9b4c8"
integrity sha512-DUqJjR2WxXBcZjRSZX5gCVyU+9fuC2qDfFzoKX9rV4rCOcec5mPtEafTcfsyL3YJuLONjWylBne+uXVh5rrmFw==
version "1.54.7"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.54.7.tgz#a93fb1690472b161fab8f4ab34a66a0f3000c478"
integrity sha512-3q7MQz7sCpVG6TLhUfZwGOcd2/sm2ghYN2JEdRjNiW04ILdvahdo9GuAs+bxsxZ3hDCKv+wUT5w0iFWGU0CxlA==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"