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

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

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