fix: add margins to section-list/menu

consoles/my-joy-images/src/components/menu.js

@@ -28,7 +28,7 @@ const Menu = ({ links = [] }) => {
 
   return (
     <ViewContainer plain>
-      <Margin bottom={4}>
+      <Margin bottom="5" top="1">
         <SectionList>{getMenuItems(_links)}</SectionList>
       </Margin>
     </ViewContainer>

consoles/my-joy-instances/src/components/__tests__/__snapshots__/menu.spec.js.snap

@@ -4,6 +4,7 @@ exports[`renders <Menu /> without throwing 1`] = `null`;
 
 exports[`renders <Menu links /> without throwing 1`] = `
 .c2 {
+  margin-top: 0.75rem;
   margin-bottom: 1.875rem;
 }
 
@@ -52,7 +53,7 @@ exports[`renders <Menu links /> without throwing 1`] = `
   text-decoration: none;
   cursor: pointer;
   padding: 0 0.75rem;
-  padding-bottom: 0.375rem;
+  padding-bottom: 0.9375rem;
   position: relative;
 }
 
@@ -70,7 +71,7 @@ exports[`renders <Menu links /> without throwing 1`] = `
 .c3 {
   background: rgb(250,250,250);
   list-style-type: none;
-  padding: 0 0 0.1875rem 0;
+  padding: 0 0 0.75rem 0;
   max-height: 3.125rem;
   overflow-x: auto;
   overflow-y: hidden;

consoles/my-joy-instances/src/components/menu.js

@@ -28,7 +28,7 @@ const Menu = ({ links = [] }) => {
 
   return (
     <ViewContainer plain>
-      <Margin bottom={5}>
+      <Margin bottom="5" top="2">
         <SectionList>{getMenuItems(_links)}</SectionList>
       </Margin>
     </ViewContainer>

consoles/my-joy-instances/src/components/navigation/index.js

@@ -1 +0,0 @@
-export { default as Menu } from './menu';

consoles/my-joy-instances/src/containers/navigation/menu.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import get from 'lodash.get';
 
-import { Menu } from '@components/navigation';
+import Menu from '@components/menu';
 
 export default connect((state, { match }) => {
   const instanceId = get(match, 'params.instance');

packages/ui-toolkit/src/section-list/index.js

@@ -5,7 +5,7 @@ import remcalc from 'remcalc';
 const UnorderedList = styled.ul`
   background: ${props => props.theme.disabled};
   list-style-type: none;
-  padding: 0 0 ${remcalc(3)} 0;
+  padding: 0 0 ${remcalc(12)} 0;
   max-height: ${remcalc(50)};
   overflow-x: auto;
   overflow-y: hidden;

packages/ui-toolkit/src/section-list/item.js

@@ -26,7 +26,7 @@ export const Anchor = styled(BaseAnchor)`
   text-decoration: none;
   cursor: pointer;
   padding: 0 ${remcalc(12)};
-  padding-bottom: ${remcalc(6)};
+  padding-bottom: ${remcalc(15)};
   position: relative;
 
   &.active {