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

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

@ -1,4 +1,6 @@
import { ApolloProvider } from '@apollo/client'; import { ApolloProvider } from '@apollo/client';
import { ThemeContext } from '@vegaprotocol/react-helpers';
import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
import { createClient } from './lib/apollo-client'; import { createClient } from './lib/apollo-client';
import { Nav } from './components/nav'; import { Nav } from './components/nav';
import { Header } from './components/header'; import { Header } from './components/header';
@ -8,22 +10,27 @@ import { DATA_SOURCES } from './config';
import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider'; import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
function App() { function App() {
const [theme, toggleTheme] = useThemeSwitcher();
const client = React.useMemo( const client = React.useMemo(
() => createClient(DATA_SOURCES.dataNodeUrl), () => createClient(DATA_SOURCES.dataNodeUrl),
[] []
); );
return ( return (
<TendermintWebsocketProvider> <ThemeContext.Provider value={theme}>
<ApolloProvider client={client}> <TendermintWebsocketProvider>
<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"> <ApolloProvider client={client}>
<div className="grid grid-rows-[auto_minmax(700px,_1fr)] grid-cols-[300px_minmax(auto,_1fr)] border-b-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">
<Nav /> <div className="grid grid-rows-[auto_minmax(700px,_1fr)] grid-cols-[300px_minmax(auto,_1fr)] border-b-1">
<Header /> <Nav />
<Main /> <Header toggleTheme={toggleTheme} />
<Main />
</div>
</div> </div>
</div> </ApolloProvider>
</ApolloProvider> </TendermintWebsocketProvider>
</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'; import { Search } from '../search';
export const Header = () => { interface ThemeToggleProps {
toggleTheme: () => void;
}
export const Header = ({ toggleTheme }: ThemeToggleProps) => {
return ( 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 <h1
className="text-h3 font-alpha uppercase contextual-alternates" className="text-h3 font-alpha uppercase contextual-alternates"
data-testid="explorer-header" data-testid="explorer-header"
@ -10,6 +15,7 @@ export const Header = () => {
Vega Explorer Vega Explorer
</h1> </h1>
<Search /> <Search />
<ThemeSwitcher onToggle={toggleTheme} />
</header> </header>
); );
}; };

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

@ -52,9 +52,9 @@ export const Search = () => {
return ( return (
<form <form
onSubmit={handleSubmit(onSubmit)} 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 <Input
{...register('search')} {...register('search')}
id="search" id="search"
@ -64,16 +64,14 @@ export const Search = () => {
autoFocus={true} autoFocus={true}
placeholder="Enter block number or transaction hash" placeholder="Enter block number or transaction hash"
/> />
{error?.message ? ( {error?.message && (
<InputError <InputError
data-testid="search-error" data-testid="search-error"
intent="danger" intent="danger"
className="flex-1 w-full" className="absolute top-[100%] flex-1 w-full"
> >
{error.message} {error.message}
</InputError> </InputError>
) : (
<div className="h-28"></div>
)} )}
</FormGroup> </FormGroup>
<Button type="submit" variant="secondary" data-testid="search-button"> <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" /> <link rel="icon" type="image/x-icon" href="favicon.ico" />
</head> </head>
<body> <body>
<div id="root" class="dark"></div> <div id="root"></div>
</body> </body>
</html> </html>

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

@ -7,7 +7,7 @@
src: url('./AlphaLyrae-Medium.woff'); src: url('./AlphaLyrae-Medium.woff');
} }
/*No Tailwind class for this*/ /* No Tailwind class for this */
.contextual-alternates { .contextual-alternates {
font-feature-settings: 'calt'; 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', 'text-right': labelAlign === 'right',
}); });
return ( 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 && (
<label className={labelClasses} htmlFor={labelFor}> <label className={labelClasses} htmlFor={labelFor}>
{label} {label}