From e6e45ec5099e5a7f9609e55f6ba4385eeef521e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luis=20F=C3=A9lix?=
 <5789328+lcsfelix@users.noreply.github.com>
Date: Wed, 22 Jan 2020 12:54:07 +0000
Subject: [PATCH] fix: make nav and sidebar styleguide compliant

fix: remove comments
---
 new-lamassu-admin/src/components/Header.js    |  8 +++++--
 .../src/components/Header.styles.js           | 23 ++++++++++++++-----
 .../src/components/Sidebar.styles.js          |  6 ++---
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/new-lamassu-admin/src/components/Header.js b/new-lamassu-admin/src/components/Header.js
index b77007d9..3df491e5 100644
--- a/new-lamassu-admin/src/components/Header.js
+++ b/new-lamassu-admin/src/components/Header.js
@@ -3,6 +3,8 @@ import classnames from 'classnames'
 import React, { memo, useState } from 'react'
 import { NavLink } from 'react-router-dom'
 
+import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
+
 import styles from './Header.styles'
 import { Link } from './buttons'
 import { H4 } from './typography'
@@ -14,7 +16,6 @@ const renderSubheader = (item, classes) => {
   return (
     <div className={classes.subheader}>
       <div className={classes.content}>
-        <H4>{item.label}</H4>
         <nav>
           <ul className={classes.subheaderUl}>
             {item.children.map((it, idx) => (
@@ -45,7 +46,10 @@ const Header = memo(({ tree }) => {
     <header>
       <div className={classes.header}>
         <div className={classes.content}>
-          <H4 className={classes.white}>Lamassu Admin</H4>
+          <div className={classes.logo}>
+            <Logo />
+            <H4 className={classes.white}>Lamassu Admin</H4>
+          </div>
           <nav className={classes.nav}>
             <ul className={classes.ul}>
               {tree.map((it, idx) => (
diff --git a/new-lamassu-admin/src/components/Header.styles.js b/new-lamassu-admin/src/components/Header.styles.js
index 252f5e3d..54a750a5 100644
--- a/new-lamassu-admin/src/components/Header.styles.js
+++ b/new-lamassu-admin/src/components/Header.styles.js
@@ -41,14 +41,14 @@ export default {
   ul: {
     display: 'flex',
     marginBottom: spacer * 1,
-    paddingInlineStart: spacer * 4.5
+    paddingLeft: spacer * 4.5
   },
   li: {
     extend: tl2,
     height: spacer * 3,
     listStyle: 'none',
     color: white,
-    padding: `0 ${spacer * 2.5}px`
+    padding: [[0, spacer * 2.5]]
   },
   link: {
     extend: p,
@@ -76,7 +76,7 @@ export default {
       bottom: -8,
       position: 'absolute',
       borderRadius: 1000,
-      transition: 'all 0.2s cubic-bezier(0.95, 0.1, 0.45, 0.94)'
+      transition: [['all', '0.2s', 'cubic-bezier(0.95, 0.1, 0.45, 0.94)']]
     }
   },
   forceSize: {
@@ -110,7 +110,7 @@ export default {
   },
   subheaderUl: {
     display: 'flex',
-    paddingInlineStart: spacer * 4.5
+    paddingLeft: 0
   },
   subheaderLi: {
     extend: tl2,
@@ -118,18 +118,29 @@ export default {
     alignItems: 'center',
     height: spacer * 3,
     listStyle: 'none',
-    padding: `0 ${spacer * 2.5}px`
+    padding: [[0, spacer * 2.5]],
+    '&:first-child': {
+      paddingLeft: 0
+    }
   },
   subheaderLink: {
-    extend: tl2,
+    extend: p,
     textDecoration: 'none',
     border: 'none',
     color: placeholderColor
   },
   activeSubheaderLink: {
+    extend: tl2,
     color: fontColor
   },
   white: {
     color: white
+  },
+  logo: {
+    display: 'flex',
+    alignItems: 'center',
+    '& > svg': {
+      marginRight: 16
+    }
   }
 }
diff --git a/new-lamassu-admin/src/components/Sidebar.styles.js b/new-lamassu-admin/src/components/Sidebar.styles.js
index b55195bc..c41effd0 100644
--- a/new-lamassu-admin/src/components/Sidebar.styles.js
+++ b/new-lamassu-admin/src/components/Sidebar.styles.js
@@ -9,7 +9,7 @@ import {
 
 import typographyStyles from './typography/styles'
 
-const { tl2 } = typographyStyles
+const { tl2, p } = typographyStyles
 
 const sidebarColor = zircon
 
@@ -33,7 +33,7 @@ export default {
   },
 
   link: {
-    extend: tl2,
+    extend: p,
     position: 'relative',
     color: placeholderColor,
     margin: '12px 24px 12px 0',
@@ -56,8 +56,8 @@ export default {
     }
   },
   activeLink: {
+    extend: tl2,
     color: primaryColor,
-    fontWeight: 700,
     '&::after': {
       height: '140%'
     }