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

Added theme switcher and tweaked header to accommodate

Browse Source
This commit is contained in:
sam-keen 2022-03-29 13:13:25 +01:00
parent 6b5fc8ebeb
commit 95e846d6af
6 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/explorer/src/app/app.tsx
View File

@ -1,4 +1,6 @@
import { ApolloProvider } from '@apollo/client';
import { ThemeContext } from '@vegaprotocol/react-helpers';
import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
import { createClient } from './lib/apollo-client';
import { Nav } from './components/nav';
import { Header } from './components/header';
@ -8,22 +10,27 @@ import { DATA_SOURCES } from './config';
import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
function App() {
const [theme, toggleTheme] = useThemeSwitcher();
const client = React.useMemo(
() => createClient(DATA_SOURCES.dataNodeUrl),
[]
);
return (
<ThemeContext.Provider value={theme}>
<TendermintWebsocketProvider>
<ApolloProvider client={client}>
<div className="antialiased m-0 min-h-[100vh] max-w-[1300px] grid grid-rows-[1fr_min-content] bg-black text-white border-white lg:border-l-1 lg:border-r-1">
<div className="antialiased m-0 min-h-[100vh] max-w-[1300px] grid grid-rows-[1fr_min-content] bg-white dark:bg-black text-black dark:text-white border-white lg:border-l-1 lg:border-r-1">
<div className="grid grid-rows-[auto_minmax(700px,_1fr)] grid-cols-[300px_minmax(auto,_1fr)] border-b-1">
<Nav />
<Header />
<Header toggleTheme={toggleTheme} />
<Main />
</div>
</div>
</ApolloProvider>
</TendermintWebsocketProvider>
</ThemeContext.Provider>
);
}

10
apps/explorer/src/app/components/header/header.tsx
View File

@ -1,8 +1,13 @@
import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
import { Search } from '../search';
export const Header = () => {
interface ThemeToggleProps {
toggleTheme: () => void;
}
export const Header = ({ toggleTheme }: ThemeToggleProps) => {
return (
<header className="flex px-16 pt-16 pb-8 border-b-1 col-start-1 col-end-3 row-start-1 row-end-2">
<header className="flex items-center px-16 py-16 border-b-1 col-start-1 col-end-3 row-start-1 row-end-2">
<h1
className="text-h3 font-alpha uppercase contextual-alternates"
data-testid="explorer-header"
@ -10,6 +15,7 @@ export const Header = () => {
Vega Explorer
</h1>
<Search />
<ThemeSwitcher onToggle={toggleTheme} />
</header>
);
};

10
apps/explorer/src/app/components/search/search.tsx
View File

@ -52,9 +52,9 @@ export const Search = () => {
return (
<form
onSubmit={handleSubmit(onSubmit)}
className="flex-1 flex ml-16 justify-end"
className="flex-1 flex ml-16 mr-12 justify-end"
>
<FormGroup className="w-2/3 mb-0">
<FormGroup className="relative w-2/3 mb-0">
<Input
{...register('search')}
id="search"
@ -64,16 +64,14 @@ export const Search = () => {
autoFocus={true}
placeholder="Enter block number or transaction hash"
/>
{error?.message ? (
{error?.message && (
<InputError
data-testid="search-error"
intent="danger"
className="flex-1 w-full"
className="absolute top-[100%] flex-1 w-full"
>
{error.message}
</InputError>
) : (
<div className="h-28"></div>
)}
</FormGroup>
<Button type="submit" variant="secondary" data-testid="search-button">

2
apps/explorer/src/index.html
View File

@ -9,6 +9,6 @@
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<div id="root" class="dark"></div>
<div id="root"></div>
</body>
</html>

2
apps/explorer/src/styles.css
View File

@ -7,7 +7,7 @@
src: url('./AlphaLyrae-Medium.woff');
}
/*No Tailwind class for this*/
/* No Tailwind class for this */
.contextual-alternates {
font-feature-settings: 'calt';
}

5
libs/ui-toolkit/src/components/form-group/form-group.tsx
View File

@ -20,7 +20,10 @@ export const FormGroup = ({
'text-right': labelAlign === 'right',
});
return (
<div data-testid="form-group" className={classNames(className, 'mb-20')}>
<div
data-testid="form-group"
className={className?.includes('mb') ? className : `${className} mb-20`}
>
{label && (
<label className={labelClasses} htmlFor={labelFor}>
{label}