mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
working on making header more consistant with design
This commit is contained in:
parent
8783e1a1bb
commit
087d420f85
@ -1,40 +1,44 @@
|
||||
const Container = require('@ui/components/container');
|
||||
const Row = require('@ui/components/row');
|
||||
const Column = require('@ui/components/column');
|
||||
const BaseElements = require('@ui/components/base-elements');
|
||||
const PropTypes = require('@root/prop-types');
|
||||
const React = require('react');
|
||||
const ReactRouter = require('react-router');
|
||||
const Styled = require('styled-components');
|
||||
const flatten = require('lodash.flatten');
|
||||
const fns = require('@ui/shared/functions');
|
||||
const constants = require('@ui/shared/constants');
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
colors,
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
H1,
|
||||
} = BaseElements;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
// Main Contonent Wrapper Styles
|
||||
const StyledDiv = styled.div`
|
||||
background-color: #FAFAFA;
|
||||
height: ${remcalc(91)};
|
||||
border-bottom: solid ${remcalc(1)} #d8d8d8;
|
||||
padding: ${remcalc(30)} 0;
|
||||
margin-bottom: ${remcalc(21)};
|
||||
`;
|
||||
|
||||
const BreadcrumbA = styled.a`
|
||||
text-decoration: none !important;
|
||||
text-decoration: none;
|
||||
`;
|
||||
|
||||
const BreadcrumbSpan = styled.span`
|
||||
color: #646464;
|
||||
`;
|
||||
|
||||
const H1 = styled.h1`
|
||||
margin: 0 0 0 0;
|
||||
padding-top: ${remcalc(31)};
|
||||
padding-bottom: ${remcalc(31)};
|
||||
color: ${colors.base.secondaryDark};
|
||||
`;
|
||||
|
||||
const {
|
||||
@ -83,11 +87,7 @@ const Breadcrumb = ({
|
||||
<Row>
|
||||
<Column xs={12}>
|
||||
<StyledDiv>
|
||||
<H1
|
||||
style={{
|
||||
fontSize: remcalc(24)
|
||||
}}
|
||||
>
|
||||
<H1>
|
||||
{getNameLink(name)}
|
||||
</H1>
|
||||
</StyledDiv>
|
||||
|
@ -3,7 +3,6 @@ const ReactRouter = require('react-router');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const Column = require('@ui/components/column');
|
||||
const Container = require('@ui/components/container');
|
||||
const Avatar = require('@ui/components/avatar');
|
||||
const fns = require('@ui/shared/functions');
|
||||
const logo = require('@resources/logo.svg');
|
||||
@ -11,6 +10,7 @@ const PropTypes = require('@root/prop-types');
|
||||
const Row = require('@ui/components/row');
|
||||
const Tooltip = require('@ui/components/tooltip');
|
||||
const composers = require('@ui/shared/composers');
|
||||
const constants = require('@ui/shared/constants');
|
||||
|
||||
const {
|
||||
Link
|
||||
@ -28,26 +28,32 @@ const {
|
||||
pseudoEl
|
||||
} = composers;
|
||||
|
||||
const {
|
||||
colors,
|
||||
} = constants;
|
||||
|
||||
const borderSide = props => props.toggled
|
||||
? 'bottom'
|
||||
: 'top';
|
||||
|
||||
const StyledHeader = styled.header`
|
||||
background-color: #ffffff;
|
||||
padding-top: ${remcalc(21)};
|
||||
padding-bottom: ${remcalc(21)};
|
||||
background-color: ${colors.base.white};
|
||||
padding: 0 ${remcalc(18)};
|
||||
`;
|
||||
|
||||
const StyledLogo = styled.img`
|
||||
padding-top: ${remcalc(10)};
|
||||
padding-top: ${remcalc(12)};
|
||||
`;
|
||||
|
||||
const StyledProfileWrapper = styled.div`
|
||||
position: relative;
|
||||
padding-top: ${remcalc(6)};
|
||||
text-align: right;
|
||||
`;
|
||||
|
||||
const StyledAvatarWrapper = styled.div`
|
||||
display: inline-block;
|
||||
|
||||
&:after {
|
||||
border-left: ${remcalc(5)} solid transparent;
|
||||
border-right: ${remcalc(5)} solid transparent;
|
||||
@ -55,7 +61,7 @@ const StyledAvatarWrapper = styled.div`
|
||||
|
||||
${pseudoEl({
|
||||
top: '50%',
|
||||
right: remcalc(10)
|
||||
right: remcalc(-10),
|
||||
})}
|
||||
}
|
||||
`;
|
||||
@ -67,8 +73,9 @@ const StyledTooltipWrapper = styled.div`
|
||||
`;
|
||||
|
||||
const StyledName = styled.span`
|
||||
color: #646464;
|
||||
font-size: ${remcalc(16)}
|
||||
color: ${colors.base.secondaryDark};
|
||||
font-size: ${remcalc(16)};
|
||||
height: ${remcalc(66)};
|
||||
position: relative;
|
||||
top: ${remcalc(-12)};
|
||||
`;
|
||||
@ -115,32 +122,30 @@ const Header = ({
|
||||
|
||||
return (
|
||||
<StyledHeader name="application-header">
|
||||
<Container fluid>
|
||||
<Row>
|
||||
<Column lg={10} xs={8}>
|
||||
<Link to='/'>
|
||||
<StyledLogo alt='Joyent' src={logo} />
|
||||
</Link>
|
||||
</Column>
|
||||
<Column lg={2} xs={4}>
|
||||
<StyledProfileWrapper>
|
||||
<StyledAvatarWrapper toggled={tooltip}>
|
||||
<EmptyButton onClick={handleToggleClick}>
|
||||
<StyledName>
|
||||
{account.name}
|
||||
</StyledName>
|
||||
<StyledAvatar
|
||||
alt={account.name}
|
||||
name={account.name}
|
||||
src={account.avatar}
|
||||
/>
|
||||
</EmptyButton>
|
||||
</StyledAvatarWrapper>
|
||||
{tooltipComponent}
|
||||
</StyledProfileWrapper>
|
||||
</Column>
|
||||
</Row>
|
||||
</Container>
|
||||
<Row>
|
||||
<Column lg={10} xs={8}>
|
||||
<Link to='/'>
|
||||
<StyledLogo alt='Joyent' src={logo} />
|
||||
</Link>
|
||||
</Column>
|
||||
<Column lg={2} xs={4}>
|
||||
<StyledProfileWrapper>
|
||||
<StyledAvatarWrapper toggled={tooltip}>
|
||||
<EmptyButton onClick={handleToggleClick}>
|
||||
<StyledName>
|
||||
{account.name}
|
||||
</StyledName>
|
||||
<StyledAvatar
|
||||
alt={account.name}
|
||||
name={account.name}
|
||||
src={account.avatar}
|
||||
/>
|
||||
</EmptyButton>
|
||||
</StyledAvatarWrapper>
|
||||
{tooltipComponent}
|
||||
</StyledProfileWrapper>
|
||||
</Column>
|
||||
</Row>
|
||||
</StyledHeader>
|
||||
);
|
||||
};
|
||||
|
@ -89,6 +89,10 @@ const Shadow = styled.div`
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
|
||||
`;
|
||||
|
||||
const StyledUL = styled(Ul)`
|
||||
padding: 0;
|
||||
`;
|
||||
|
||||
const OrgNavigation = ({
|
||||
orgs = []
|
||||
}) => {
|
||||
@ -133,9 +137,9 @@ const OrgNavigation = ({
|
||||
return (
|
||||
<StyledNav>
|
||||
<Container>
|
||||
<Ul>
|
||||
<StyledUL>
|
||||
{navLinks}
|
||||
</Ul>
|
||||
</StyledUL>
|
||||
</Container>
|
||||
</StyledNav>
|
||||
);
|
||||
|
@ -26,9 +26,7 @@ const {
|
||||
} = constants;
|
||||
|
||||
const StyledHorizontalList = styled(Ul)`
|
||||
${breakpoints.smallOnly`
|
||||
padding: 0
|
||||
`}
|
||||
padding: 0;
|
||||
`;
|
||||
|
||||
const StyledHorizontalListItem = styled(Li)`
|
||||
|
@ -4,11 +4,16 @@ const Styled = require('styled-components');
|
||||
const React = require('react');
|
||||
|
||||
const fns = require('../../shared/functions');
|
||||
const constants = require('../../shared/constants');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const {
|
||||
colors,
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
@ -23,8 +28,8 @@ const elements = [
|
||||
'font-weight': 600,
|
||||
'font-style': 'normal',
|
||||
'font-stretch': 'normal',
|
||||
'color': '#364acd',
|
||||
'border-bottom': `${remcalc(1)} solid #d8d8d8`,
|
||||
'color': colors.base.primaryLight,
|
||||
'margin' : 0
|
||||
}
|
||||
},
|
||||
{
|
||||
|
@ -16,9 +16,11 @@ const {
|
||||
|
||||
module.exports = styled.li`
|
||||
display: inline-block;
|
||||
margin-right: ${remcalc(24)};
|
||||
padding-top: ${remcalc(10)};
|
||||
padding-bottom: ${remcalc(10)};
|
||||
|
||||
& + & {
|
||||
margin-left: ${remcalc(24)};
|
||||
}
|
||||
|
||||
& a {
|
||||
color: ${colors.base.primary};
|
||||
|
Loading…
Reference in New Issue
Block a user