Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(joyent-cp-frontend): integrate toolkit's Header

This commit is contained in:
Sérgio Ramos 2017-06-06 20:10:04 +01:00 committed by Judit Greskovits
parent 56315d02c7
commit f17fae6a74
1 changed files with 13 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/cp-frontend/src/components/navigation/header.js
View File

@ -8,45 +8,28 @@ import unitcalc from 'unitcalc';
import Logo from '@assets/triton_logo.png';
import { Col, Row } from 'react-styled-flexboxgrid';
import { P } from 'joyent-ui-toolkit';
const StyledHeader = styled.div`
background-color: ${props => props.theme.primaryDarkBrand};
padding: ${unitcalc(2.5)} ${unitcalc(3)} ${unitcalc(2)} ${unitcalc(3)};
`;
import { P, Header, HeaderBrand, HeaderItem } from 'joyent-ui-toolkit';
const StyledLogo = Img.extend`
width: ${remcalc(87)};
height: ${remcalc(25)};
`;
const StyledP = styled(P)`
color: ${props => props.theme.white};
font-weight: 600;
margin: ${unitcalc(0.5)} 0 0 0;
`;
const Header = ({ datacenter, username }) => (
<StyledHeader>
<Row>
<Col xs={6} sm={8} md={10}>
<Link to="/">
<StyledLogo src={Logo} />
</Link>
</Col>
<Col xs={3} sm={2} md={1}>
<StyledP>{datacenter}</StyledP>
</Col>
<Col xs={3} sm={2} md={1}>
<StyledP>{username}</StyledP>
</Col>
</Row>
</StyledHeader>
const NavHeader = ({ datacenter, username }) => (
<Header>
<HeaderBrand>
<Link to="/">
<StyledLogo src={Logo} />
</Link>
</HeaderBrand>
<HeaderItem>{datacenter}</HeaderItem>
<HeaderItem>{username}</HeaderItem>
</Header>
);
Header.propTypes = {
NavHeader.propTypes = {
datacenter: PropTypes.string,
username: PropTypes.string
};
export default Header;
export default NavHeader;