Improved sidebar section styling

Summary:
Pritesh marked correctly that it was not entirely clear whether sections are collapsed or not. It seemed the arrows were off, checked the Android style guide, the arrows are correct, but difference is that the bottom border of sections is missing. Adding those clarifies the collapsed state properly I think.

https://pxl.cl/Wpnq

Reviewed By: passy

Differential Revision: D19372987

fbshipit-source-id: 2fb898301f63bd8edb2c3c9851f89edc801a524f

src/chrome/mainsidebar/MainSidebar2.tsx

@@ -69,7 +69,8 @@ type SectionLevel = 1 | 2 | 3;
 const SidebarSectionButton = styled('button')<{
   level: SectionLevel;
   color: string;
-}>(({level, color}) => ({
+  collapsed: boolean;
+}>(({level, color, collapsed}) => ({
   fontWeight: level === 3 ? 'normal' : 'bold',
   borderRadius: 0,
   border: 'none',
@@ -86,13 +87,15 @@ const SidebarSectionButton = styled('button')<{
 const SidebarSectionBody = styled('div')<{
   level: SectionLevel;
   collapsed: boolean;
-}>(({collapsed}) => ({
+}>(({collapsed, level}) => ({
   flexShrink: 0,
   overflow: 'hidden',
   maxHeight: collapsed ? 0 : 2000, // might need increase if too many plugins...
   transition: collapsed
     ? 'max-height 0.3s ease-out'
     : 'max-height 0.5s ease-in',
+  borderBottom:
+    level === 2 ? `1px solid ${colors.sectionHeaderBorder}` : undefined,
 }));
 
 const SidebarSection: React.FC<{
@@ -109,7 +112,8 @@ const SidebarSection: React.FC<{
       <SidebarSectionButton
         onClick={() => setCollapsed(s => !s)}
         level={level}
-        color={color}>
+        color={color}
+        collapsed={collapsed}>
         <HBox grow="left">
           {typeof title === 'function' ? title(collapsed) : title}
           {level < 3 && children && (
@@ -122,7 +126,6 @@ const SidebarSection: React.FC<{
         </HBox>
       </SidebarSectionButton>
       <SidebarSectionBody level={level} collapsed={collapsed}>
-        {level === 1 && <div style={{height: 8}} />}
         {children}
       </SidebarSectionBody>
     </>