From 5be0a1a85dfbe7454fba56e8005fb00575401315 Mon Sep 17 00:00:00 2001 From: macqbat Date: Mon, 4 Jul 2022 08:26:59 +0200 Subject: [PATCH] feat: [console-lite] - top nav-bar - first commit (#677) * feat: [console-lite] - top nav-bar - first commit * feat: [console-lite] - top nav-bar - fixes and improvements * feat: [console-lite] - top nav-bar - add some netlify conf, change header for always black * feat: [console-lite] - top nav-bar - add some netlify conf, change header for always black * feat: [console-lite] - top nav-bar - add home link on logo * feat: [console-lite] - top nav-bar - add job for copying netlify conf file * feat: [console-lite] - top nav-bar - add job for copying netlify conf file * feat: [console-lite] - top nav-bar - add a couple of int tests * feat: [console-lite] - top nav-bar - fix a typo * feat: [console-lite] - top nav-bar - remove anims due its inconsist with design concept, css fixes * feat: [console-lite] - top nav-bar - make v-logo a component, add darken green color * feat: [console-lite] - top nav-bar - move v-logo to existing dir Co-authored-by: maciek --- .../src/integration/header.test.ts | 30 ++++++++++++ apps/simple-trading-app/netlify.toml | 4 ++ apps/simple-trading-app/project.json | 9 ++++ apps/simple-trading-app/src/app/app.tsx | 34 +++---------- .../app/components/drawer/drawer-wrapper.tsx | 2 +- .../src/app/components/drawer/drawer.tsx | 13 +++-- .../src/app/components/header/comet.tsx | 48 +++++++++++++++++++ .../src/app/components/header/header.tsx | 41 ++++++++++++++++ .../src/app/components/header/index.tsx | 1 + .../src/app/components/header/logo.tsx | 18 +++++++ .../src/app/components/header/video.tsx | 22 +++++++++ .../app/components/icons/liquidity-icon.tsx | 4 +- .../src/app/components/icons/market-icon.tsx | 4 +- .../app/components/icons/portfolio-icon.tsx | 4 +- .../src/app/components/icons/trade-icon.tsx | 8 ++-- .../simple-market-list/constants.ts | 1 + .../simple-market-percent-change.spec.tsx | 9 ++-- .../simple-market-percent-change.tsx | 16 +++---- libs/tailwindcss-config/src/theme-lite.js | 5 ++ .../theme-switcher/theme-switcher.tsx | 8 +++- .../components/vega-logo/vega-logo.spec.tsx | 7 ++- .../vega-logo/vega-logo.stories.tsx | 4 +- .../src/components/vega-logo/vega-logo.tsx | 21 ++++++++ 23 files changed, 251 insertions(+), 62 deletions(-) create mode 100644 apps/simple-trading-app-e2e/src/integration/header.test.ts create mode 100644 apps/simple-trading-app/netlify.toml create mode 100644 apps/simple-trading-app/src/app/components/header/comet.tsx create mode 100644 apps/simple-trading-app/src/app/components/header/header.tsx create mode 100644 apps/simple-trading-app/src/app/components/header/index.tsx create mode 100644 apps/simple-trading-app/src/app/components/header/logo.tsx create mode 100644 apps/simple-trading-app/src/app/components/header/video.tsx diff --git a/apps/simple-trading-app-e2e/src/integration/header.test.ts b/apps/simple-trading-app-e2e/src/integration/header.test.ts new file mode 100644 index 000000000..65243eaab --- /dev/null +++ b/apps/simple-trading-app-e2e/src/integration/header.test.ts @@ -0,0 +1,30 @@ +describe('console lite header', () => { + beforeEach(() => { + window.localStorage.setItem('theme', 'dark'); + cy.visit('/'); + }); + + it('logo should linked home', () => { + cy.get('span').contains('Markets').click(); + cy.location('pathname').should('eq', '/markets'); + cy.getByTestId('header').find('a').click(); + cy.location('pathname').should('eq', '/'); + }); + + it('theme switcher should switch theme', () => { + cy.get('#root').children().eq(0).as('Container'); + cy.get('@Container').should('have.css', 'background-color', 'rgb(8, 8, 8)'); + cy.getByTestId('theme-switcher').click(); + cy.get('@Container').should( + 'have.css', + 'background-color', + 'rgb(255, 255, 255)' + ); + }); + + it('wallet connector should open a dialog', () => { + cy.get('[role="dialog"]').should('not.exist'); + cy.getByTestId('connect-vega-wallet').click(); + cy.get('[role="dialog"]').should('be.visible'); + }); +}); diff --git a/apps/simple-trading-app/netlify.toml b/apps/simple-trading-app/netlify.toml new file mode 100644 index 000000000..b87b8d3dd --- /dev/null +++ b/apps/simple-trading-app/netlify.toml @@ -0,0 +1,4 @@ +[[redirects]] + from = "/*" + to = "/index.html" + status = 200 diff --git a/apps/simple-trading-app/project.json b/apps/simple-trading-app/project.json index 3905d0432..d65b5d432 100644 --- a/apps/simple-trading-app/project.json +++ b/apps/simple-trading-app/project.json @@ -68,6 +68,15 @@ "jestConfig": "apps/simple-trading-app/jest.config.js", "passWithNoTests": true } + }, + "build-netlify": { + "builder": "@nrwl/workspace:run-commands", + "options": { + "commands": [ + "cp apps/simple-trading-app/netlify.toml netlify.toml", + "nx build simple-trading-app" + ] + } } }, "tags": [] diff --git a/apps/simple-trading-app/src/app/app.tsx b/apps/simple-trading-app/src/app/app.tsx index a4a53f682..daf1e5358 100644 --- a/apps/simple-trading-app/src/app/app.tsx +++ b/apps/simple-trading-app/src/app/app.tsx @@ -8,13 +8,11 @@ import { VegaManageDialog, VegaWalletProvider, } from '@vegaprotocol/wallet'; -import { VegaWalletConnectButton } from './components/vega-wallet-connect-button'; -import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit'; import { Connectors } from './lib/vega-connectors'; import '../styles.scss'; import { AppLoader } from './components/app-loader'; +import Header from './components/header'; import { Main } from './components/main'; -import { DrawerToggle, DRAWER_TOGGLE_VARIANTS } from './components/drawer'; import { useLocation } from 'react-router-dom'; function App() { @@ -39,32 +37,12 @@ function App() { -
-
-
- - setVegaWallet((x) => ({ ...x, connect: open })) - } - setManageDialog={(open) => - setVegaWallet((x) => ({ ...x, manage: open })) - } - /> - -
- -
- +
+
- { - const classes = classNames('flex dark:bg-black md:flex-row', className); + const classes = classNames('flex dark:bg-lite-black md:flex-row', className); return
{children}
; }; diff --git a/apps/simple-trading-app/src/app/components/drawer/drawer.tsx b/apps/simple-trading-app/src/app/components/drawer/drawer.tsx index 128259e32..ef7fb9015 100644 --- a/apps/simple-trading-app/src/app/components/drawer/drawer.tsx +++ b/apps/simple-trading-app/src/app/components/drawer/drawer.tsx @@ -34,11 +34,14 @@ export const NavigationDrawer = ({ const translateClose = rtl ? 'translate-x-full' : '-translate-x-full'; - const innerStyles = classNames('w-3/4 md:w-full bg-white dark:bg-black', { - 'translate-x-0 transition-transform md:transform-none': isMenuOpen, - [`${translateClose} md:transform-none`]: !isMenuOpen, - [innerClasses]: innerClasses, - }); + const innerStyles = classNames( + 'w-3/4 md:w-full bg-white dark:bg-lite-black', + { + 'translate-x-0 transition-transform md:transform-none': isMenuOpen, + [`${translateClose} md:transform-none`]: !isMenuOpen, + [innerClasses]: innerClasses, + } + ); return (