From 2163bf6b1fe23f16311f0b98ee022cce518de3e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <gaetan.renaudeau@ledger.fr>
Date: Wed, 13 Jun 2018 17:36:13 +0200
Subject: [PATCH] add TopGradient for MainSideBar

---
 src/components/MainSideBar/TopGradient.js | 19 +++++++++++++++++++
 src/components/MainSideBar/index.js       |  2 ++
 2 files changed, 21 insertions(+)
 create mode 100644 src/components/MainSideBar/TopGradient.js

diff --git a/src/components/MainSideBar/TopGradient.js b/src/components/MainSideBar/TopGradient.js
new file mode 100644
index 00000000..3cf0e899
--- /dev/null
+++ b/src/components/MainSideBar/TopGradient.js
@@ -0,0 +1,19 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+const TopGradientBox = styled.div`
+  width: 100%;
+  height: 80px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(#ffffff 40%, rgba(255, 255, 255, 0));
+  z-index: 2;
+  pointer-events: none;
+`
+
+const el = <TopGradientBox />
+
+export default () => el
diff --git a/src/components/MainSideBar/index.js b/src/components/MainSideBar/index.js
index b8a0688d..a55a1466 100644
--- a/src/components/MainSideBar/index.js
+++ b/src/components/MainSideBar/index.js
@@ -32,6 +32,7 @@ import IconExchange from 'icons/Exchange'
 
 import AccountListItem from './AccountListItem'
 import AddAccountButton from './AddAccountButton'
+import TopGradient from './TopGradient'
 
 const mapStateToProps = state => ({
   accounts: accountsSelector(state),
@@ -84,6 +85,7 @@ class MainSideBar extends PureComponent<Props> {
 
     return (
       <Box relative bg="white" style={{ width: 230 }}>
+        <TopGradient />
         <GrowScroll>
           <Space of={70} />
           <SideBarList title={t('app:sidebar.menu')}>