From efe0f46ce475a2128a946b2df104e0a35f9a8556 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 10 Sep 2020 10:47:22 -0300
Subject: [PATCH 1/4] fix Sidebar position

---
 src/components/AppLayout/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx
index 20bd8c8907..f00d51a7b0 100644
--- a/src/components/AppLayout/index.tsx
+++ b/src/components/AppLayout/index.tsx
@@ -28,13 +28,14 @@ const GridTopbarWrapper = styled.nav`
 
 const GridSidebarWrapper = styled.aside`
   width: 200px;
-  padding: 8px;
+  padding: 56px 8px 0 8px;
   height: 100%;
   background-color: ${({ theme }) => theme.colors.white};
   border-right: 2px solid ${({ theme }) => theme.colors.separator};
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  position: fixed;
   grid-area: sidebar;
 
   div:last-of-type {

From cebe423eeea5d62aeae5fa7b128a5ee182a75ddb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 10 Sep 2020 12:23:48 -0300
Subject: [PATCH 2/4] fix padding

---
 src/components/AppLayout/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx
index f00d51a7b0..eec39d6d72 100644
--- a/src/components/AppLayout/index.tsx
+++ b/src/components/AppLayout/index.tsx
@@ -28,7 +28,7 @@ const GridTopbarWrapper = styled.nav`
 
 const GridSidebarWrapper = styled.aside`
   width: 200px;
-  padding: 56px 8px 0 8px;
+  padding: 64px 8px 0 8px;
   height: 100%;
   background-color: ${({ theme }) => theme.colors.white};
   border-right: 2px solid ${({ theme }) => theme.colors.separator};

From 81e8c35368e4f103188e95e5d80822b44f79cc7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Fri, 11 Sep 2020 14:45:43 -0300
Subject: [PATCH 3/4] fix padding and margin Help Center and Not connected Icon

---
 src/components/AppLayout/Sidebar/SafeHeader/index.tsx | 4 +---
 src/components/AppLayout/Sidebar/index.tsx            | 6 +++---
 src/components/AppLayout/index.tsx                    | 6 +-----
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
index 82df813fcc..c75a1156d4 100644
--- a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
+++ b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
@@ -102,9 +102,7 @@ const SafeHeader = ({
       <Container>
         <IdenticonContainer>
           <FlexSpacer />
-          <div>
-            <FixedIcon type="notConnected" />
-          </div>
+          <FixedIcon type="notConnected" />
           <UnStyledButton onClick={onToggleSafeList} data-testid={TOGGLE_SIDEBAR_BTN_TESTID}>
             <Icon size="md" type="circleDropdown" />
           </UnStyledButton>
diff --git a/src/components/AppLayout/Sidebar/index.tsx b/src/components/AppLayout/Sidebar/index.tsx
index f59c3b0e37..d50e3ca770 100644
--- a/src/components/AppLayout/Sidebar/index.tsx
+++ b/src/components/AppLayout/Sidebar/index.tsx
@@ -10,14 +10,14 @@ const StyledDivider = styled(Divider)`
 `
 
 const HelpContainer = styled.div`
-  height: 58px;
+  margin-top: auto;
 `
 
 const HelpCenterLink = styled.a`
   height: 30px;
   width: 166px;
-  padding: 10px 0 0 16px;
-  margin: 10px 0px;
+  padding: 6px 0 0 16px;
+  margin: 14px 0px;
   text-decoration: none;
   display: block;
 
diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx
index eec39d6d72..581e0b2df6 100644
--- a/src/components/AppLayout/index.tsx
+++ b/src/components/AppLayout/index.tsx
@@ -28,7 +28,7 @@ const GridTopbarWrapper = styled.nav`
 
 const GridSidebarWrapper = styled.aside`
   width: 200px;
-  padding: 64px 8px 0 8px;
+  padding: 62px 8px 0 8px;
   height: 100%;
   background-color: ${({ theme }) => theme.colors.white};
   border-right: 2px solid ${({ theme }) => theme.colors.separator};
@@ -37,10 +37,6 @@ const GridSidebarWrapper = styled.aside`
   box-sizing: border-box;
   position: fixed;
   grid-area: sidebar;
-
-  div:last-of-type {
-    margin-top: auto;
-  }
 `
 
 const GridBodyWrapper = styled.section`

From 21c9196ad28c749565a4bca32e744acff9efd422 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Fri, 11 Sep 2020 15:36:25 -0300
Subject: [PATCH 4/4] add scroll to Sidebar List menu

---
 src/components/List/index.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx
index adec3dacda..f2b7f0cd2b 100644
--- a/src/components/List/index.tsx
+++ b/src/components/List/index.tsx
@@ -70,6 +70,21 @@ const useStyles = makeStyles((theme: Theme) =>
       width: '100%',
       maxWidth: 200,
       backgroundColor: theme.palette.background.paper,
+      overflowX: 'auto',
+      margin: '8px 0 -4px 0',
+      '&::-webkit-scrollbar': {
+        width: '0.5em',
+      },
+      '&::-webkit-scrollbar-track': {
+        boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
+        webkitBoxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
+        borderRadius: '20px',
+      },
+      '&::-webkit-scrollbar-thumb': {
+        backgroundColor: 'darkgrey',
+        outline: '1px solid #dadada',
+        borderRadius: '20px',
+      },
     },
     nested: {
       paddingLeft: theme.spacing(3),