From b735cd2ee20143b904f90259381498d3bbf41de4 Mon Sep 17 00:00:00 2001
From: Tom Gallacher <tomgallacher23@gmail.com>
Date: Thu, 19 Jan 2017 15:08:08 +0000
Subject: [PATCH] Adding 5 o'clock shadow to org navigation

---
 frontend/src/components/navigation/org.js | 13 +++++++++++++
 ui/src/components/mini-metric/view.js     |  2 +-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/navigation/org.js b/frontend/src/components/navigation/org.js
index e8f493c5..13e13893 100644
--- a/frontend/src/components/navigation/org.js
+++ b/frontend/src/components/navigation/org.js
@@ -42,6 +42,7 @@ const StyledNav = styled.div`
 
 // TODO: refactor colours into constants in UI
 const NavigationLinkContainer = styled.div`
+  position: relative;
   padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)};
   color: #646464;
   border: solid ${remcalc(1)} #d8d8d8;
@@ -77,6 +78,17 @@ const NavLi = styled.li`
   }
 `;
 
+const Shadow = styled.div`
+  z-index: 1;
+  position: absolute;
+  height: ${remcalc(5)};
+  width: 100%;
+  left: 0;
+  bottom: 0;
+  background-image:
+    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
+`;
+
 const OrgNavigation = ({
   orgs = []
 }) => {
@@ -98,6 +110,7 @@ const OrgNavigation = ({
             }) =>
               <a href={href} onClick={onClick}>
                 <NavigationLinkContainer className={isActive ? 'active' : ''}>
+                  { !isActive && <Shadow />}
                   <OrgImage>
                     <OrgAvatar
                       height={remcalc(26)}
diff --git a/ui/src/components/mini-metric/view.js b/ui/src/components/mini-metric/view.js
index 684e1615..c7536768 100644
--- a/ui/src/components/mini-metric/view.js
+++ b/ui/src/components/mini-metric/view.js
@@ -49,4 +49,4 @@ View.propTypes = {
   children: React.PropTypes.node
 };
 
-module.exports = View;
\ No newline at end of file
+module.exports = View;