altering header columns and changing rows to have max-width instead of width
This commit is contained in:
parent
7508f3fdcb
commit
63699eb2c7
@ -3,7 +3,7 @@ const constants = require('@ui/shared/constants');
|
|||||||
|
|
||||||
const {
|
const {
|
||||||
colors,
|
colors,
|
||||||
sizes
|
breakpoints
|
||||||
} = constants;
|
} = constants;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
@ -13,6 +13,9 @@ const {
|
|||||||
// Main Contonent Wrapper Styles
|
// Main Contonent Wrapper Styles
|
||||||
module.exports = styled.article`
|
module.exports = styled.article`
|
||||||
background-color: ${colors.base.grey};
|
background-color: ${colors.base.grey};
|
||||||
|
padding: 2rem;
|
||||||
${sizes.sm}
|
|
||||||
|
${breakpoints.large`
|
||||||
|
padding: 0;
|
||||||
|
`}
|
||||||
`;
|
`;
|
||||||
|
@ -44,6 +44,7 @@ const StyledLogo = styled.img`
|
|||||||
|
|
||||||
const StyledProfileWrapper = styled.div`
|
const StyledProfileWrapper = styled.div`
|
||||||
position: relative;
|
position: relative;
|
||||||
|
text-align: right;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledAvatarWrapper = styled.div`
|
const StyledAvatarWrapper = styled.div`
|
||||||
@ -116,12 +117,12 @@ const Header = ({
|
|||||||
<StyledHeader name="application-header">
|
<StyledHeader name="application-header">
|
||||||
<Container fluid>
|
<Container fluid>
|
||||||
<Row>
|
<Row>
|
||||||
<Column xs={2}>
|
<Column lg={10} xs={8}>
|
||||||
<Link to='/'>
|
<Link to='/'>
|
||||||
<StyledLogo alt='Joyent' src={logo} />
|
<StyledLogo alt='Joyent' src={logo} />
|
||||||
</Link>
|
</Link>
|
||||||
</Column>
|
</Column>
|
||||||
<Column smOffset={8.5} xs={1.5}>
|
<Column lg={2} xs={4}>
|
||||||
<StyledProfileWrapper>
|
<StyledProfileWrapper>
|
||||||
<StyledAvatarWrapper toggled={tooltip}>
|
<StyledAvatarWrapper toggled={tooltip}>
|
||||||
<EmptyButton onClick={handleToggleClick}>
|
<EmptyButton onClick={handleToggleClick}>
|
||||||
|
@ -28,14 +28,14 @@ module.exports = styled.div`
|
|||||||
${fluid}
|
${fluid}
|
||||||
|
|
||||||
${breakpoints.small`
|
${breakpoints.small`
|
||||||
width: ${sizes.containerSm || '46rem'};
|
max-width: ${sizes.containerSm || '46rem'};
|
||||||
`}
|
`}
|
||||||
|
|
||||||
${breakpoints.medium`
|
${breakpoints.medium`
|
||||||
width: ${sizes.containerMd || '61rem'};
|
max-width: ${sizes.containerMd || '61rem'};
|
||||||
`}
|
`}
|
||||||
|
|
||||||
${breakpoints.large`
|
${breakpoints.large`
|
||||||
width: ${sizes.containerLg || '71rem'};
|
max-width: ${sizes.containerLg || '71rem'};
|
||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
|
Loading…
Reference in New Issue
Block a user