From 087d420f85a424cfbbf58c0af3416fd18411db17 Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 6 Feb 2017 12:05:58 +0000 Subject: [PATCH] working on making header more consistant with design --- frontend/src/components/breadcrumb/index.js | 30 ++++----- frontend/src/components/header/index.js | 73 +++++++++++---------- frontend/src/components/navigation/org.js | 8 ++- frontend/src/components/section/index.js | 4 +- ui/src/components/base-elements/index.js | 9 ++- ui/src/components/horizontal-list/li.js | 6 +- 6 files changed, 72 insertions(+), 58 deletions(-) diff --git a/frontend/src/components/breadcrumb/index.js b/frontend/src/components/breadcrumb/index.js index 08d488b7..e4462267 100644 --- a/frontend/src/components/breadcrumb/index.js +++ b/frontend/src/components/breadcrumb/index.js @@ -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 = ({ -

+

{getNameLink(name)}

diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js index 17d309e8..a25b1014 100644 --- a/frontend/src/components/header/index.js +++ b/frontend/src/components/header/index.js @@ -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 ( - - - - - - - - - - - - - {account.name} - - - - - {tooltipComponent} - - - - + + + + + + + + + + + + {account.name} + + + + + {tooltipComponent} + + + ); }; diff --git a/frontend/src/components/navigation/org.js b/frontend/src/components/navigation/org.js index 13e13893..f1f39df9 100644 --- a/frontend/src/components/navigation/org.js +++ b/frontend/src/components/navigation/org.js @@ -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 ( -
    + {navLinks} -
+ ); diff --git a/frontend/src/components/section/index.js b/frontend/src/components/section/index.js index 6c7dc88c..455b670b 100644 --- a/frontend/src/components/section/index.js +++ b/frontend/src/components/section/index.js @@ -26,9 +26,7 @@ const { } = constants; const StyledHorizontalList = styled(Ul)` - ${breakpoints.smallOnly` - padding: 0 - `} + padding: 0; `; const StyledHorizontalListItem = styled(Li)` diff --git a/ui/src/components/base-elements/index.js b/ui/src/components/base-elements/index.js index a56d05f3..7214b154 100644 --- a/ui/src/components/base-elements/index.js +++ b/ui/src/components/base-elements/index.js @@ -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 } }, { diff --git a/ui/src/components/horizontal-list/li.js b/ui/src/components/horizontal-list/li.js index 75bf4006..553df423 100644 --- a/ui/src/components/horizontal-list/li.js +++ b/ui/src/components/horizontal-list/li.js @@ -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};