zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feature: add Header component

This commit is contained in:
George Lima 2018-12-12 16:05:33 -03:00
parent 9228e053be
commit 70e1385568
2 changed files with 94 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
app/components/header.js Normal file
View File

@ -0,0 +1,67 @@
// @flow
import React from 'react';
import styled from 'styled-components';
import { ZCashLogo } from './zcash-logo';
import { TextComponent } from './text';
const Wrapper = styled.div`
height: ${props => props.theme.headerHeight};
width: 100vw;
display: flex;
flex-direction: row;
background-color: ${props => props.theme.colors.background};
`;
const LogoWrapper = styled.div`
height: ${props => props.theme.headerHeight};
width: ${props => props.theme.sidebarWidth};
background-image: linear-gradient(
to right,
${props => props.theme.colors.sidebarLogoGradientBegin},
${props => props.theme.colors.sidebarLogoGradientEnd}
);
margin-bottom: 20px;
`;
const TitleWrapper = styled.div`
width: ${props => `calc(100% - ${props.theme.sidebarWidth})`};
height: ${props => props.theme.headerHeight};
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding-top: 10px;
padding-left: ${props => props.theme.layoutPaddingLeft};
padding-right: ${props => props.theme.layoutPaddingRight};
`;
const Title = styled(TextComponent)`
font-size: ${props => `${props.theme.fontSize.title}em`};
margin-top: 10px;
margin-bottom: 10px;
`;
const Divider = styled.div`
width: 100%;
background-color: ${props => props.theme.colors.text};
height: 1px;
opacity: 0.1;
`;
type Props = {
title: string,
};
export const HeaderComponent = ({ title }: Props) => (
<Wrapper>
<LogoWrapper>
<ZCashLogo />
</LogoWrapper>
<TitleWrapper>
<Title value={title} />
<Divider />
</TitleWrapper>
</Wrapper>
);

44
app/router/router.js
View File

@ -13,32 +13,42 @@ import { SettingsView } from '../views/settings';
import { NotFoundView } from '../views/not-found';
import { ConsoleView } from '../views/console';
import { LayoutComponent } from '../components/layout';
import { HeaderComponent } from '../components/header';
import {
DASHBOARD_ROUTE, SEND_ROUTE, RECEIVE_ROUTE, SETTINGS_ROUTE, CONSOLE_ROUTE,
} from '../constants/routes';
const Wrapper = styled.div`
const FullWrapper = styled.div`
display: flex;
flex-direction: column;
width: 100%;
`;
const ContentWrapper = styled.div`
display: flex;
flex-direction: row;
width: 100vw;
`;
export const RouterComponent = ({ location }: { location: Location }) => (
<Wrapper>
<SidebarContainer location={location} />
<ScrollTopComponent>
{/* $FlowFixMe */}
<LayoutComponent>
<Switch>
<Route exact path={DASHBOARD_ROUTE} component={DashboardContainer} />
<Route path={SEND_ROUTE} component={SendView} />
<Route path={RECEIVE_ROUTE} component={ReceiveView} />
<Route path={SETTINGS_ROUTE} component={SettingsView} />
<Route path={CONSOLE_ROUTE} component={ConsoleView} />
<Route component={NotFoundView} />
</Switch>
</LayoutComponent>
</ScrollTopComponent>
</Wrapper>
<FullWrapper>
<HeaderComponent title='Dashboard' />
<ContentWrapper>
<SidebarContainer location={location} />
<ScrollTopComponent>
{/* $FlowFixMe */}
<LayoutComponent>
<Switch>
<Route exact path={DASHBOARD_ROUTE} component={DashboardContainer} />
<Route path={SEND_ROUTE} component={SendView} />
<Route path={RECEIVE_ROUTE} component={ReceiveView} />
<Route path={SETTINGS_ROUTE} component={SettingsView} />
<Route path={CONSOLE_ROUTE} component={ConsoleView} />
<Route component={NotFoundView} />
</Switch>
</LayoutComponent>
</ScrollTopComponent>
</ContentWrapper>
</FullWrapper>
);