Merge branch 'develop' of github.com:vegaprotocol/frontend-monorepo into develop

2022-09-13 10:58:14 +01:00 · 2022-09-13 10:58:14 +01:00 · 3eaa1fe512
commit 3eaa1fe512
parent 92077f4a5a 3ff5bbb5a7
29 changed files with 311 additions and 243 deletions
--- a/apps/static/src/assets/mainnet-tranches.json
+++ b/apps/static/src/assets/mainnet-tranches.json
@ -232,7 +232,7 @@
    "tranche_end": "2023-12-05T00:00:00.000Z",
    "total_added": "129999.45",
    "total_removed": "0",
-    "locked_amount": "106394.66488946230805625",
+    "locked_amount": "106213.256196636749978685",
    "deposits": [
      {
        "amount": "129999.45",
@ -298,7 +298,7 @@
    "tranche_end": "2023-09-03T00:00:00.000Z",
    "total_added": "52600",
    "total_removed": "0",
-    "locked_amount": "51230.43016869609472",
+    "locked_amount": "51120.22803145611028",
    "deposits": [
      {
        "amount": "2600",
@ -682,7 +682,7 @@
    "tranche_end": "2023-04-05T00:00:00.000Z",
    "total_added": "97499.58",
    "total_removed": "0",
-    "locked_amount": "47585.4567681301376248752",
+    "locked_amount": "47407.5117394524021021252",
    "deposits": [
      {
        "amount": "97499.58",
@ -715,7 +715,7 @@
    "tranche_end": "2023-04-05T00:00:00.000Z",
    "total_added": "135173.4239508",
    "total_removed": "0",
-    "locked_amount": "65041.104115645490107967157408",
+    "locked_amount": "64797.883982370617886030171276",
    "deposits": [
      {
        "amount": "135173.4239508",
@ -748,7 +748,7 @@
    "tranche_end": "2023-04-05T00:00:00.000Z",
    "total_added": "32499.86",
    "total_removed": "0",
-    "locked_amount": "20018.379905468400079546",
+    "locked_amount": "19943.521504849955184182",
    "deposits": [
      {
        "amount": "32499.86",
@ -781,7 +781,7 @@
    "tranche_end": "2023-04-05T00:00:00.000Z",
    "total_added": "10833.29",
    "total_removed": "0",
-    "locked_amount": "6515.788405469431257442",
+    "locked_amount": "6491.422722476852413578",
    "deposits": [
      {
        "amount": "10833.29",
@ -889,7 +889,7 @@
    "tranche_end": "2022-11-01T00:00:00.000Z",
    "total_added": "30000",
    "total_removed": "0",
-    "locked_amount": "8070.053970410628",
+    "locked_amount": "7945.3728864734298",
    "deposits": [
      {
        "amount": "7500",
@ -1006,7 +1006,7 @@
    "tranche_end": "2023-06-02T00:00:00.000Z",
    "total_added": "1939928.38",
    "total_removed": "479504.6187210477481",
-    "locked_amount": "1395134.471749858441357522",
+    "locked_amount": "1391070.132328404443679426",
    "deposits": [
      {
        "amount": "1852091.69",
@ -1292,7 +1292,7 @@
    "tranche_end": "2023-02-01T00:00:00.000Z",
    "total_added": "42500",
    "total_removed": "0",
-    "locked_amount": "32682.576458081723",
+    "locked_amount": "32505.94492250402725",
    "deposits": [
      {
        "amount": "12500",
@ -2159,7 +2159,7 @@
    "tranche_end": "2022-09-30T00:00:00.000Z",
    "total_added": "60916.66666633337",
    "total_removed": "20696.25757434884556896",
-    "locked_amount": "2732.8670885613374625452081355872",
+    "locked_amount": "2613.42189971663007907723962443745",
    "deposits": [
      {
        "amount": "2833.333333",
@ -5892,7 +5892,7 @@
    "tranche_id": 11,
    "tranche_start": "2021-09-03T00:00:00.000Z",
    "tranche_end": "2022-09-03T00:00:00.000Z",
-    "total_added": "35958.000000000000000003",
+    "total_added": "35960.000000000000000003",
    "total_removed": "17098.49537348884",
    "locked_amount": "0",
    "deposits": [
@ -5911,6 +5911,11 @@
        "user": "0xEED071df0b6f8C4088b9CfD9f2ADE131C8591613",
        "tx": "0x0d569e9b901099d43f017945635ad8c2b566ce2290abb2583b018e83df34642b"
      },
+      {
+        "amount": "2",
+        "user": "0x60901F5a6a66BCaD910A97e85373A00996B361f5",
+        "tx": "0xa87cd2caf4f27d7a60443ec952b831b005a809803fc899c4bcc3ca12016299eb"
+      },
      {
        "amount": "15",
        "user": "0xb4eE687f019A8e48F7087f4b4f8653208B8cc48f",
@ -12530,6 +12535,21 @@
        "withdrawn_tokens": "0",
        "remaining_tokens": "2"
      },
+      {
+        "address": "0x60901F5a6a66BCaD910A97e85373A00996B361f5",
+        "deposits": [
+          {
+            "amount": "2",
+            "user": "0x60901F5a6a66BCaD910A97e85373A00996B361f5",
+            "tranche_id": 11,
+            "tx": "0xa87cd2caf4f27d7a60443ec952b831b005a809803fc899c4bcc3ca12016299eb"
+          }
+        ],
+        "withdrawals": [],
+        "total_tokens": "2",
+        "withdrawn_tokens": "0",
+        "remaining_tokens": "2"
+      },
      {
        "address": "0xb4eE687f019A8e48F7087f4b4f8653208B8cc48f",
        "deposits": [
@ -22455,7 +22475,7 @@
    "tranche_end": "2023-06-05T00:00:00.000Z",
    "total_added": "3732368.4671",
    "total_removed": "204390.7646836173642",
-    "locked_amount": "2168337.2735760661538675426",
+    "locked_amount": "2162091.79893798351430427894",
    "deposits": [
      {
        "amount": "1998.95815",
@ -23322,8 +23342,8 @@
    "tranche_start": "2022-06-05T00:00:00.000Z",
    "tranche_end": "2023-12-05T00:00:00.000Z",
    "total_added": "15870102.715470999700000001",
-    "total_removed": "203050.3452740934272444",
-    "locked_amount": "12988472.337182063502716333679636461712625",
+    "total_removed": "203258.7850094080512444",
+    "locked_amount": "12966326.2851132206444730663636805143254933",
    "deposits": [
      {
        "amount": "16249.93",
@ -23852,6 +23872,11 @@
        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
        "tx": "0xe0040011ab92c3d951d3449fa6159e095b1893639c47fdb1a72aa87c741bdf56"
      },
+      {
+        "amount": "208.439735314624",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0xa2cf8d5f7caa97b4c6804c0bce8003115d61772edf6ab6f8c9b3de503eafd2f5"
+      },
      {
        "amount": "305.8599694076328",
        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@ -24435,6 +24460,12 @@
            "tranche_id": 2,
            "tx": "0xe0040011ab92c3d951d3449fa6159e095b1893639c47fdb1a72aa87c741bdf56"
          },
+          {
+            "amount": "208.439735314624",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0xa2cf8d5f7caa97b4c6804c0bce8003115d61772edf6ab6f8c9b3de503eafd2f5"
+          },
          {
            "amount": "305.8599694076328",
            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@ -24893,8 +24924,8 @@
          }
        ],
        "total_tokens": "259998.8875",
-        "withdrawn_tokens": "47135.599794757122",
-        "remaining_tokens": "212863.287705242878"
+        "withdrawn_tokens": "47344.039530071746",
+        "remaining_tokens": "212654.847969928254"
      },
      {
        "address": "0x89051CAb67Bc7F8CC44F7e270c6EDaf1EC57676c",
@ -26439,8 +26470,8 @@
    "tranche_start": "2021-11-05T00:00:00.000Z",
    "tranche_end": "2023-05-05T00:00:00.000Z",
    "total_added": "14597706.0446472999",
-    "total_removed": "2764683.361107610704396897",
-    "locked_amount": "6269429.503217293486664487151997355",
+    "total_removed": "2764972.018594596729147647",
+    "locked_amount": "6248984.409351215960935111906418583",
    "deposits": [
      {
        "amount": "129284.449",
@ -26674,6 +26705,11 @@
        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
        "tx": "0x5940c1d1266c4aee837eb2a10ea1a42f52182c5fb2d9f4ca10752ec099ddc239"
      },
+      {
+        "amount": "288.65748698602475075",
+        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+        "tx": "0x0fb5472a41850ad312926ca6a39df1901579d075b0b8836459e2cd7f96353a8b"
+      },
      {
        "amount": "551.363354573845008",
        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@ -28775,6 +28811,12 @@
            "tranche_id": 3,
            "tx": "0x5940c1d1266c4aee837eb2a10ea1a42f52182c5fb2d9f4ca10752ec099ddc239"
          },
+          {
+            "amount": "288.65748698602475075",
+            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+            "tranche_id": 3,
+            "tx": "0x0fb5472a41850ad312926ca6a39df1901579d075b0b8836459e2cd7f96353a8b"
+          },
          {
            "amount": "551.363354573845008",
            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@ -30511,8 +30553,8 @@
          }
        ],
        "total_tokens": "359123.469575",
-        "withdrawn_tokens": "204783.7136307165325265",
-        "remaining_tokens": "154339.7559442834674735"
+        "withdrawn_tokens": "205072.37111770255727725",
+        "remaining_tokens": "154051.09845729744272275"
      },
      {
        "address": "0xBdd412797c1B78535Afc5F71503b91fAbD0160fB",
@ -31599,8 +31641,8 @@
    "tranche_start": "2021-10-05T00:00:00.000Z",
    "tranche_end": "2023-04-05T00:00:00.000Z",
    "total_added": "5778205.3912159303",
-    "total_removed": "1769795.462408277490426354",
-    "locked_amount": "2160186.110374920105452205502061688",
+    "total_removed": "1773434.744647395163801354",
+    "locked_amount": "2152108.130137534146322763792771381",
    "deposits": [
      {
        "amount": "552496.6455",
@ -31759,6 +31801,11 @@
        "user": "0x5565d64f29Ea17355106DF3bA5903Eb793B3e139",
        "tx": "0x0954f744fc48cdb36187ba72505a5ca1c053d05da816b41230b35d86069fdcb0"
      },
+      {
+        "amount": "3639.282239117673375",
+        "user": "0xafa64cCa337eFEE0AD827F6C2684e69275226e90",
+        "tx": "0x2a7ebd8748742d3bf0ce4f1ee46c575aa744f0d83915583bbd262f504044d462"
+      },
      {
        "amount": "8456.402651116281081",
        "user": "0xafa64cCa337eFEE0AD827F6C2684e69275226e90",
@ -32818,6 +32865,12 @@
          }
        ],
        "withdrawals": [
+          {
+            "amount": "3639.282239117673375",
+            "user": "0xafa64cCa337eFEE0AD827F6C2684e69275226e90",
+            "tranche_id": 4,
+            "tx": "0x2a7ebd8748742d3bf0ce4f1ee46c575aa744f0d83915583bbd262f504044d462"
+          },
          {
            "amount": "8456.402651116281081",
            "user": "0xafa64cCa337eFEE0AD827F6C2684e69275226e90",
@ -32952,8 +33005,8 @@
          }
        ],
        "total_tokens": "331498.5873",
-        "withdrawn_tokens": "203997.978690347971047",
-        "remaining_tokens": "127500.608609652028953"
+        "withdrawn_tokens": "207637.260929465644422",
+        "remaining_tokens": "123861.326370534355578"
      },
      {
        "address": "0x16da609341ed67750A8BCC5AAa2005471006Cd77",
@ -33042,7 +33095,7 @@
    "tranche_end": "2023-06-05T00:00:00.000Z",
    "total_added": "472355.6199999996",
    "total_removed": "3216.01601557326",
-    "locked_amount": "343585.43574240396939067269203448",
+    "locked_amount": "342595.80458534469382288375849824",
    "deposits": [
      {
        "amount": "3000",
--- a/apps/static/src/assets/testnet-tranches.json
+++ b/apps/static/src/assets/testnet-tranches.json
@ -89,7 +89,7 @@
    "tranche_end": "2022-10-12T00:53:20.000Z",
    "total_added": "1010.000000000000000001",
    "total_removed": "668.4622323651",
-    "locked_amount": "81.72253456367329370008091340055809237",
+    "locked_amount": "79.60645389396243020007881827118214102",
    "deposits": [
      {
        "amount": "1000",
--- a/apps/token-e2e/src/fixtures/proposals/freeform.json
+++ b/apps/token-e2e/src/fixtures/proposals/freeform.json
@ -1,6 +1,6 @@
 {
  "rationale": {
-    "title": "An example freeform proposal",
+    "title": "An example freeform proposal with unique number of: ",
    "description": "I propose that everyone evaluate the following IPFS document and vote Yes if they agree. [bafybeigwwctpv37xdcwacqxvekr6e4kaemqsrv34em6glkbiceo3fcy4si](https://dweb.link/ipfs/bafybeigwwctpv37xdcwacqxvekr6e4kaemqsrv34em6glkbiceo3fcy4si)"
  },
  "terms": {
--- a/apps/token-e2e/src/integration/flow/governance-flow.cy.js
+++ b/apps/token-e2e/src/integration/flow/governance-flow.cy.js
@ -196,11 +196,7 @@ context('Governance flow - with eth and vega wallets connected', function () {
        .then((proposalId) => {
          cy.get('[data-testid="set-proposals-filter-visible"]').click();
          cy.get('[data-testid="filter-input"]').type(proposalId);
-          cy.get(`#${proposalId}`).should(
-            'contain',
-            `Freeform proposal: ${proposalId}`,
-            txTimeout
-          );
+          cy.get(`#${proposalId}`).should('contain', proposalId);
        });
    });

@ -230,11 +226,7 @@ context('Governance flow - with eth and vega wallets connected', function () {
        let proposalId = proposal.response.body.data.busEvents[0].event.id;
        cy.get('[data-testid="set-proposals-filter-visible"]').click();
        cy.get('[data-testid="filter-input"]').type(proposerId);
-        cy.get(`#${proposalId}`).should(
-          'contain',
-          `Freeform proposal: ${proposalId}`,
-          txTimeout
-        );
+        cy.get(`#${proposalId}`).should('contain', proposalId);
      });
    });

@ -264,7 +256,7 @@ context('Governance flow - with eth and vega wallets connected', function () {
        .then((proposalId) => {
          cy.get(openProposals).within(() => {
            cy.get(`#${proposalId}`)
-              .should('contain', `Freeform proposal: ${proposalId}`, txTimeout)
+              .should('contain', proposalId)
              .and('contain', 'Open')
              .and('be.visible')
              .within(() => {
--- a/apps/token-e2e/src/support/wallet-vega.functions.js
+++ b/apps/token-e2e/src/support/wallet-vega.functions.js
@ -1,5 +1,6 @@
 const vegaWalletContainer = '[data-testid="vega-wallet"]';
 const restConnectorForm = '[data-testid="rest-connector-form"]';
+const vegaWalletNameElement = '[data-testid="wallet-name"]';
 const vegaWalletName = Cypress.env('vegaWalletName');
 const vegaWalletLocation = Cypress.env('vegaWalletLocation');
 const vegaWalletPassphrase = Cypress.env('vegaWalletPassphrase');
@ -14,6 +15,11 @@ Cypress.Commands.add('vega_wallet_import', () => {
  cy.exec(
    `vegawallet service run --network DV --automatic-consent  --home ${vegaWalletLocation}`
  );
+  cy.exec(`vegawallet version`)
+    .its('stdout')
+    .then((output) => {
+      cy.log(output);
+    });
 });

 Cypress.Commands.add('vega_wallet_connect', () => {
@ -31,5 +37,5 @@ Cypress.Commands.add('vega_wallet_connect', () => {
    cy.get('#passphrase').click().type(vegaWalletPassphrase);
    cy.get('button').contains('Connect').click();
  });
-  cy.contains(`${vegaWalletName} key`, { timeout: 20000 }).should('be.visible');
+  cy.get(vegaWalletNameElement).should('be.visible');
 });
--- a/apps/trading-e2e/src/integration/markets.cy.ts
+++ b/apps/trading-e2e/src/integration/markets.cy.ts
@ -127,7 +127,7 @@ describe('markets table', () => {
  }

  function verifyMarketSummaryDisplayed() {
-    const marketSummaryBlock = 'market-summary';
+    const marketSummaryBlock = 'header-summary';
    const percentageValue = 'price-change-percentage';
    const priceChangeValue = 'price-change';
    const tradingVolume = 'trading-volume';
--- a/apps/trading/.env
+++ b/apps/trading/.env
@ -1,6 +1,6 @@
 # App configuration variables
 NX_VEGA_ENV=TESTNET
-NX_VEGA_URL=https://api.n09.testnet.vega.xyz/graphql
+NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
 NX_VEGA_NETWORKS={\"MAINNET\":\"https://alpha.console.vega.xyz\"}
--- a/apps/trading/components/footer/footer.tsx
+++ b/apps/trading/components/footer/footer.tsx
@ -1,6 +1,6 @@
 export const Footer = () => {
  return (
-    <footer className="px-4 py-2 text-xs border-t border-neutral-300 dark:border-neutral-600 bg-neutral-100 dark:bg-neutral-800">
+    <footer className="px-4 py-2 text-xs border-t border-default bg-neutral-100 dark:bg-neutral-800">
      <div className="flex justify-between">
        <div>Status</div>
      </div>
--- a/apps/trading/components/header/header.tsx
+++ b/apps/trading/components/header/header.tsx
@ -5,19 +5,20 @@ import { cloneElement } from 'react';

 interface TradeMarketHeaderProps {
  title: ReactNode;
-  children: ReactElement[];
+  children: Array<ReactElement | null>;
 }

 export const Header = ({ title, children }: TradeMarketHeaderProps) => {
  return (
-    <header className="w-screen xl:px-4 pt-4 border-b border-neutral-300 dark:border-neutral-600">
+    <header className="w-screen xl:px-4 pt-4 border-b border-default">
      <div className="xl:flex xl:gap-4  items-start">
-        <div className="px-4 mb-2">{title}</div>
+        <div className="mb-4 xl:mb-0">{title}</div>
        <div
-          data-testid="market-summary"
+          data-testid="header-summary"
          className="flex flex-nowrap items-start xl:flex-1 w-full overflow-x-auto text-xs "
        >
          {Children.map(children, (child, index) => {
+            if (!child) return null;
            return cloneElement(child, {
              id: `header-stat-${index}`,
            });
@ -40,17 +41,17 @@ 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-600';
-  const itemHeading = 'text-neutral-400';
+    'min-w-min w-[120px] whitespace-nowrap pb-3 px-4 border-l border-default';
+  const itemHeading = 'text-neutral-500 dark:text-neutral-400';

  return (
    <div className={itemClass}>
+      <div id={id}>{heading}</div>
      <Tooltip description={description}>
-        <div id={id} className={itemHeading}>
-          {heading}
+        <div aria-labelledby={id} className={itemHeading}>
+          {children}
        </div>
      </Tooltip>
-      <div aria-labelledby={id}>{children}</div>
    </div>
  );
 };
--- a/apps/trading/components/icons/vega.tsx
+++ b/apps/trading/components/icons/vega.tsx
@ -1,7 +1,7 @@
 import classNames from 'classnames';

 export function Vega({ className }: { className?: string }) {
-  const svgClasses = classNames(className, 'fill-white');
+  const svgClasses = classNames(className, 'fill-current');
  return (
    <svg
      width="86"
--- a/apps/trading/components/navbar/navbar.tsx
+++ b/apps/trading/components/navbar/navbar.tsx
@ -20,7 +20,7 @@ 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-400 bg-black">
+    <div className="px-4 flex items-stretch border-b border-default bg-black text-white">
      <div className="flex gap-4 mr-4 items-center h-full">
        <Link href="/" passHref={true}>
          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
@ -28,7 +28,7 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
            <Vega className="w-13" />
          </a>
        </Link>
-        <NetworkSwitcher fixedBg="dark" />
+        <NetworkSwitcher theme="dark" />
      </div>
      <nav className="flex items-center">
        {[
--- a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
+++ b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
@ -30,7 +30,6 @@ export const VegaWalletConnectButton = ({
    return (
      <DropdownMenu open={dropdownOpen}>
        <DropdownMenuTrigger
-          className="text-white hover:!bg-neutral-700"
          data-testid="manage-vega-wallet"
          onClick={() => setDropdownOpen((curr) => !curr)}
        >
--- a/apps/trading/pages/markets/trade-grid.tsx
+++ b/apps/trading/pages/markets/trade-grid.tsx
@ -20,7 +20,6 @@ import {
  ResizableGrid,
  ResizableGridPanel,
  ButtonLink,
-  Tooltip,
  PriceCellChange,
  Link,
 } from '@vegaprotocol/ui-toolkit';
@ -41,6 +40,7 @@ import {
 } from '@vegaprotocol/types';
 import { TradingModeTooltip } from '../../components/trading-mode-tooltip';
 import { useRouter } from 'next/router';
+import { Header, HeaderStat } from '../../components/header';

 const TradingViews = {
  Candles: CandlesChartContainer,
@ -62,15 +62,16 @@ type ExpiryLabelProps = {
 };

 const ExpiryLabel = ({ market }: ExpiryLabelProps) => {
+  let content = null;
  if (market.marketTimestamps.close === null) {
-    return <>{t('Not time-based')}</>;
+    content = t('Not time-based');
+  } else {
+    const closeDate = new Date(market.marketTimestamps.close);
+    const isExpired = Date.now() - closeDate.valueOf() > 0;
+    const expiryDate = getDateFormat().format(closeDate);
+    content = `${isExpired ? `${t('Expired')} ` : ''} ${expiryDate}`;
  }
-
-  const closeDate = new Date(market.marketTimestamps.close);
-  const isExpired = Date.now() - closeDate.valueOf() > 0;
-  const expiryDate = getDateFormat().format(closeDate);
-
-  return <>{`${isExpired ? `${t('Expired')} ` : ''} ${expiryDate}`}</>;
+  return <div data-testid="trading-expiry">{content}</div>;
 };

 type ExpiryTooltipContentProps = {
@ -115,6 +116,7 @@ export const TradeMarketHeader = ({
  market,
  onSelect,
 }: TradeMarketHeaderProps) => {
+  const { push } = useRouter();
  const { VEGA_EXPLORER_URL } = useEnvironment();
  const { setAssetDetailsDialogOpen, setAssetDetailsDialogSymbol } =
    useAssetDetailsDialogStore();
@ -122,123 +124,92 @@ export const TradeMarketHeader = ({
  const candlesClose: string[] = (market?.candles || [])
    .map((candle) => candle?.close)
    .filter((c): c is CandleClose => c !== null);
-  const hasExpiry = market.marketTimestamps.close !== null;
  const symbol =
    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-600';
-  const itemHeading = 'text-neutral-500 dark:text-neutral-400';
-  const { push } = useRouter();
-
  return (
-    <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>
-          <SelectMarketPopover
-            marketName={market.tradableInstrument.instrument.name}
-            onSelect={onSelect}
+    <Header
+      title={
+        <SelectMarketPopover
+          marketName={market.tradableInstrument.instrument.name}
+          onSelect={onSelect}
+        />
+      }
+    >
+      <HeaderStat
+        heading={t('Expiry')}
+        description={
+          <ExpiryTooltipContent
+            market={market}
+            explorerUrl={VEGA_EXPLORER_URL}
          />
+        }
+      >
+        <ExpiryLabel market={market} />
+      </HeaderStat>
+      <HeaderStat heading={t('Change (24h)')}>
+        <PriceCellChange
+          candles={candlesClose}
+          decimalPlaces={market.decimalPlaces}
+        />
+      </HeaderStat>
+      <HeaderStat heading={t('Volume')}>
+        <div data-testid="trading-volume">
+          {market.data && market.data.indicativeVolume !== '0'
+            ? addDecimalsFormatNumber(
+                market.data.indicativeVolume,
+                market.positionDecimalPlaces
+              )
+            : '-'}
        </div>
-        <div
-          data-testid="market-summary"
-          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>
-            <Tooltip
-              align="start"
-              description={
-                <ExpiryTooltipContent
-                  market={market}
-                  explorerUrl={VEGA_EXPLORER_URL}
-                />
-              }
-            >
-              <div
-                data-testid="trading-expiry"
-                className={classNames({
-                  'underline decoration-dashed': !hasExpiry,
-                })}
-              >
-                <ExpiryLabel market={market} />
-              </div>
-            </Tooltip>
-          </div>
-          <div className={itemClass}>
-            <div className={itemHeading}>{t('Change (24h)')}</div>
-            <PriceCellChange
-              candles={candlesClose}
-              decimalPlaces={market.decimalPlaces}
-            />
-          </div>
-          <div className={itemClass}>
-            <div className={itemHeading}>{t('Volume')}</div>
-            <div data-testid="trading-volume">
-              {market.data && market.data.indicativeVolume !== '0'
-                ? addDecimalsFormatNumber(
-                    market.data.indicativeVolume,
-                    market.positionDecimalPlaces
-                  )
-                : '-'}
-            </div>
-          </div>
-
-          <div className={itemClass}>
-            <div className={itemHeading}>{t('Trading mode')}</div>
-            <Tooltip
-              align="start"
-              description={
-                <TradingModeTooltip
-                  market={market}
-                  onSelect={(marketId: string) => {
-                    onSelect(marketId);
-                    push(`/liquidity/${marketId}`);
-                  }}
-                />
-              }
-            >
-              <div data-testid="trading-mode">
-                {market.tradingMode ===
-                  MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
-                market.data?.trigger &&
-                market.data.trigger !==
-                  AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
-                  ? `${MarketTradingModeMapping[market.tradingMode]}
+      </HeaderStat>
+      <HeaderStat
+        heading={t('Trading mode')}
+        description={
+          <TradingModeTooltip
+            market={market}
+            onSelect={(marketId: string) => {
+              onSelect(marketId);
+              push(`/liquidity/${marketId}`);
+            }}
+          />
+        }
+      >
+        <div data-testid="trading-mode">
+          {market.tradingMode ===
+            MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
+          market.data?.trigger &&
+          market.data.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
+            ? `${MarketTradingModeMapping[market.tradingMode]}
                     - ${AuctionTriggerMapping[market.data.trigger]}`
-                  : MarketTradingModeMapping[market.tradingMode]}
-              </div>
-            </Tooltip>
-          </div>
-          <div className={itemClass}>
-            <div className={itemHeading}>{t('Price')}</div>
-            <div data-testid="mark-price">
-              {market.data && market.data.markPrice !== '0'
-                ? addDecimalsFormatNumber(
-                    market.data.markPrice,
-                    market.decimalPlaces
-                  )
-                : '-'}
-            </div>
-          </div>
-          {symbol && (
-            <div className={itemClass}>
-              <div className={itemHeading}>{t('Settlement asset')}</div>
-              <div data-testid="trading-mode">
-                <ButtonLink
-                  onClick={() => {
-                    setAssetDetailsDialogOpen(true);
-                    setAssetDetailsDialogSymbol(symbol);
-                  }}
-                >
-                  {symbol}
-                </ButtonLink>
-              </div>
-            </div>
-          )}
+            : MarketTradingModeMapping[market.tradingMode]}
        </div>
-      </div>
-    </header>
+      </HeaderStat>
+      <HeaderStat heading={t('Price')}>
+        <div data-testid="mark-price">
+          {market.data && market.data.markPrice !== '0'
+            ? addDecimalsFormatNumber(
+                market.data.markPrice,
+                market.decimalPlaces
+              )
+            : '-'}
+        </div>
+      </HeaderStat>
+      {symbol ? (
+        <HeaderStat heading={t('Settlement asset')}>
+          <div data-testid="trading-mode">
+            <ButtonLink
+              onClick={() => {
+                setAssetDetailsDialogOpen(true);
+                setAssetDetailsDialogSymbol(symbol);
+              }}
+            >
+              {symbol}
+            </ButtonLink>
+          </div>
+        </HeaderStat>
+      ) : null}
+    </Header>
  );
 };

@ -346,14 +317,7 @@ const TradeGridChild = ({ children }: TradeGridChildProps) => {
  return (
    <section className="h-full">
      <AutoSizer>
-        {({ width, height }) => (
-          <div
-            style={{ width, height }}
-            className="overflow-auto border-[1px] dark:border-neutral-600"
-          >
-            {children}
-          </div>
-        )}
+        {({ width, height }) => <div style={{ width, height }}>{children}</div>}
      </AutoSizer>
    </section>
  );
@ -398,7 +362,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-600">
+      <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
        {Object.keys(TradingViews).map((key) => {
          const isActive = view === key;
          const className = classNames('p-4 min-w-[100px] capitalize', {
--- a/apps/trading/pages/styles.css
+++ b/apps/trading/pages/styles.css
@ -18,3 +18,7 @@ html.dark {
  --focus-border: theme('colors.vega.yellow');
  --separator-border: theme('colors.neutral.600');
 }
+
+.border-default {
+  @apply border-neutral-300 dark:border-neutral-600;
+}
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
@ -60,6 +60,10 @@ export const DealTicket = ({
          price:
            order.price && removeDecimal(order.price, market.decimalPlaces),
          size: removeDecimal(order.size, market.positionDecimalPlaces),
+          expiresAt:
+            order.timeInForce === OrderTimeInForce.TIME_IN_FORCE_GTT
+              ? order.expiresAt
+              : undefined,
        });
      }
    },
--- a/libs/environment/src/components/network-switcher/network-switcher.tsx
+++ b/libs/environment/src/components/network-switcher/network-switcher.tsx
@ -69,11 +69,7 @@ const NetworkLabel = ({
  </span>
 );

-export const NetworkSwitcher = ({
-  fixedBg,
-}: {
-  fixedBg?: 'dark' | 'light';
-}) => {
+export const NetworkSwitcher = ({ theme }: { theme?: 'dark' | 'light' }) => {
  const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
  const [isOpen, setOpen] = useState(false);
  const [isAdvancedView, setAdvancedView] = useState(false);
@ -88,10 +84,9 @@ export const NetworkSwitcher = ({
    [setOpen, setAdvancedView]
  );

-  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',
+  const dropdownTriggerClasses = classNames({
+    'text-black hover:!bg-neutral-300': theme === 'light',
+    'text-white hover:!bg-neutral-700': theme === 'dark',
  });

  return (
--- a/libs/market-depth/src/lib/orderbook.tsx
+++ b/libs/market-depth/src/lib/orderbook.tsx
@ -8,10 +8,11 @@ import {
  useState,
  useMemo,
  useCallback,
+  useContext,
 } from 'react';
 import classNames from 'classnames';

-import { formatNumber, t, useThemeSwitcher } from '@vegaprotocol/react-helpers';
+import { formatNumber, t, ThemeContext } from '@vegaprotocol/react-helpers';
 import { MarketTradingMode } from '@vegaprotocol/types';
 import { OrderbookRow } from './orderbook-row';
 import { createRow, getPriceLevel } from './orderbook-data';
@ -27,7 +28,7 @@ interface OrderbookProps extends OrderbookData {

 const HorizontalLine = ({ top, testId }: { top: string; testId: string }) => (
  <div
-    className="absolute border-b border-neutral-300 dark:border-neutral-600 inset-x-0"
+    className="absolute border-b border-default inset-x-0"
    style={{ top }}
    data-testid={testId}
  />
@ -106,7 +107,7 @@ export const Orderbook = ({
  resolution,
  onResolutionChange,
 }: OrderbookProps) => {
-  const [theme] = useThemeSwitcher();
+  const theme = useContext(ThemeContext);
  const scrollElement = useRef<HTMLDivElement>(null);
  // scroll offset for which rendered rows are selected, will change after user will scroll to margin of rendered data
  const [scrollOffset, setScrollOffset] = useState(0);
@ -320,7 +321,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-600"
+        className="sticky top-0 grid grid-cols-4 gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-default"
        style={{ gridAutoRows: '17px' }}
      >
        <div>{t('Bid vol')}</div>
@ -344,7 +345,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-600 mt-2 z-10 bg-white dark:bg-black"
+        className="sticky bottom-0 grid grid-cols-4 gap-2 border-t-[1px] border-default mt-2 z-10 bg-white dark:bg-black"
        style={{ gridAutoRows: '17px' }}
      >
        <div className="col-start-2">
--- a/libs/market-info/src/components/market-info/info-market.tsx
+++ b/libs/market-info/src/components/market-info/info-market.tsx
@ -335,7 +335,7 @@ export const Info = ({ market, onSelect }: InfoProps) => {
        <p className={headerClassName}>{t('Market data')}</p>
        <Accordion panels={marketDataPanels} />
      </div>
-      <div className="mb-4">
+      <div className="mb-8">
        <p className={headerClassName}>{t('Market specification')}</p>
        <Accordion panels={marketSpecPanels} />
      </div>
--- a/libs/market-list/src/lib/components/select-market-columns.tsx
+++ b/libs/market-list/src/lib/components/select-market-columns.tsx
@ -24,7 +24,7 @@ import type {
 } from '../__generated__/MarketList';
 import isNil from 'lodash/isNil';

-export const cellClassNames = 'px-0 py-1 first:text-left text-right';
+export const cellClassNames = 'py-1 first:text-left text-right';

 const FeesInfo = () => {
  return (
--- a/libs/market-list/src/lib/components/select-market-table.tsx
+++ b/libs/market-list/src/lib/components/select-market-table.tsx
@ -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-600 bg-inherit">
+    <tr className="sticky top-0 z-10 border-b border-default bg-inherit">
      {headers.map(({ value, className, onlyOnDetailed }, i) => {
        const thClass = classNames(
          'font-normal text-neutral-500 dark:text-neutral-400',
--- a/libs/market-list/src/lib/components/select-market.tsx
+++ b/libs/market-list/src/lib/components/select-market.tsx
@ -76,7 +76,7 @@ export const SelectAllMarketsTableBody = ({
  if (!data) return null;
  return (
    <>
-      <thead className="bg-neutral-50 dark:bg-neutral-800">
+      <thead className="bg-neutral-100 dark:bg-neutral-800">
        <SelectMarketTableHeader detailed={true} headers={headers} />
      </thead>
      {/* Border styles required to create space between tbody elements margin/padding dont work */}
@ -101,7 +101,7 @@ export const SelectMarketPopover = ({
  onSelect: (id: string) => void;
 }) => {
  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';
+    'sm:text-lg md:text-xl lg:text-2xl flex items-center gap-2 whitespace-nowrap hover:text-neutral-500 dark:hover:text-neutral-300';
  const { keypair } = useVegaWallet();
  const [open, setOpen] = useState(false);
  const { data, loading: marketsLoading } = useMarketList();
--- a/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx
+++ b/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx
@ -3,6 +3,7 @@ import {
  addDecimalsFormatNumber,
  toDecimal,
  Size,
+  getDateTimeFormat,
 } from '@vegaprotocol/react-helpers';
 import { OrderType } from '@vegaprotocol/types';
 import {
@ -13,6 +14,7 @@ import {
  Dialog,
  Icon,
 } from '@vegaprotocol/ui-toolkit';
+import { OrderTimeInForce } from '@vegaprotocol/types';
 import { useForm } from 'react-hook-form';
 import type { OrderFields } from '../order-data-provider';

@ -77,35 +79,40 @@ export const OrderEditDialog = ({
          </p>
        </div>
      </div>
+      {order.timeInForce === OrderTimeInForce.TIME_IN_FORCE_GTT &&
+        order.expiresAt && (
+          <div>
+            <p className={headerClassName}>{t(`Expires at`)}</p>
+            <p>{getDateTimeFormat().format(new Date(order.expiresAt))}</p>
+          </div>
+        )}

-      <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
-              type="number"
-              step={step}
-              {...register('entryPrice', {
-                required: t('You need to provide a price'),
-                validate: {
-                  min: (value) =>
-                    Number(value) > 0
-                      ? true
-                      : t('The price cannot be negative'),
-                },
-              })}
-              id="entryPrice"
-            />
-            {errors.entryPrice?.message && (
-              <InputError intent="danger">
-                {errors.entryPrice.message}
-              </InputError>
-            )}
-          </FormGroup>
-          <Button variant="primary" size="md" type="submit">
-            {t('Update')}
-          </Button>
-        </form>
-      </div>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        data-testid="edit-order"
+        className="w-1/2 mt-4"
+      >
+        <FormGroup label={t('Entry price')} labelFor="entryPrice">
+          <Input
+            type="number"
+            step={step}
+            {...register('entryPrice', {
+              required: t('You need to provide a price'),
+              validate: {
+                min: (value) =>
+                  Number(value) > 0 ? true : t('The price cannot be negative'),
+              },
+            })}
+            id="entryPrice"
+          />
+          {errors.entryPrice?.message && (
+            <InputError intent="danger">{errors.entryPrice.message}</InputError>
+          )}
+        </FormGroup>
+        <Button variant="primary" size="md" type="submit">
+          {t('Update')}
+        </Button>
+      </form>
    </Dialog>
  );
 };
--- a/libs/orders/src/lib/order-hooks/use-order-submit.spec.tsx
+++ b/libs/orders/src/lib/order-hooks/use-order-submit.spec.tsx
@ -142,7 +142,7 @@ function setup(context?: Partial<VegaWalletContextShape>) {
 }

 describe('useOrderSubmit', () => {
-  it('should submit a correctly formatted order', async () => {
+  it('should submit a correctly formatted order on GTT', async () => {
    const mockSendTx = jest.fn().mockReturnValue(Promise.resolve({}));
    const keypair = {
      pub: '0x123',
@ -175,7 +175,45 @@ describe('useOrderSubmit', () => {
        side: Side.SIDE_BUY,
        timeInForce: OrderTimeInForce.TIME_IN_FORCE_GTT,
        price: '123456789',
-        expiresAt: order.expiresAt ? toNanoSeconds(order.expiresAt) : undefined,
+        expiresAt: toNanoSeconds(order.expiresAt),
+      },
+    });
+  });
+
+  it('should submit a correctly formatted order on GTC', async () => {
+    const mockSendTx = jest.fn().mockReturnValue(Promise.resolve({}));
+    const keypair = {
+      pub: '0x123',
+    } as VegaKeyExtended;
+    const { result } = setup({
+      sendTx: mockSendTx,
+      keypairs: [keypair],
+      keypair,
+    });
+
+    const order = {
+      type: OrderType.TYPE_LIMIT,
+      size: '10',
+      timeInForce: OrderTimeInForce.TIME_IN_FORCE_GTC,
+      side: Side.SIDE_BUY,
+      price: '123456789',
+      expiresAt: new Date('2022-01-01'),
+    };
+    await act(async () => {
+      result.current.submit({ ...order, marketId: defaultMarket.id });
+    });
+
+    expect(mockSendTx).toHaveBeenCalledWith({
+      pubKey: keypair.pub,
+      propagate: true,
+      orderSubmission: {
+        type: OrderType.TYPE_LIMIT,
+        marketId: defaultMarket.id,
+        size: '10',
+        side: Side.SIDE_BUY,
+        timeInForce: OrderTimeInForce.TIME_IN_FORCE_GTC,
+        price: '123456789',
+        expiresAt: undefined,
      },
    });
  });
--- a/libs/orders/src/lib/order-hooks/use-order-submit.tsx
+++ b/libs/orders/src/lib/order-hooks/use-order-submit.tsx
@ -6,7 +6,8 @@ import { determineId, toNanoSeconds } from '@vegaprotocol/react-helpers';
 import { useVegaTransaction } from '@vegaprotocol/wallet';
 import * as Sentry from '@sentry/react';
 import { useOrderEvent } from './use-order-event';
-import type { OrderTimeInForce, Side } from '@vegaprotocol/types';
+import type { Side } from '@vegaprotocol/types';
+import { OrderTimeInForce } from '@vegaprotocol/types';
 import { OrderType, OrderStatus } from '@vegaprotocol/types';
 import { Icon, Intent } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
@ -131,9 +132,11 @@ export const useOrderSubmit = () => {
              order.type === OrderType.TYPE_LIMIT && order.price
                ? order.price
                : undefined,
-            expiresAt: order.expiresAt
-              ? toNanoSeconds(order.expiresAt) // Wallet expects timestamp in nanoseconds
-              : undefined,
+            expiresAt:
+              order.expiresAt &&
+              order.timeInForce === OrderTimeInForce.TIME_IN_FORCE_GTT
+                ? toNanoSeconds(order.expiresAt) // Wallet expects timestamp in nanoseconds
+                : undefined,
          },
        });

--- a/libs/positions/src/lib/positions.tsx
+++ b/libs/positions/src/lib/positions.tsx
@ -82,8 +82,8 @@ export const Positions = memo(
    };
    return (
      <AsyncRenderer loading={loading} error={error} data={data}>
-        <div className="flex justify-between items-center p-3 pb-1">
-          <h4 className="text-m">
+        <div className="flex justify-between items-center px-4 pt-3 pb-1">
+          <h4>
            {assetSymbol} {t('markets')}
          </h4>
          <div className="text-sm text-neutral-500 dark:text-neutral-300">
--- a/libs/ui-toolkit/src/components/button/button.tsx
+++ b/libs/ui-toolkit/src/components/button/button.tsx
@ -22,7 +22,8 @@ const defaultClasses = [
  'border-black dark:border-white',
  'bg-white dark:bg-black',
  'enabled:hover:bg-neutral-200 dark:enabled:hover:bg-neutral-700',
-  'enabled:active:bg-neutral-200 dark:enabled:active:bg-neutral-700 enabled:active:border-neutral-400 dark:enabled:active:border-neutral-400',
+  'enabled:active:bg-neutral-200 dark:enabled:active:bg-neutral-700',
+  'enabled:active:border-neutral-400',
 ];
 const primary = [
  'text-black',
--- a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
@ -29,7 +29,7 @@ export const DropdownMenuTrigger = forwardRef<
    className,
    'text-sm py-1 px-2 rounded bg-transparent border border-neutral-500',
    'focus:border-black dark:focus:border-white whitespace-nowrap',
-    'hover:bg-neutral-100 dark:hover:bg-neutral-700'
+    'hover:bg-neutral-200 dark:hover:bg-neutral-700'
  );
  return (
    <DropdownMenuPrimitive.Trigger
--- a/libs/ui-toolkit/src/components/popover/popover.tsx
+++ b/libs/ui-toolkit/src/components/popover/popover.tsx
@ -23,7 +23,7 @@ export const Popover = ({
        <PopoverPrimitive.Content
          data-testid="popover-content"
          align="start"
-          className="p-4 rounded bg-neutral-50 dark:bg-neutral-800 dark:text-neutral-200 border border-neutral-400"
+          className="p-4 rounded bg-neutral-100 dark:bg-neutral-800 dark:text-neutral-200 border border-neutral-400"
          sideOffset={10}
        >
          <PopoverPrimitive.Close
--- a/libs/ui-toolkit/src/components/tabs/tabs.tsx
+++ b/libs/ui-toolkit/src/components/tabs/tabs.tsx
@ -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-600">
+      <div className="border-b border-default">
        <TabsPrimitive.List
          className="flex flex-nowrap overflow-visible"
          role="tablist"
@ -28,11 +28,11 @@ 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-600',
+              'relative px-4 py-2 border-r border-default',
              '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':
+                'cursor-default': isActive,
+                'text-neutral-400 hover:text-neutral-500 dark:hover:text-neutral-300':
                  !isActive,
              }
            );