working on making header more consistant with design

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;
+  color: ${colors.base.secondaryDark};
-`;
-
-const H1 = styled.h1`
-  margin: 0 0 0 0;
-  padding-top: ${remcalc(31)};
-  padding-bottom: ${remcalc(31)};
 `;
 
 const {
@@ -83,11 +87,7 @@ const Breadcrumb = ({
       <Row>
         <Column xs={12}>
           <StyledDiv>
-            <H1
+            <H1>
-              style={{
-                fontSize: remcalc(24)
-              }}
-            >
               {getNameLink(name)}
             </H1>
           </StyledDiv>

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;
+  background-color: ${colors.base.white};
-  padding-top: ${remcalc(21)};
+  padding: 0 ${remcalc(18)};
-  padding-bottom: ${remcalc(21)};
 `;
 
 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;
+  color: ${colors.base.secondaryDark};
-  font-size: ${remcalc(16)}
+  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>
-        <Row>
+        <Column lg={10} xs={8}>
-          <Column lg={10} xs={8}>
+          <Link to='/'>
-            <Link to='/'>
+            <StyledLogo alt='Joyent' src={logo} />
-              <StyledLogo alt='Joyent' src={logo} />
+          </Link>
-            </Link>
+        </Column>
-          </Column>
+        <Column lg={2} xs={4}>
-          <Column lg={2} xs={4}>
+          <StyledProfileWrapper>
-            <StyledProfileWrapper>
+            <StyledAvatarWrapper toggled={tooltip}>
-              <StyledAvatarWrapper toggled={tooltip}>
+              <EmptyButton onClick={handleToggleClick}>
-                <EmptyButton onClick={handleToggleClick}>
+                <StyledName>
-                  <StyledName>
+                  {account.name}
-                    {account.name}
+                </StyledName>
-                  </StyledName>
+                <StyledAvatar
-                  <StyledAvatar
+                  alt={account.name}
-                    alt={account.name}
+                  name={account.name}
-                    name={account.name}
+                  src={account.avatar}
-                    src={account.avatar}
+                />
-                  />
+              </EmptyButton>
-                </EmptyButton>
+            </StyledAvatarWrapper>
-              </StyledAvatarWrapper>
+            {tooltipComponent}
-              {tooltipComponent}
+          </StyledProfileWrapper>
-            </StyledProfileWrapper>
+        </Column>
-          </Column>
+      </Row>
-        </Row>
-      </Container>
     </StyledHeader>
   );
 };

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 (
     <StyledNav>
       <Container>
-        <Ul>
+        <StyledUL>
           {navLinks}
-        </Ul>
+        </StyledUL>
       </Container>
     </StyledNav>
   );

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)`

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',
+      'color': colors.base.primaryLight,
-      'border-bottom': `${remcalc(1)} solid #d8d8d8`,
+      'margin' : 0
     }
   },
   {

ui/src/components/horizontal-list/li.js

@@ -16,10 +16,12 @@ 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};
     text-decoration: none;