adjust sidebar layout

src/client/js/components/Sidebar/SidebarNav.jsx

@@ -30,7 +30,7 @@ class SidebarNav extends React.Component {
     return (
       <button
         type="button"
-        className={`d-block btn btn-primary btn-lg ${isSelected ? 'active' : ''}`}
+        className={`d-block btn btn-primary ${isSelected ? 'active' : ''}`}
         onClick={() => this.itemSelectedHandler(id)}
       >
         <i className="material-icons">{iconName}</i>
@@ -59,7 +59,7 @@ class SidebarNav extends React.Component {
     const { PrimaryItem, SecondaryItem } = this;
 
     return (
-      <div className="grw-sidebar-nav d-flex flex-column justify-content-between">
+      <div className="grw-sidebar-nav d-flex flex-column justify-content-between pb-4">
         <div className="grw-sidebar-nav-primary-container">
           <PrimaryItem id="custom" label="Custom Sidebar" iconName="code" />
           <PrimaryItem id="recent" label="Recent Changes" iconName="update" />

src/client/styles/scss/_sidebar.scss

@@ -75,6 +75,7 @@
 
     .btn {
       width: $grw-sidebar-nav-width;
+      line-height: 1em;
       border-radius: 0;
 
       // icon opacity
@@ -93,10 +94,9 @@
 
     .grw-sidebar-nav-primary-container {
       .btn {
-        padding: 0.8rem 1rem;
-        line-height: 1em;
+        padding: 1em;
         i {
-          font-size: 1.7em;
+          font-size: 2.3em;
         }
 
         &.active {
@@ -104,6 +104,15 @@
         }
       }
     }
+
+    .grw-sidebar-nav-secondary-container {
+      .btn {
+        padding: 0.9em;
+        i {
+          font-size: 1.5em;
+        }
+      }
+    }
   }
 }