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 <maciek@vegaprotocol.io>

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');
+  });
+});

apps/simple-trading-app/netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

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": []

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() {
         <NetworkLoader createClient={createClient}>
           <VegaWalletProvider>
             <AppLoader>
-              <div className="max-h-full min-h-full dark:bg-black dark:text-white-60 bg-white text-black-60 grid grid-rows-[min-content,1fr]">
-                <div className="flex items-stretch p-16 bg-black text-white-60">
-                  <div className="flex items-center gap-4 ml-auto mr-8">
-                    <VegaWalletConnectButton
-                      setConnectDialog={(open) =>
-                        setVegaWallet((x) => ({ ...x, connect: open }))
-                      }
-                      setManageDialog={(open) =>
-                        setVegaWallet((x) => ({ ...x, manage: open }))
-                      }
+              <div className="max-h-full min-h-full dark:bg-lite-black dark:text-white-60 bg-white text-black-60 grid grid-rows-[min-content,1fr]">
+                <Header
+                  setVegaWallet={setVegaWallet}
+                  toggleTheme={toggleTheme}
                 />
-                    <ThemeSwitcher
-                      onToggle={toggleTheme}
-                      className="-my-4"
-                      sunClassName="text-white"
-                    />
-                  </div>
-                  <DrawerToggle
-                    onToggle={onToggle}
-                    variant={DRAWER_TOGGLE_VARIANTS.OPEN}
-                    className="xs:py-32 xs:px-16 xs:text-white xs:hover:text-blue"
-                  />
-                </div>
-
                 <Main isMenuOpen={menuOpen} onToggle={onToggle} />
-
                 <VegaConnectDialog
                   connectors={Connectors}
                   dialogOpen={vegaWallet.connect}

apps/simple-trading-app/src/app/components/drawer/drawer-wrapper.tsx

@@ -8,6 +8,6 @@ interface Props {
 }
 
 export const DrawerWrapper = ({ children, className = '' }: Props) => {
-  const classes = classNames('flex dark:bg-black md:flex-row', className);
+  const classes = classNames('flex dark:bg-lite-black md:flex-row', className);
   return <div className={classes}>{children}</div>;
 };

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', {
+  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 (
     <aside aria-label="Sidebar Navigation Menu" className={outerStyles}>

apps/simple-trading-app/src/app/components/header/comet.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+const Comet = () => {
+  return (
+    <svg
+      viewBox="0 0 118 82"
+      fill="currentColor"
+      className="max-w-[7.5rem] mx-auto hidden md:block absolute right-[365px] rotate-180"
+    >
+      <g className="fill-white">
+        <path d="M44.3791 67.5864H41.5859V70.3796H44.3791V67.5864Z"></path>
+        <path d="M47.173 64.7932V62H44.3799V64.7932V67.5863H47.173V64.7932Z"></path>
+        <path d="M41.5863 70.3794H36V73.1726H41.5863V70.3794Z"></path>
+        <path d="M44.3791 73.1719H41.5859V75.965H44.3791V73.1719Z"></path>
+        <path d="M47.173 75.9658H44.3799V81.5521H47.173V75.9658Z"></path>
+        <path d="M49.966 73.1719H47.1729V75.965H49.966V73.1719Z"></path>
+        <path d="M55.5521 70.3794H49.9658V73.1726H55.5521V70.3794Z"></path>
+        <path d="M49.966 67.5864H47.1729V70.3796H49.966V67.5864Z"></path>
+        <path d="M57.1876 60.564H54V63.7515H57.1876V60.564Z"></path>
+        <path d="M60.3751 57.3765H57.1875V60.564H60.3751V57.3765Z"></path>
+        <path d="M63.5626 54.1885H60.375V57.3761H63.5626V54.1885Z"></path>
+        <path d="M66.7501 51.001H63.5625V54.1886H66.7501V51.001Z"></path>
+        <path d="M69.9376 47.8135H66.75V51.0011H69.9376V47.8135Z"></path>
+        <path d="M73.1251 44.626H69.9375V47.8136H73.1251V44.626Z"></path>
+        <path d="M76.3126 41.4385H73.125V44.6261H76.3126V41.4385Z"></path>
+        <path d="M79.5001 38.251H76.3125V41.4386H79.5001V38.251Z"></path>
+        <path d="M82.6886 35.0635H79.501V38.2511H82.6886V35.0635Z"></path>
+        <path d="M85.8761 31.876H82.6885V35.0636H85.8761V31.876Z"></path>
+        <path d="M89.0636 28.688H85.876V31.8756H89.0636V28.688Z"></path>
+        <path d="M92.2511 25.5005H89.0635V28.6881H92.2511V25.5005Z"></path>
+        <path d="M95.4386 22.313H92.251V25.5006H95.4386V22.313Z"></path>
+        <path d="M98.6261 19.1255H95.4385V22.3131H98.6261V19.1255Z"></path>
+        <path d="M101.814 15.938H98.626V19.1256H101.814V15.938Z"></path>
+        <path d="M105.001 12.7505H101.813V15.9381H105.001V12.7505Z"></path>
+        <path d="M108.189 9.5625H105.001V12.7501H108.189V9.5625Z"></path>
+        <path d="M111.376 6.375H108.188V9.56258H111.376V6.375Z"></path>
+        <path d="M114.565 3.1875H111.377V6.37508H114.565V3.1875Z"></path>
+        <path d="M117.752 0H114.564V3.18758H117.752V0Z"></path>
+        <path d="M2.79316 20.793H0V23.5861H2.79316V20.793Z"></path>
+        <path d="M5.58612 18H2.79297V20.7932H5.58612V18Z"></path>
+        <path d="M5.58612 23.5859H2.79297V26.3791H5.58612V23.5859Z"></path>
+        <path d="M8.37909 20.793H5.58594V23.5861H8.37909V20.793Z"></path>
+      </g>
+    </svg>
+  );
+};
+
+export default Comet;

apps/simple-trading-app/src/app/components/header/header.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
+import Logo from './logo';
+import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
+
+type WalletParams = {
+  connect: boolean;
+  manage: boolean;
+};
+
+interface Props {
+  setVegaWallet: (func: (wParams: WalletParams) => WalletParams) => void;
+  toggleTheme: () => void;
+}
+const Header = ({ setVegaWallet, toggleTheme }: Props) => {
+  return (
+    <div
+      className="flex items-stretch pr-16 py-16 bg-black text-white-60"
+      data-testid="header"
+    >
+      <Logo />
+      <div className="flex items-center gap-4 ml-auto mr-8 relative z-10">
+        <VegaWalletConnectButton
+          setConnectDialog={(open) =>
+            setVegaWallet((x) => ({ ...x, connect: open }))
+          }
+          setManageDialog={(open) =>
+            setVegaWallet((x) => ({ ...x, manage: open }))
+          }
+        />
+        <ThemeSwitcher
+          onToggle={toggleTheme}
+          className="-my-4"
+          sunClassName="text-white"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Header;

apps/simple-trading-app/src/app/components/header/index.tsx

@@ -0,0 +1 @@
+export { default } from './header';

apps/simple-trading-app/src/app/components/header/logo.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { t } from '@vegaprotocol/react-helpers';
+import { VLogo } from '@vegaprotocol/ui-toolkit';
+
+const Logo = () => {
+  return (
+    <NavLink
+      className="mx-20 text-white"
+      aria-label={t('Go to home page')}
+      to="/"
+    >
+      <VLogo />
+    </NavLink>
+  );
+};
+
+export default Logo;

apps/simple-trading-app/src/app/components/header/video.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Video = () => {
+  return (
+    <video
+      width={500}
+      height={100}
+      autoPlay
+      muted
+      loop
+      playsInline
+      className="absolute left-0 top-0 w-full h-full object-cover"
+    >
+      <source
+        src="https://d33wubrfki0l68.cloudfront.net/2500bc5ef1b96927e0220eeb2bef0b22b87bcda1/3e0d3/static/moshed-aa65f0933af9abe9afb5e5663c9b3f68.mp4"
+        type="video/mp4"
+      />
+    </video>
+  );
+};
+
+export default Video;

apps/simple-trading-app/src/app/components/icons/liquidity-icon.tsx

@@ -1,8 +1,8 @@
 export const LiquidityIconPath = () => (
   <>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M12.5268 1.46612L12 1.99999L11.4732 1.46612L12 0.946381L12.5268 1.46612ZM12 3.07542C11.8274 3.25709 11.6185 3.48044 11.3826 3.73943C10.6899 4.49987 9.76793 5.56335 8.84782 6.77789C7.92587 7.99485 7.01715 9.34862 6.34179 10.6903C5.66046 12.0439 5.25 13.3205 5.25 14.4C5.25 19.0485 8.47431 22.15 12 22.15C15.5257 22.15 18.75 19.0485 18.75 14.4C18.75 13.3205 18.3395 12.0439 17.6582 10.6903C16.9829 9.34862 16.0741 7.99485 15.1522 6.77789C14.2321 5.56335 13.3101 4.49987 12.6174 3.73943C12.3815 3.48044 12.1726 3.25709 12 3.07542ZM11.4732 1.46612C11.4734 1.46597 11.4732 1.46612 12 1.99999C12.5268 1.46612 12.5266 1.46597 12.5268 1.46612L12.5336 1.47291L12.5512 1.49036C12.5663 1.5055 12.5884 1.52759 12.6169 1.55634C12.6739 1.61384 12.7566 1.698 12.8615 1.80641C13.071 2.02319 13.3692 2.33722 13.7263 2.72931C14.4399 3.51261 15.3929 4.61164 16.3478 5.8721C17.3009 7.13013 18.2671 8.56386 18.998 10.0159C19.723 11.4561 20.25 12.9795 20.25 14.4C20.25 19.7514 16.4743 23.65 12 23.65C7.52569 23.65 3.75 19.7514 3.75 14.4C3.75 12.9795 4.27704 11.4561 5.00196 10.0159C5.73285 8.56386 6.69913 7.13013 7.65218 5.8721C8.60707 4.61164 9.56014 3.51261 10.2737 2.72931C10.6308 2.33722 10.929 2.02319 11.1385 1.80641C11.2434 1.698 11.3261 1.61384 11.3831 1.55634C11.4116 1.52759 11.4337 1.5055 11.4488 1.49036L11.4664 1.47291L11.4712 1.46817L11.4732 1.46612Z"
     />
     <rect x="11.5" y="17.4" width="1" height="1" />

apps/simple-trading-app/src/app/components/icons/market-icon.tsx

@@ -1,8 +1,8 @@
 export const MarketIconPath = () => (
   <>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M3.5 2H2V20.5V22H3.5H22V20.5H3.5V2Z"
     />
     <rect x="5" y="15" width="2" height="2" />

apps/simple-trading-app/src/app/components/icons/portfolio-icon.tsx

@@ -1,8 +1,8 @@
 export const PortfolioIconPath = () => (
   <>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M8.5 3.5H15.5V6H8.5V3.5ZM7 6V3.5C7 2.67157 7.67157 2 8.5 2H15.5C16.3284 2 17 2.67157 17 3.5V6H20.5C21.3284 6 22 6.67157 22 7.5V20.5C22 21.3284 21.3284 22 20.5 22H3.5C2.67157 22 2 21.3284 2 20.5V7.5C2 6.67157 2.67157 6 3.5 6H7ZM15.5 7.5H8.5H3.5L3.5 20.5H20.5V7.5H15.5Z"
     />
     <rect x="4" y="8" width="2" height="2" />

apps/simple-trading-app/src/app/components/icons/trade-icon.tsx

@@ -1,13 +1,13 @@
 export const TradeIconPath = () => (
   <>
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M19.3254 7.28784L14.8547 2.93099L15.7621 1.99999L21.4056 7.49983L21.8833 7.96534L21.4056 8.43085L15.7621 13.9307L14.8547 12.9997L19.3819 8.58784L1.99999 8.58784L1.99999 7.28784L19.3254 7.28784Z"
     />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M4.55785 16.6429L9.02855 20.9997L8.12124 21.9307L2.47767 16.4309L2 15.9654L2.47767 15.4999L8.12124 10L9.02855 10.931L4.50141 15.3429L21.8833 15.3429V16.6429L4.55785 16.6429Z"
     />
   </>

apps/simple-trading-app/src/app/components/simple-market-list/constants.ts

@@ -73,6 +73,7 @@ export const agGridLightVariables = `
 
 export const agGridDarkVariables = `
   .ag-theme-balham-dark {
+    --ag-background-color: ${theme.colors.lite.black};
     --ag-row-border-color: ${theme.colors.transparent};
     --ag-row-hover-color: ${theme.colors.transparent};
     --ag-font-size: 15px;

apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.spec.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { themelite as theme } from '@vegaprotocol/tailwindcss-config';
 import { MockedProvider } from '@apollo/react-testing';
 import SimpleMarketPercentChange from './simple-market-percent-change';
 import type { SimpleMarkets_markets_candles } from './__generated__/SimpleMarkets';
@@ -50,8 +49,8 @@ describe('SimpleMarketPercentChange should parse proper change', () => {
       </MockedProvider>
     );
     expect(screen.getByText('100.000%')).toBeInTheDocument();
-    expect(screen.getByText('100.000%')).toHaveStyle(
-      `color: ${theme.colors.vega.green}`
+    expect(screen.getByText('100.000%')).toHaveClass(
+      'text-darkerGreen dark:text-lightGreen'
     );
   });
   it('a depreciated one', () => {
@@ -70,8 +69,6 @@ describe('SimpleMarketPercentChange should parse proper change', () => {
       </MockedProvider>
     );
     expect(screen.getByText('-50.000%')).toBeInTheDocument();
-    expect(screen.getByText('-50.000%')).toHaveStyle(
-      `color: ${theme.colors.vega.pink}`
-    );
+    expect(screen.getByText('-50.000%')).toHaveClass('text-vega-pink');
   });
 });

apps/simple-trading-app/src/app/components/simple-market-list/simple-market-percent-change.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { InView } from 'react-intersection-observer';
 import { useSubscription } from '@apollo/client';
-import { themelite as theme } from '@vegaprotocol/tailwindcss-config';
 import type { SimpleMarkets_markets_candles } from './__generated__/SimpleMarkets';
 import type {
   CandleLive,
@@ -37,14 +37,14 @@ const getChange = (
   return ' - ';
 };
 
-const getColor = (change: number | string) => {
+const getClassColor = (change: number | string) => {
   if (parseFloat(change as string) > 0) {
-    return theme.colors.vega.green;
+    return 'text-darkerGreen dark:text-lightGreen';
   }
   if (parseFloat(change as string) < 0) {
-    return theme.colors.vega.pink;
+    return 'text-vega-pink';
   }
-  return theme.colors.black[10];
+  return 'text-black-10';
 };
 
 const SimpleMarketPercentChangeWrapper = (props: Props) => {
@@ -67,16 +67,14 @@ const SimpleMarketPercentChange = ({ candles, marketId, setValue }: Props) => {
       variables: { marketId },
     });
   const change = getChange(candles, close);
-  const color = getColor(change);
+  const colorClasses = getClassColor(change);
   useEffect(() => {
     const value = parseFloat(change);
     setValue(isNaN(value) ? '-' : value);
   }, [setValue, change]);
 
   return (
-    <div className="flex text-center" style={{ color }}>
-      {change}
-    </div>
+    <div className={classNames('flex text-center', colorClasses)}>{change}</div>
   );
 };
 

libs/tailwindcss-config/src/theme-lite.js

@@ -8,6 +8,8 @@ module.exports = {
     midGrey: '#828282',
     borderGrey: '#4f4f4f',
     lightGrey: '#F2F2F2',
+    lightGreen: '#00f780',
+    darkerGreen: '#008f4A',
     yellow: '#DFFF0B',
     mint: '#00F780',
     pink: '#FF077F',
@@ -18,6 +20,9 @@ module.exports = {
       'highlight-item-dark': '#fff',
     },
     'dropdown-bg-dark': theme.colors.black['100'],
+    lite: {
+      black: '#080808',
+    },
   },
   fontSize: {
     ...theme.fontSize,

libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import classNames from 'classnames';
 import { SunIcon, MoonIcon } from './icons';
 
@@ -19,7 +20,12 @@ export const ThemeSwitcher = ({
   );
 
   return (
-    <button type="button" onClick={() => onToggle()} className={className}>
+    <button
+      type="button"
+      onClick={() => onToggle()}
+      className={className}
+      data-testid="theme-switcher"
+    >
       <span className={sunClasses}>
         <SunIcon />
       </span>

libs/ui-toolkit/src/components/vega-logo/vega-logo.spec.tsx

@@ -1,10 +1,15 @@
 import { render } from '@testing-library/react';
 
-import { VegaLogo } from './vega-logo';
+import { VegaLogo, VLogo } from './vega-logo';
 
 describe('Vega logo', () => {
   it('should render successfully', () => {
     const { baseElement } = render(<VegaLogo />);
     expect(baseElement).toBeTruthy();
   });
+
+  it('V version should render successfully', () => {
+    const { baseElement } = render(<VLogo />);
+    expect(baseElement).toBeTruthy();
+  });
 });

libs/ui-toolkit/src/components/vega-logo/vega-logo.stories.tsx

@@ -1,5 +1,5 @@
 import type { Story, Meta } from '@storybook/react';
-import { VegaLogo } from './vega-logo';
+import { VegaLogo, VLogo } from './vega-logo';
 
 export default {
   component: VegaLogo,
@@ -7,5 +7,7 @@ export default {
 } as Meta;
 
 const Template: Story = () => <VegaLogo />;
+const TemplateVLogo: Story = () => <VLogo />;
 
 export const Default = Template.bind({});
+export const VVersion = TemplateVLogo.bind({});

libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx

@@ -1,4 +1,5 @@
 import { t } from '@vegaprotocol/react-helpers';
+import React from 'react';
 
 export const VegaLogo = () => {
   return (
@@ -16,3 +17,23 @@ export const VegaLogo = () => {
     </svg>
   );
 };
+
+export const VLogo = () => {
+  return (
+    <svg
+      aria-label={t('Vega logo')}
+      width="29"
+      height="34"
+      fill="currentColor"
+      viewBox="0 0 29 34"
+      className="mx-20 my-16"
+    >
+      <path d="M14.5003 29.1426H9.6665V34.0001H14.5003V29.1426Z" />
+      <path d="M19.3343 24.2859H14.5005V29.1434H19.3343V24.2859Z" />
+      <path d="M29.0008 19.4282H24.167V24.2857H29.0008V19.4282Z" />
+      <path d="M24.1673 0H19.3335V19.4283H24.1673V0Z" />
+      <path d="M9.66776 24.2859H4.83398V29.1434H9.66776V24.2859Z" />
+      <path d="M4.83378 0H0V24.2858H4.83378V0Z" />
+    </svg>
+  );
+};